Try fixed toolbar in navigation page

WordPress · Apr 3, 2020 · d674147 · d674147
1 parent df20f02
commit d674147
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -5,12 +5,14 @@ import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
 	BlockList,
+	BlockToolbar,
+	NavigableToolbar,
 	ObserveTyping,
 	WritingFlow,
 	__experimentalBlockNavigationList,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
+import { Button, Panel, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -31,10 +33,11 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 				settings={ {
 					...blockEditorSettings,
 					templateLock: 'all',
+					hasFixedToolbar: true,
 				} }
 			>
 				<BlockEditorKeyboardShortcuts />
-				<Panel className="edit-navigation-menu-editor__panel">
+				<Panel>
 					<PanelBody title={ __( 'Navigation structure' ) }>
 						{ !! blocks.length && (
 							<__experimentalBlockNavigationList
@@ -53,10 +56,14 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 							{ __( 'Save navigation' ) }
 						</Button>
 					}
-					className="edit-navigation-menu-editor__panel"
 				>
 					<PanelBody title={ __( 'Navigation menu' ) }>
-						<Popover.Slot name="block-toolbar" />
+						<NavigableToolbar
+							className="edit-navigation-menu-editor__toolbar"
+							aria-label={ __( 'Block tools' ) }
+						>
+							<BlockToolbar hideDragHandle />
+						</NavigableToolbar>
 						<WritingFlow>
 							<ObserveTyping>
 								<BlockList />

diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -2,4 +2,23 @@
 	display: grid;
 	grid-template-columns: 280px 1fr;
 	grid-column-gap: 10px;
+
+	// Make the block list take up the full width of the panel.
+	.block-editor-block-list__layout.is-root-container {
+		padding: 0;
+	}
+}
+
+.edit-navigation-menu-editor__toolbar {
+	height: 46px;
+	margin-bottom: 16px;
+	border: 1px solid #e2e4e7;
+
+	// Buttons in a fixed top toolbar seem to need their styles overriden.
+	.components-button {
+		height: 48px;
+		min-width: 42px;
+		padding-left: 11px;
+		padding-right: 6px;
+	}
 }