Navigation: Add a 'open list view' button (#46335)

* Navigation: Add a 'open list view' button * Remove invalid comment * Update packages/edit-post/src/plugins/navigation-list-view-menu-item.js
WordPress · Dec 12, 2022 · 5544df1 · 5544df1
1 parent b333d1d
commit 5544df1
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 32 deletions.
diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
@@ -14,6 +14,7 @@ import CopyContentMenuItem from './copy-content-menu-item';
 import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item';
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import NavigationListViewMenuItem from './navigation-list-view-menu-item';
 
 registerPlugin( 'edit-post', {
 	render() {
@@ -55,6 +56,7 @@ registerPlugin( 'edit-post', {
 						</>
 					) }
 				</ToolsMoreMenuGroup>
+				<NavigationListViewMenuItem />
 			</>
 		);
 	},

diff --git a/packages/edit-post/src/plugins/navigation-list-view-menu-item.js b/packages/edit-post/src/plugins/navigation-list-view-menu-item.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockEditorProvider,
+	__unstableBlockToolbarLastItem,
+	__unstableBlockNameContext,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { listView } from '@wordpress/icons';
+
+const NavMenuSidebarToggle = () => {
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { openGeneralSidebar } = useDispatch( 'core/edit-post' );
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				className="components-toolbar__control"
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () => openGeneralSidebar( 'edit-post/block' ) }
+				icon={ listView }
+			/>
+		</ToolbarGroup>
+	);
+};
+
+let MaybeNavMenuSidebarToggle = Fragment;
+
+const isOffCanvasNavigationEditorEnabled =
+	window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+if ( isOffCanvasNavigationEditorEnabled ) {
+	MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+}
+
+const NavigationEditMenuItem = () => {
+	return (
+		<BlockEditorProvider>
+			<__unstableBlockToolbarLastItem>
+				<__unstableBlockNameContext.Consumer>
+					{ ( blockName ) =>
+						blockName === 'core/navigation' && (
+							<MaybeNavMenuSidebarToggle />
+						)
+					}
+				</__unstableBlockNameContext.Consumer>
+			</__unstableBlockToolbarLastItem>
+		</BlockEditorProvider>
+	);
+};
+
+export default NavigationEditMenuItem;
diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -35,7 +35,6 @@ 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
@@ -56,16 +55,8 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const {
-		storedSettings,
-		templateType,
-		page,
-		isNavigationSidebarOpen,
-		canvasMode,
-	} = useSelect(
+	const { storedSettings, templateType, page, canvasMode } = useSelect(
 		( select ) => {
 			const {
 				getSettings,
@@ -78,10 +69,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				storedSettings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
 				page: getPage(),
-				isNavigationSidebarOpen:
-					select( interfaceStore ).getActiveComplementaryArea(
-						editSiteStore.name
-					) === NAVIGATION_SIDEBAR_NAME,
 				canvasMode: __unstableGetCanvasMode(),
 			};
 		},
@@ -156,14 +143,7 @@ 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', '<' );
@@ -179,28 +159,30 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		! isMobileViewport;
 	const isViewMode = canvasMode === 'view';
 
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { enableComplementaryArea } = useDispatch( 'core/interface' );
+
 	const NavMenuSidebarToggle = () => (
 		<ToolbarGroup>
 			<ToolbarButton
 				className="components-toolbar__control"
-				label={
-					isNavigationSidebarOpen
-						? __( 'Close list view' )
-						: __( 'Open list view' )
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () =>
+					enableComplementaryArea(
+						'core/edit-site',
+						'edit-site/block-inspector'
+					)
 				}
-				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;
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( isOffCanvasNavigationEditorEnabled ) {
 		MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
 	}