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; }