Add appender to Block Navigator (#18100)

* Add appender to Block Navigator * Use correct name for component * Avoid selecting block on insert * Add spoken message indicating block has been inserted * Use CSS to hide inner blocks instead of conditional rendering. Solves an issue where allowedBlocks for menu items are not registered until the menu item is clicked on
WordPress · Nov 6, 2019 · 73189e1 · 73189e1
1 parent bb0529f
commit 73189e1
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
@@ -16,6 +16,7 @@ import { create, getTextContent } from '@wordpress/rich-text';
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import ButtonBlockAppender from '../button-block-appender';
 
 /**
  * Get the block display name, if it has one, or the block title if it doesn't.
@@ -43,8 +44,14 @@ export default function BlockNavigationList( {
 	blocks,
 	selectedBlockClientId,
 	selectBlock,
+	showAppender,
+
+	// Internal use only.
 	showNestedBlocks,
+	parentBlockClientId,
 } ) {
+	const shouldShowAppender = showAppender && !! parentBlockClientId;
+
 	return (
 		/*
 		 * Disable reason: The `list` ARIA role is redundant but
@@ -75,12 +82,24 @@ export default function BlockNavigationList( {
 								blocks={ block.innerBlocks }
 								selectedBlockClientId={ selectedBlockClientId }
 								selectBlock={ selectBlock }
+								parentBlockClientId={ block.clientId }
+								showAppender={ showAppender }
 								showNestedBlocks
 							/>
 						) }
 					</li>
 				);
 			} ) }
+			{ shouldShowAppender && (
+				<li>
+					<div className="editor-block-navigation__item block-editor-block-navigation__item">
+						<ButtonBlockAppender
+							rootClientId={ parentBlockClientId }
+							__experimentalSelectBlockOnInsert={ false }
+						/>
+					</div>
+				</li>
+			) }
 		</ul>
 		/* eslint-enable jsx-a11y/no-redundant-roles */
 	);

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
@@ -16,6 +16,24 @@ $tree-item-height: 36px;
 	margin: 0;
 }
 
+.block-editor-block-navigation__list .block-editor-button-block-appender {
+	outline: none;
+	background: none;
+	padding: $grid-size;
+	margin-left: 0.8em;
+	width: $icon-button-size;
+	border-radius: 4px;
+
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
+		@include menu-style__hover;
+		outline: none;
+	}
+
+	&:focus:not(:disabled):not([aria-disabled="true"]) {
+		@include menu-style__focus;
+	}
+}
+
 .block-editor-block-navigation__list .block-editor-block-navigation__list {
 	margin-top: 2px;
 	border-left: $tree-border-width solid $light-gray-900;

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -15,12 +15,13 @@ import { _x, sprintf } from '@wordpress/i18n';
 import BlockDropZone from '../block-drop-zone';
 import Inserter from '../inserter';
 
-function ButtonBlockAppender( { rootClientId, className } ) {
+function ButtonBlockAppender( { rootClientId, className, __experimentalSelectBlockOnInsert: selectBlockOnInsert } ) {
 	return (
 		<>
 			<BlockDropZone rootClientId={ rootClientId } />
 			<Inserter
 				rootClientId={ rootClientId }
+				__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
 				renderToggle={ ( { onToggle, disabled, isOpen, blockTitle, hasSingleBlockType } ) => {
 					let label;
 					if ( hasSingleBlockType ) {

diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js
@@ -5,6 +5,7 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
@@ -90,7 +91,13 @@ class Inserter extends Component {
 	 * @return {WPElement} Dropdown content element.
 	 */
 	renderContent( { onClose } ) {
-		const { rootClientId, clientId, isAppender, showInserterHelpPanel } = this.props;
+		const {
+			rootClientId,
+			clientId,
+			isAppender,
+			showInserterHelpPanel,
+			__experimentalSelectBlockOnInsert: selectBlockOnInsert,
+		} = this.props;
 
 		return (
 			<InserterMenu
@@ -99,15 +106,18 @@ class Inserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
+				__experimentalSelectBlockOnInsert={ selectBlockOnInsert }
 			/>
 		);
 	}
 
 	render() {
 		const { position, hasSingleBlockType, insertOnlyAllowedBlock } = this.props;
+
 		if ( hasSingleBlockType ) {
 			return this.renderToggle( { onToggle: insertOnlyAllowedBlock } );
 		}
+
 		return (
 			<Dropdown
 				className="editor-inserter block-editor-inserter"
@@ -133,10 +143,12 @@ export default compose( [
 		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
 
 		const hasSingleBlockType = allowedBlocks && ( get( allowedBlocks, [ 'length' ], 0 ) === 1 );
+
 		let allowedBlockType = false;
 		if ( hasSingleBlockType ) {
 			allowedBlockType = allowedBlocks[ 0 ];
 		}
+
 		return {
 			hasItems: hasInserterItems( rootClientId ),
 			hasSingleBlockType,
@@ -151,6 +163,7 @@ export default compose( [
 				const {
 					hasSingleBlockType,
 					allowedBlockType,
+					__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 				} = ownProps;
 
 				if ( ! hasSingleBlockType ) {
@@ -184,11 +197,19 @@ export default compose( [
 				} = dispatch( 'core/block-editor' );
 
 				const blockToInsert = createBlock( allowedBlockType.name );
+
 				insertBlock(
 					blockToInsert,
 					getInsertionIndex(),
-					rootClientId
+					rootClientId,
+					selectBlockOnInsert
 				);
+
+				if ( ! selectBlockOnInsert ) {
+					// translators: %s: the name of the block that has been added
+					const message = sprintf( __( '%s block added' ), allowedBlockType.title );
+					speak( message );
+				}
 			},
 		};
 	} ),

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -21,6 +21,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import { __, _n, _x, sprintf } from '@wordpress/i18n';
 import { Component, createRef } from '@wordpress/element';
 import {
@@ -531,21 +532,33 @@ export default compose(
 				const {
 					getSelectedBlock,
 				} = select( 'core/block-editor' );
-				const { isAppender } = ownProps;
-				const { name, initialAttributes } = item;
+				const {
+					isAppender,
+					onSelect,
+					__experimentalSelectBlockOnInsert: selectBlockOnInsert,
+				} = ownProps;
+				const { name, title, initialAttributes } = item;
 				const selectedBlock = getSelectedBlock();
 				const insertedBlock = createBlock( name, initialAttributes );
+
 				if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
 					replaceBlocks( selectedBlock.clientId, insertedBlock );
 				} else {
 					insertBlock(
 						insertedBlock,
 						getInsertionIndex(),
-						ownProps.destinationRootClientId
+						ownProps.destinationRootClientId,
+						selectBlockOnInsert
 					);
+
+					if ( ! selectBlockOnInsert ) {
+						// translators: %s: the name of the block that has been added
+						const message = sprintf( __( '%s block added' ), title );
+						speak( message );
+					}
 				}
 
-				ownProps.onSelect();
+				onSelect();
 				return insertedBlock;
 			},
 		};

diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
@@ -193,12 +193,10 @@ function NavigationMenuItemEdit( {
 					placeholder={ __( 'Add item…' ) }
 					withoutInteractiveFormatting
 				/>
-				{ ( isSelected || isParentOfSelectedBlock ) &&
-					<InnerBlocks
-						allowedBlocks={ [ 'core/navigation-menu-item' ] }
-						renderAppender={ hasDescendants ? InnerBlocks.ButtonBlockAppender : false }
-					/>
-				}
+				<InnerBlocks
+					allowedBlocks={ [ 'core/navigation-menu-item' ] }
+					renderAppender={ hasDescendants ? InnerBlocks.ButtonBlockAppender : false }
+				/>
 			</div>
 		</Fragment>
 	);

diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss
@@ -21,6 +21,15 @@
 	// and the edit container should compensate.
 	// This is to make sure the edit and view are the same.
 	padding: 0 $grid-size;
+
+	// Only display inner blocks when the block is being edited.
+	.block-editor-inner-blocks {
+		display: none;
+	}
+
+	&.is-editing .block-editor-inner-blocks {
+		display: block;
+	}
 }
 
 .wp-block-navigation-menu-item__edit-container {

diff --git a/packages/block-library/src/navigation-menu/block-navigation-list.js b/packages/block-library/src/navigation-menu/block-navigation-list.js
@@ -35,6 +35,7 @@ export default function BlockNavigationList( { clientId } ) {
 			selectedBlockClientId={ selectedBlockClientId }
 			selectBlock={ selectBlock }
 			showNestedBlocks
+			showAppender
 		/>
 	);
 }