Navigation: Add a 'open list view' button

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 />
 			</>
 		);
 	},

packages/edit-post/src/plugins/navigation-list-view-menu-item.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+ import {
+	BlockEditorProvider,
+	BlockTools,
+	__unstableBlockToolbarLastItem,
+	__unstableBlockNameContext,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
+import { Fragment } from '@wordpress/element';
+import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
+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>
+	);
+};
+
+// 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 ( isOffCanvasNavigationEditorEnabled ) {
+	MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+}
+
+const NavigationEditMenuItem = () => {
+	return (
+		<BlockEditorProvider>
+			<BlockTools>
+				<__unstableBlockToolbarLastItem>
+					<__unstableBlockNameContext.Consumer>
+						{ ( blockName ) =>
+							blockName === 'core/navigation' && (
+								<MaybeNavMenuSidebarToggle />
+							)
+						}
+					</__unstableBlockNameContext.Consumer>
+				</__unstableBlockToolbarLastItem>
+			</BlockTools>
+			<ReusableBlocksMenuItems />
+		</BlockEditorProvider>
+	);
+};
+
+export default NavigationEditMenuItem;

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,14 +55,11 @@ const LAYOUT = {
 	alignments: [],
 };
 
-const NAVIGATION_SIDEBAR_NAME = 'edit-site/navigation-menu';
-
 export default function BlockEditor( { setIsInserterOpen } ) {
 	const {
 		storedSettings,
 		templateType,
 		page,
-		isNavigationSidebarOpen,
 		canvasMode,
 	} = useSelect(
 		( select ) => {
@@ -78,10 +74,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 +148,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,18 +164,16 @@ 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' )
-				}
-				onClick={ toggleNavigationSidebar }
+				label={ __( 'Open navigation list view' ) }
+				onClick={ () => enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' ) }
 				icon={ listView }
-				isActive={ isNavigationSidebarOpen }
 			/>
 		</ToolbarGroup>
 	);
@@ -199,8 +182,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	// 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;
 	}