From 8dc1de9ea27e43a3c8b32a6e23f5548ae9c552b3 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Thu, 5 Sep 2019 12:30:47 +0800
Subject: [PATCH] Add navigator for nav block (#17265)

* Add icon for block navigator

* Extract block navigation list into its own file and export from block-editor package root

* Refactor navigator into own component and hook up to store

* Switch to using a hook to implement the block navigator toolbar

* Return elements from hook instead of components to avoid redeclaration of components
---
 packages/block-editor/README.md               |  4 +
 .../src/components/block-navigation/index.js  | 55 +------------
 .../src/components/block-navigation/list.js   | 64 +++++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 .../block-library/src/navigation-menu/edit.js | 14 +++-
 .../navigation-menu/use-block-navigator.js    | 80 +++++++++++++++++++
 6 files changed, 165 insertions(+), 53 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-navigation/list.js
 create mode 100644 packages/block-library/src/navigation-menu/use-block-navigator.js

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index d82de7b30f70e..798ae994fb27b 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -122,6 +122,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="BlockNavigationList" href="#BlockNavigationList">#</a> **BlockNavigationList**
+
+Undocumented declaration.
+
 <a name="BlockPreview" href="#BlockPreview">#</a> **BlockPreview**
 
 BlockPreview renders a preview of a block or array of blocks.
diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js
index b0542caa3d6f3..9479d7aafa348 100644
--- a/packages/block-editor/src/components/block-navigation/index.js
+++ b/packages/block-editor/src/components/block-navigation/index.js
@@ -1,69 +1,20 @@
 /**
  * External dependencies
  */
-import { map, noop } from 'lodash';
-import classnames from 'classnames';
+import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withSelect, withDispatch } from '@wordpress/data';
-import { Button, NavigableMenu } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { NavigableMenu } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import BlockIcon from '../block-icon';
-
-function BlockNavigationList( {
-	blocks,
-	selectedBlockClientId,
-	selectBlock,
-	showNestedBlocks,
-} ) {
-	return (
-		/*
-		 * Disable reason: The `list` ARIA role is redundant but
-		 * Safari+VoiceOver won't announce the list otherwise.
-		 */
-		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">
-			{ map( blocks, ( block ) => {
-				const blockType = getBlockType( block.name );
-				const isSelected = block.clientId === selectedBlockClientId;
-
-				return (
-					<li key={ block.clientId }>
-						<div className="editor-block-navigation__item block-editor-block-navigation__item">
-							<Button
-								className={ classnames( 'editor-block-navigation__item-button block-editor-block-navigation__item-button', {
-									'is-selected': isSelected,
-								} ) }
-								onClick={ () => selectBlock( block.clientId ) }
-							>
-								<BlockIcon icon={ blockType.icon } showColors />
-								{ blockType.title }
-								{ isSelected && <span className="screen-reader-text">{ __( '(selected block)' ) }</span> }
-							</Button>
-						</div>
-						{ showNestedBlocks && !! block.innerBlocks && !! block.innerBlocks.length && (
-							<BlockNavigationList
-								blocks={ block.innerBlocks }
-								selectedBlockClientId={ selectedBlockClientId }
-								selectBlock={ selectBlock }
-								showNestedBlocks
-							/>
-						) }
-					</li>
-				);
-			} ) }
-		</ul>
-		/* eslint-enable jsx-a11y/no-redundant-roles */
-	);
-}
+import BlockNavigationList from './list';
 
 function BlockNavigation( { rootBlock, rootBlocks, selectedBlockClientId, selectBlock } ) {
 	if ( ! rootBlocks || rootBlocks.length === 0 ) {
diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
new file mode 100644
index 0000000000000..0a34d24ff4e4b
--- /dev/null
+++ b/packages/block-editor/src/components/block-navigation/list.js
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+
+export default function BlockNavigationList( {
+	blocks,
+	selectedBlockClientId,
+	selectBlock,
+	showNestedBlocks,
+} ) {
+	return (
+		/*
+		 * Disable reason: The `list` ARIA role is redundant but
+		 * Safari+VoiceOver won't announce the list otherwise.
+		 */
+		/* eslint-disable jsx-a11y/no-redundant-roles */
+		<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">
+			{ map( blocks, ( block ) => {
+				const blockType = getBlockType( block.name );
+				const isSelected = block.clientId === selectedBlockClientId;
+
+				return (
+					<li key={ block.clientId }>
+						<div className="editor-block-navigation__item block-editor-block-navigation__item">
+							<Button
+								className={ classnames( 'editor-block-navigation__item-button block-editor-block-navigation__item-button', {
+									'is-selected': isSelected,
+								} ) }
+								onClick={ () => selectBlock( block.clientId ) }
+							>
+								<BlockIcon icon={ blockType.icon } showColors />
+								{ blockType.title }
+								{ isSelected && <span className="screen-reader-text">{ __( '(selected block)' ) }</span> }
+							</Button>
+						</div>
+						{ showNestedBlocks && !! block.innerBlocks && !! block.innerBlocks.length && (
+							<BlockNavigationList
+								blocks={ block.innerBlocks }
+								selectedBlockClientId={ selectedBlockClientId }
+								selectBlock={ selectBlock }
+								showNestedBlocks
+							/>
+						) }
+					</li>
+				);
+			} ) }
+		</ul>
+		/* eslint-enable jsx-a11y/no-redundant-roles */
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 729fe3fd22229..e2c4a764f4635 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -12,6 +12,7 @@ export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
+export { default as BlockNavigationList } from './block-navigation/list';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js
index cfda7b514deb0..67025c2a2d04b 100644
--- a/packages/block-library/src/navigation-menu/edit.js
+++ b/packages/block-library/src/navigation-menu/edit.js
@@ -7,23 +7,35 @@ import {
 import {
 	InnerBlocks,
 	InspectorControls,
+	BlockControls,
 } from '@wordpress/block-editor';
 import {
 	CheckboxControl,
 	PanelBody,
+	Toolbar,
 } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { __ } from '@wordpress/i18n';
+import useBlockNavigator from './use-block-navigator';
 
 function NavigationMenu( {
 	attributes,
 	setAttributes,
+	clientId,
 } ) {
+	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId );
+
 	return (
 		<Fragment>
+			<BlockControls>
+				<Toolbar>
+					{ navigatorToolbarButton }
+				</Toolbar>
+			</BlockControls>
+			{ navigatorModal }
 			<InspectorControls>
 				<PanelBody
 					title={ __( 'Menu Settings' ) }
diff --git a/packages/block-library/src/navigation-menu/use-block-navigator.js b/packages/block-library/src/navigation-menu/use-block-navigator.js
new file mode 100644
index 0000000000000..b63fa7a4343a6
--- /dev/null
+++ b/packages/block-library/src/navigation-menu/use-block-navigator.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useState,
+} from '@wordpress/element';
+import {
+	useSelect,
+	useDispatch,
+} from '@wordpress/data';
+import {
+	BlockNavigationList,
+} from '@wordpress/block-editor';
+import {
+	IconButton,
+	SVG,
+	Path,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const NavigatorIcon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20">
+		<Path d="M5 5H3v2h2V5zm3 8h11v-2H8v2zm9-8H6v2h11V5zM7 11H5v2h2v-2zm0 8h2v-2H7v2zm3-2v2h11v-2H10z" />
+	</SVG>
+);
+
+export default function useBlockNavigator( clientId ) {
+	const [ isNavigationListOpen, setIsNavigationListOpen ] = useState( false );
+
+	const {
+		block,
+		selectedBlockClientId,
+	} = useSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getBlock,
+		} = select( 'core/block-editor' );
+
+		return {
+			block: getBlock( clientId ),
+			selectedBlockClientId: getSelectedBlockClientId(),
+		};
+	}, [ clientId ] );
+
+	const {
+		selectBlock,
+	} = useDispatch( 'core/block-editor' );
+
+	const navigatorToolbarButton = (
+		<IconButton
+			className="components-toolbar__control"
+			label={ __( 'Open block navigator' ) }
+			onClick={ () => setIsNavigationListOpen( true ) }
+			icon={ NavigatorIcon }
+		/>
+	);
+
+	const navigatorModal = isNavigationListOpen && (
+		<Modal
+			title={ __( 'Block Navigator' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ () => {
+				setIsNavigationListOpen( false );
+			} }
+		>
+			<BlockNavigationList
+				blocks={ [ block ] }
+				selectedBlockClientId={ selectedBlockClientId }
+				selectBlock={ selectBlock }
+				showNestedBlocks
+			/>
+		</Modal>
+	);
+
+	return {
+		navigatorToolbarButton,
+		navigatorModal,
+	};
+}