From 63cf46877e9978a87d2617e8705a3f7e9214716a Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 6 Dec 2022 16:50:38 +0000 Subject: [PATCH 1/5] Navigation: Add a 'open list view' button --- packages/edit-post/src/plugins/index.js | 2 + .../plugins/navigation-list-view-menu-item.js | 64 +++++++++++++++++++ .../src/components/block-editor/index.js | 33 +++------- 3 files changed, 75 insertions(+), 24 deletions(-) create mode 100644 packages/edit-post/src/plugins/navigation-list-view-menu-item.js diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js index 94a5d4c98396cf..c0f3c5264596a0 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 00000000000000..c48fee5b2755d6 --- /dev/null +++ b/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 ( + + openGeneralSidebar( 'edit-post/block' ) } + icon={ listView } + /> + + ); +}; + +// 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 ( + + + <__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 b2978267654e00..976061678beedc 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,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 = () => ( enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' ) } icon={ listView } - isActive={ isNavigationSidebarOpen } /> ); @@ -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; } From 567023996707e53dc11d318c1036830e0ff7b353 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 7 Dec 2022 10:36:02 +0000 Subject: [PATCH 2/5] Remove invalid comment --- .../edit-site/src/components/block-editor/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 976061678beedc..b2e8f390c44dc8 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -172,15 +172,17 @@ export default function BlockEditor( { setIsInserterOpen } ) { enableComplementaryArea( 'core/edit-site', 'edit-site/block-inspector' ) } + onClick={ () => + enableComplementaryArea( + 'core/edit-site', + 'edit-site/block-inspector' + ) + } icon={ listView } /> ); - // 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; From 914bc42cb24d13a9d018a7a45f475ba33a45360e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 7 Dec 2022 10:35:11 +0000 Subject: [PATCH 3/5] Update packages/edit-post/src/plugins/navigation-list-view-menu-item.js --- .../edit-post/src/plugins/navigation-list-view-menu-item.js | 3 --- 1 file changed, 3 deletions(-) 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 index c48fee5b2755d6..bf3e2c20a51ef9 100644 --- a/packages/edit-post/src/plugins/navigation-list-view-menu-item.js +++ b/packages/edit-post/src/plugins/navigation-list-view-menu-item.js @@ -30,9 +30,6 @@ const NavMenuSidebarToggle = () => { ); }; -// 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 = From e059227321955f20373aeaa629470dd7c38e5960 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 9 Dec 2022 15:12:40 +0000 Subject: [PATCH 4/5] Remove the { return ( - - <__unstableBlockToolbarLastItem> - <__unstableBlockNameContext.Consumer> - { ( blockName ) => - blockName === 'core/navigation' && ( - - ) - } - - - - + <__unstableBlockToolbarLastItem> + <__unstableBlockNameContext.Consumer> + { ( blockName ) => + blockName === 'core/navigation' && ( + + ) + } + + ); }; From 8000335f727abfcd3375657ffbcc460e49641c43 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Sun, 11 Dec 2022 23:38:41 +0000 Subject: [PATCH 5/5] formatting change --- packages/edit-site/src/components/block-editor/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index b2e8f390c44dc8..4dbebdf1ea8bb7 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -56,12 +56,7 @@ const LAYOUT = { }; export default function BlockEditor( { setIsInserterOpen } ) { - const { - storedSettings, - templateType, - page, - canvasMode, - } = useSelect( + const { storedSettings, templateType, page, canvasMode } = useSelect( ( select ) => { const { getSettings,