Navigation: Add an edit menu button to the block controls

WordPress · Nov 16, 2022 · b4fc383 · b4fc383
1 parent 4f25464
commit b4fc383
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 55 deletions.
diff --git a/packages/block-library/src/navigation/edit/edit-menu-toolbar-button.js b/packages/block-library/src/navigation/edit/edit-menu-toolbar-button.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { store as interfaceStore } from '@wordpress/interface';
+import { __ } from '@wordpress/i18n';
+
+const EditMenuToolbarButton = () => {
+ 	// Blocks can be loaded into both post and site editors.
+	// We use this to determine which editor we are in so that
+	// we can determine which inspector controls to open.
+	const {
+		isPostEditor,
+	} = useSelect(
+		( select ) => {
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			const editorSelectors = select( 'core/editor' );
+			return {
+				isPostEditor: !! editorSelectors.getEditedPostAttribute( 'type' )
+			};
+		}
+	);
+	const { enableComplementaryArea } = useDispatch( interfaceStore );
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+	const openBlockInspector = () => {
+		if ( isPostEditor ) {
+			openGeneralSidebar( 'edit-post/block' );
+		} else {
+			enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' );
+		}
+	};
+
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	if ( ! isOffCanvasNavigationEditorEnabled ) {
+		return null;
+	}
+
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Open list view' ) }
+					onClick={ openBlockInspector } // TODO - focus the menu part
+				>
+					{ __( 'Edit menu' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+};
+
+export default EditMenuToolbarButton;
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -69,6 +69,7 @@ import useCreateNavigationMenu from './use-create-navigation-menu';
 import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
 import ManageMenusButton from './manage-menus-button';
+import EditMenuToolbarButton from './edit-menu-toolbar-button';
 
 function Navigation( {
 	attributes,
@@ -736,6 +737,7 @@ function Navigation( {
 					</PanelBody>
 				</InspectorControls>
 				{ stylingInspectorControls }
+				<EditMenuToolbarButton />
 				<ResponsiveWrapper
 					id={ clientId }
 					onToggle={ setResponsiveMenuVisibility }
@@ -799,6 +801,7 @@ function Navigation( {
 						) }
 					</PanelBody>
 				</InspectorControls>
+				<EditMenuToolbarButton />
 				<Warning>
 					{ __(
 						'Navigation menu has been deleted or is unavailable. '
@@ -953,6 +956,7 @@ function Navigation( {
 
 				{ ! isLoading && (
 					<TagName { ...blockProps }>
+						<EditMenuToolbarButton />
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -7,27 +7,21 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useMemo, useRef, Fragment } from '@wordpress/element';
+import { useCallback, useMemo, useRef } from '@wordpress/element';
 import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	BlockList,
 	BlockEditorProvider,
 	__experimentalLinkControl,
 	BlockInspector,
 	BlockTools,
-	__unstableBlockToolbarLastItem,
 	__unstableBlockSettingsMenuFirstItem,
 	__unstableUseTypingObserver as useTypingObserver,
 	BlockEditorKeyboardShortcuts,
 	store as blockEditorStore,
-	__unstableBlockNameContext,
 } from '@wordpress/block-editor';
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
-import { listView } from '@wordpress/icons';
-import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -46,15 +40,12 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
 	const {
 		storedSettings,
 		templateType,
 		templateId,
 		page,
-		isNavigationSidebarOpen,
 	} = useSelect(
 		( select ) => {
 			const { getSettings, getEditedPostType, getEditedPostId, getPage } =
@@ -65,10 +56,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				templateType: getEditedPostType(),
 				templateId: getEditedPostId(),
 				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
 			};
 		},
 		[ setIsInserterOpen ]
@@ -141,14 +128,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		templateType
 	);
 	const { setPage } = useDispatch( editSiteStore );
-	const { enableComplementaryArea, disableComplementaryArea } =
-		useDispatch( interfaceStore );
-	const toggleNavigationSidebar = useCallback( () => {
-		const toggleComplementaryArea = isNavigationSidebarOpen
-			? disableComplementaryArea
-			: enableComplementaryArea;
-		toggleComplementaryArea( editSiteStore.name, NAVIGATION_SIDEBAR_NAME );
-	}, [ isNavigationSidebarOpen ] );
 	const contentRef = useRef();
 	const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
@@ -157,30 +136,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const isTemplatePart = templateType === 'wp_template_part';
 	const hasBlocks = blocks.length !== 0;
 
-	const NavMenuSidebarToggle = () => (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
-				}
-				onClick={ toggleNavigationSidebar }
-				icon={ listView }
-				isActive={ isNavigationSidebarOpen }
-			/>
-		</ToolbarGroup>
-	);
-
-	// Conditionally include NavMenu sidebar in Plugin only.
-	// Optimise for dead code elimination.
-	// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
-	let MaybeNavMenuSidebarToggle = Fragment;
-
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
-	}
 
 	return (
 		<BlockEditorProvider
@@ -244,15 +199,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 						<BlockInspectorButton onClick={ onClose } />
 					) }
 				</__unstableBlockSettingsMenuFirstItem>
-				<__unstableBlockToolbarLastItem>
-					<__unstableBlockNameContext.Consumer>
-						{ ( blockName ) =>
-							blockName === 'core/navigation' && (
-								<MaybeNavMenuSidebarToggle />
-							)
-						}
-					</__unstableBlockNameContext.Consumer>
-				</__unstableBlockToolbarLastItem>
 			</BlockTools>
 			<ReusableBlocksMenuItems />
 		</BlockEditorProvider>