Show block inserter to the left of empty paragraphs.

editor/components/block-list/block.js

@@ -9,7 +9,7 @@ import tinymce from 'tinymce';
 /**
  * WordPress dependencies
  */
-import { Component, findDOMNode, compose } from '@wordpress/element';
+import { Component, findDOMNode, Fragment, compose } from '@wordpress/element';
 import {
 	keycodes,
 	focus,
@@ -45,6 +45,7 @@ import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from './ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
+import Inserter from '../inserter';
 import { createInnerBlockList } from './utils';
 import {
 	editPost,
@@ -429,7 +430,7 @@ export class BlockListBlock extends Component {
 		const isSelectedNotTyping = isSelected && ! isTypingWithinBlock;
 		const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock;
 		const shouldAppearSelected = ! showSideInserter && isSelectedNotTyping;
-		const shouldShowMovers = shouldAppearSelected || isHovered || ( isEmptyDefaultBlock && isSelectedNotTyping );
+		const shouldShowMovers = ( shouldAppearSelected || isHovered || ( isEmptyDefaultBlock && isSelectedNotTyping ) ) && ! showSideInserter;
 		const shouldShowSettingsMenu = shouldShowMovers;
 		const shouldShowContextualToolbar = shouldAppearSelected && isValid && showContextualToolbar;
 		const shouldShowMobileToolbar = shouldAppearSelected;
@@ -505,7 +506,7 @@ export class BlockListBlock extends Component {
 						isLast={ isLast }
 					/>
 				) }
-				{ shouldShowSettingsMenu && (
+				{ shouldShowSettingsMenu && ! showSideInserter && (
 					<BlockSettingsMenu
 						uids={ [ block.uid ] }
 						rootUID={ rootUID }
@@ -567,9 +568,17 @@ export class BlockListBlock extends Component {
 					/>
 				) }
 				{ showSideInserter && (
-					<div className="editor-block-list__side-inserter">
-						<InserterWithShortcuts uid={ block.uid } layout={ layout } onToggle={ this.selectOnOpen } />
-					</div>
+					<Fragment>
+						<div className="editor-block-list__side-inserter">
+							<InserterWithShortcuts uid={ block.uid } layout={ layout } onToggle={ this.selectOnOpen } />
+						</div>
+						<div className="editor-block-list__empty-block-inserter">
+							<Inserter
+								position="top right"
+								onToggle={ this.selectOnOpen }
+							/>
+						</div>
+					</Fragment>
 				) }
 			</IgnoreNestedEvents>
 		);

editor/components/block-list/style.scss

@@ -556,8 +556,25 @@
 	position: absolute;
 	top: 10px;
 	right: 10px;
+	display: none;
 
 	@include break-small {
 		right: $block-mover-padding-visible + 10px;
+		display: block;
+	}
+}
+
+.editor-block-list__empty-block-inserter {
+	position: absolute;
+		top: 10px;
+		right: 10px;
+
+	.editor-inserter__toggle {
+		border-radius: 50%;
+	}
+
+	@include break-small {
+		left: 10px;
+		right: auto;
 	}
 }

editor/components/default-block-appender/index.js

@@ -18,8 +18,10 @@ import './style.scss';
 import BlockDropZone from '../block-drop-zone';
 import { insertDefaultBlock, startTyping } from '../../store/actions';
 import { getBlock, getBlockCount } from '../../store/selectors';
+import InserterWithShortcuts from '../inserter-with-shortcuts';
+import Inserter from '../inserter';
 
-export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPrompt, placeholder } ) {
+export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPrompt, placeholder, layout, rootUID } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
 	}
@@ -38,6 +40,8 @@ export function DefaultBlockAppender( { isLocked, isVisible, onAppend, showPromp
 				onKeyDown={ onAppend }
 				value={ showPrompt ? value : '' }
 			/>
+			<InserterWithShortcuts rootUID={ rootUID } layout={ layout } />
+			<Inserter position="top right" />
 		</div>
 	);
 }

editor/components/default-block-appender/style.scss

@@ -6,9 +6,52 @@ $empty-paragraph-height: $text-editor-font-size * 4;
 		color: $dark-gray-300;
 		outline: 1px solid transparent;
 		transition: 0.2s outline;
+	}
+
+	.editor-inserter__toggle {
+		border-radius: 50%;
+	}
+
+	.editor-inserter-with-shortcuts {
+		position: absolute;
+			top: 10px;
+			right: 58px;
+		display: none;
+
+		.components-icon-button {
+			color: $light-gray-700;
+			transition: color 0.2s;
+		}
+
+		@include break-small {
+			display: flex;
+		}
+	}
+
+	&:hover {
+		.editor-inserter-with-shortcuts {
+			opacity: 1;
+
+			.components-icon-button {
+				color: $dark-gray-500;
+			}
+		}
+
+		.editor-inserter {
+			opacity: 1;
+		}
+	}
+
+	.editor-inserter {
+		opacity: 0;
+		position: absolute;
+			top: 10px;
+			right: 10px;
+		transition: opacity 0.2s;
 
-		&:hover {
-			outline: 1px solid $light-gray-500;
+		@include break-small {
+			left: 10px;
+			right: auto;
 		}
 	}
 }

editor/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -32,6 +32,10 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     type="text"
     value="Write your story"
   />
+  <WrappedComponent />
+  <Select(Dispatch(WrappedComponent))
+    position="top right"
+  />
 </div>
 `;
 
@@ -49,6 +53,10 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     type="text"
     value="Write your story"
   />
+  <WrappedComponent />
+  <Select(Dispatch(WrappedComponent))
+    position="top right"
+  />
 </div>
 `;
 
@@ -66,5 +74,9 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     type="text"
     value=""
   />
+  <WrappedComponent />
+  <Select(Dispatch(WrappedComponent))
+    position="top right"
+  />
 </div>
 `;

editor/components/inserter-with-shortcuts/index.js

@@ -11,31 +11,25 @@ import { BlockIcon, createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { compose } from '@wordpress/element';
 import { IconButton, withContext } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import Inserter from '../inserter';
 import { getFrecentInserterItems } from '../../store/selectors';
-import { replaceBlocks } from '../../store/actions';
 
-function InserterWithShortcuts( { items, isLocked, onToggle, onInsert } ) {
+function InserterWithShortcuts( { items, isLocked, onInsert } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
 	const itemsWithoutDefaultBlock = filter( items, ( item ) =>
 		item.name !== getDefaultBlockName() || ! isEmpty( item.initialAttributes )
-	).slice( 0, 2 );
+	).slice( 0, 3 );
 
 	return (
 		<div className="editor-inserter-with-shortcuts">
-			<Inserter
-				position="top left"
-				onToggle={ onToggle }
-			/>
-
 			{ itemsWithoutDefaultBlock.map( ( item ) => (
 				<IconButton
 					key={ item.id }
@@ -62,13 +56,21 @@ export default compose(
 	} ),
 	connect(
 		( state, { enabledBlockTypes } ) => ( {
-			items: getFrecentInserterItems( state, enabledBlockTypes, 3 ),
-		} ),
-		( dispatch, { uid, layout } ) => ( {
+			items: getFrecentInserterItems( state, enabledBlockTypes, 4 ),
+		} )
+	),
+	withDispatch( ( dispatch, ownProps ) => {
+		const { uid, rootUID, layout } = ownProps;
+
+		return {
 			onInsert( { name, initialAttributes } ) {
 				const block = createBlock( name, { ...initialAttributes, layout } );
-				return dispatch( replaceBlocks( uid, block ) );
+				if ( uid ) {
+					dispatch( 'core/editor' ).replaceBlocks( uid, block );
+				} else {
+					dispatch( 'core/editor' ).insertBlock( block, undefined, rootUID );
+				}
 			},
-		} )
-	),
+		};
+	} ),
 )( InserterWithShortcuts );