diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js
index 94a5d4c98396c..c0f3c5264596a 100644
--- 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', {
>
) }
+
>
);
},
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
new file mode 100644
index 0000000000000..18bb1bed3760a
--- /dev/null
+++ 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 (
+
+ openGeneralSidebar( 'edit-post/block' ) }
+ icon={ listView }
+ />
+
+ );
+};
+
+let MaybeNavMenuSidebarToggle = Fragment;
+
+const isOffCanvasNavigationEditorEnabled =
+ window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+if ( isOffCanvasNavigationEditorEnabled ) {
+ MaybeNavMenuSidebarToggle = NavMenuSidebarToggle;
+}
+
+const NavigationEditMenuItem = () => {
+ return (
+
+ <__unstableBlockToolbarLastItem>
+ <__unstableBlockNameContext.Consumer>
+ { ( blockName ) =>
+ blockName === 'core/navigation' && (
+
+ )
+ }
+
+
+
+ );
+};
+
+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
index b2978267654e0..4dbebdf1ea8bb 100644
--- 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 = () => (
+ enableComplementaryArea(
+ 'core/edit-site',
+ 'edit-site/block-inspector'
+ )
}
- onClick={ toggleNavigationSidebar }
icon={ listView }
- isActive={ isNavigationSidebarOpen }
/>
);
- // 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;
}