Show block inserter to the left of empty paragraphs. (#5478)

This seeks to improve the usability of adding content other than text. It also removes the ellipsis menu for empty paragraphs under the assumption that it adds unnecessary noise. Once the user types anything, both the movers and menu reappear. It also bumps the number of items in the quick-shortcuts area to 3. Tasks: * Add quick blocks and inserter to default block appender. * Simplify shortcuts for inserting blocks on mobile. * Add circular border radius to side inserter. * Allow InserterWithShortcuts to insert without replacement. * Update default block appender snapshots
WordPress · Mar 12, 2018 · fc26eb7 · fc26eb7
1 parent 3abaaa7
commit fc26eb7
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 24 deletions.
diff --git a/editor/components/block-list/block.js b/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>
 		);

diff --git a/editor/components/block-list/style.scss b/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;
 	}
 }
diff --git a/editor/components/default-block-appender/index.js b/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>
 	);
 }

diff --git a/editor/components/default-block-appender/style.scss b/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;
 		}
 	}
 }

diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/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>
 `;
diff --git a/editor/components/inserter-with-shortcuts/index.js b/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 );