Inserter: Move the inserter at the bottom of the editor to the right

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()

editor/inserter/style.scss

@@ -88,6 +88,16 @@
 			}
 		}
 	}
+
+	&.is-right {
+		left: -32px;
+		.editor-inserter__arrow {
+			left: 49px;
+			&:before {
+				left: 0;
+			}
+		}
+	}
 }
 
 .editor-inserter__arrow {

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>
 	);
 }