From aec92737ded09d150f61c0d49f7b90f848322bdb Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 12 May 2017 12:29:20 +0100
Subject: [PATCH] Inserter: Move the inserter at the bottom of the editor to
 the right

---
 editor/inserter/menu.js             |  5 ++++-
 editor/inserter/style.scss          | 10 ++++++++++
 editor/modes/visual-editor/index.js |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js
index 154c39e1a9cca8..40486e4591544a 100644
--- a/editor/inserter/menu.js
+++ b/editor/inserter/menu.js
@@ -3,6 +3,7 @@
  */
 import { connect } from 'react-redux';
 import { flow, groupBy, sortBy, findIndex, filter } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -224,9 +225,11 @@ class InserterMenu extends wp.element.Component {
 	render() {
 		const { position = 'top' } = this.props;
 		const visibleBlocksByCategory = this.getVisibleBlocksByCategory( wp.blocks.getBlocks() );
+		const positionClasses = position.split( ' ' ).map( ( pos ) => `is-${ pos }` );
+		const className = classnames( 'editor-inserter__menu', positionClasses );
 
 		return (
-			<div className={ `editor-inserter__menu is-${ position }` } tabIndex="0">
+			<div className={ className } tabIndex="0">
 				<div className="editor-inserter__arrow" />
 				<div role="menu" className="editor-inserter__content">
 					{ wp.blocks.getCategories()
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index d8885503ccb590..67ff24ac99b8a2 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -88,6 +88,16 @@
 			}
 		}
 	}
+
+	&.is-right {
+		left: -30px;
+		.editor-inserter__arrow {
+			left: 47px;
+			&:before {
+				left: 0;
+			}
+		}
+	}
 }
 
 .editor-inserter__arrow {
diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
index 561a7c53a9f08f..7e85e8dbb6d1f4 100644
--- a/editor/modes/visual-editor/index.js
+++ b/editor/modes/visual-editor/index.js
@@ -19,7 +19,7 @@ function VisualEditor( { blocks } ) {
 			{ blocks.map( ( uid ) => (
 				<VisualEditorBlock key={ uid } uid={ uid } />
 			) ) }
-			<Inserter />
+			<Inserter position="top right" />
 		</div>
 	);
 }