From e6cba6aacd5518e8583d2d6a1779458a2fb39f02 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 3 Apr 2020 15:02:07 +0800
Subject: [PATCH] Try a toolbar for the block navigator

---
 .../components/block-navigation/style.scss    | 25 ++++++++++
 .../components/block-navigation/toolbar.js    | 49 +++++++++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 .../menu-editor/navigation-structure-panel.js | 30 +++++++++---
 4 files changed, 97 insertions(+), 8 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-navigation/toolbar.js

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index abc9ad802ed08e..cc557019bacfe6 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -93,3 +93,28 @@ $tree-item-height: 36px;
 .components-popover.block-editor-block-navigation__popover {
 	z-index: z-index(".components-popover.block-editor-block-navigation__popover");
 }
+
+.block-editor-block-navigation-toolbar {
+	display: flex;
+	flex-direction: row;
+	height: 48px;
+	margin-bottom: 16px;
+	border: 1px solid #e2e4e7;
+
+	.components-toolbar {
+		background: none;
+		// IE11 has thick paddings without this.
+		line-height: 0;
+
+		// These margins make the buttons themselves overlap the chrome of the toolbar.
+		// This helps make them square, and maximize the hit area.
+		margin-top: -$border-width;
+		margin-bottom: -$border-width;
+
+		// The component is born with a border, but we only need some of them.
+		border: 0;
+
+		// Add a border after item groups to show as separator in the block toolbar.
+		border-right: $border-width solid $light-gray-500;
+	}
+}
diff --git a/packages/block-editor/src/components/block-navigation/toolbar.js b/packages/block-editor/src/components/block-navigation/toolbar.js
new file mode 100644
index 00000000000000..35521dc964b74a
--- /dev/null
+++ b/packages/block-editor/src/components/block-navigation/toolbar.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { Button, ToolbarGroup } from '@wordpress/components';
+import { insertAfter, trash } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockActions from '../block-actions';
+import BlockMover from '../block-mover';
+
+export default function BlockNavigationToolbar() {
+	const blockClientIds = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSelectedBlockClientIds()
+	);
+
+	return (
+		<BlockActions clientIds={ blockClientIds }>
+			{ ( { canDuplicate, isLocked, onDuplicate, onRemove } ) => (
+				<div className="block-editor-block-navigation-toolbar">
+					<BlockMover
+						clientIds={ blockClientIds }
+						__experimentalOrientation="vertical"
+						hideDragHandle
+					/>
+					{ ! isLocked && (
+						<ToolbarGroup>
+							{ canDuplicate && (
+								<Button
+									onClick={ onDuplicate }
+									label={ __( 'Duplicate block' ) }
+									icon={ insertAfter }
+								/>
+							) }
+							<Button
+								onClick={ onRemove }
+								label={ __( 'Remove block' ) }
+								icon={ trash }
+							/>
+						</ToolbarGroup>
+					) }
+				</div>
+			) }
+		</BlockActions>
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index ae163f11df919f..f00ef7369d1e5d 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -15,6 +15,7 @@ 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 __experimentalBlockNavigationList } from './block-navigation/list';
+export { default as __experimentalBlockNavigationToolbar } from './block-navigation/toolbar';
 export { default as __experimentalBlockPatterns } from './block-patterns';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
index 147e894bcd95e1..99b218992aa073 100644
--- a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
+++ b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
@@ -1,11 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
+import {
+	__experimentalBlockNavigationToolbar as BlockNavigationToolbar,
+	__experimentalBlockNavigationList as BlockNavigationList,
+} from '@wordpress/block-editor';
 import { Panel, PanelBody } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 export default function NavigationStructurePanel( { blocks, initialOpen } ) {
+	const selectedBlockClientIds = useSelect( ( select ) =>
+		select( 'core/block-editor' ).getSelectedBlockClientIds()
+	);
+
+	const { selectBlock } = useDispatch( 'core/block-editor' );
 	return (
 		<Panel className="edit-navigation-menu-editor__navigation-structure-panel">
 			<PanelBody
@@ -13,13 +22,18 @@ export default function NavigationStructurePanel( { blocks, initialOpen } ) {
 				initialOpen={ initialOpen }
 			>
 				{ !! blocks.length && (
-					<__experimentalBlockNavigationList
-						blocks={ blocks }
-						selectedBlockClientId={ blocks[ 0 ].clientId }
-						selectBlock={ () => {} }
-						showNestedBlocks
-						showAppender
-					/>
+					<>
+						<BlockNavigationToolbar />
+						<BlockNavigationList
+							blocks={ blocks }
+							selectedBlockClientId={
+								selectedBlockClientIds[ 0 ]
+							}
+							selectBlock={ selectBlock }
+							showNestedBlocks
+							showAppender
+						/>
+					</>
 				) }
 			</PanelBody>
 		</Panel>