From ed22dae3c169ef27d3583a23f59825cebe099285 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 17 Mar 2022 16:05:18 +0000 Subject: [PATCH 01/19] Navigation: try adding dedicated sidebar for managing layout of navigation menus --- .../block-toolbar/block-name-context.js | 8 ++ .../block-toolbar/block-toolbar-last-item.js | 12 ++ .../src/components/block-toolbar/index.js | 7 + packages/block-editor/src/components/index.js | 2 + .../src/navigation/edit/index.js | 7 - .../navigation/edit/use-list-view-modal.js | 72 ---------- .../site-editor/style-variations.test.js | 2 +- .../src/components/block-editor/index.js | 29 ++++ .../edit-site/src/components/sidebar/index.js | 2 + .../sidebar/navigation-menu-sidebar/index.js | 34 +++++ .../navigation-inspector.js | 128 ++++++++++++++++++ .../navigation-menu.js | 61 +++++++++ .../navigation-menu-sidebar/style.scss | 28 ++++ packages/edit-site/src/style.scss | 1 + 14 files changed, 313 insertions(+), 80 deletions(-) create mode 100644 packages/block-editor/src/components/block-toolbar/block-name-context.js create mode 100644 packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js delete mode 100644 packages/block-library/src/navigation/edit/use-list-view-modal.js create mode 100644 packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js create mode 100644 packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js create mode 100644 packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js create mode 100644 packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss diff --git a/packages/block-editor/src/components/block-toolbar/block-name-context.js b/packages/block-editor/src/components/block-toolbar/block-name-context.js new file mode 100644 index 00000000000000..4537f6f861559d --- /dev/null +++ b/packages/block-editor/src/components/block-toolbar/block-name-context.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { createContext } from '@wordpress/element'; + +const __unstableBlockNameContext = createContext( '' ); + +export default __unstableBlockNameContext; diff --git a/packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js b/packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js new file mode 100644 index 00000000000000..e8a81049108a0d --- /dev/null +++ b/packages/block-editor/src/components/block-toolbar/block-toolbar-last-item.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: __unstableBlockToolbarLastItem, Slot } = createSlotFill( + '__unstableBlockToolbarLastItem' +); + +__unstableBlockToolbarLastItem.Slot = Slot; + +export default __unstableBlockToolbarLastItem; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 7a2a078541a0de..58f6b8fd51b954 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -19,11 +19,13 @@ import BlockMover from '../block-mover'; import BlockParentSelector from '../block-parent-selector'; import BlockSwitcher from '../block-switcher'; import BlockControls from '../block-controls'; +import __unstableBlockToolbarLastItem from './block-toolbar-last-item'; import BlockSettingsMenu from '../block-settings-menu'; import { BlockLockToolbar } from '../block-lock'; import { BlockGroupToolbar } from '../convert-to-group-buttons'; import { useShowMoversGestures } from './utils'; import { store as blockEditorStore } from '../../store'; +import __unstableBlockNameContext from './block-name-context'; export default function BlockToolbar( { hideDragHandle } ) { const { @@ -150,6 +152,11 @@ export default function BlockToolbar( { hideDragHandle } ) { group="other" className="block-editor-block-toolbar__slot" /> + <__unstableBlockNameContext.Provider + value={ blockType?.name } + > + <__unstableBlockToolbarLastItem.Slot /> + ) } diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index a3a9b9f061edf2..8e6395f5b5d70a 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -99,6 +99,8 @@ export { default as withColorContext } from './color-palette/with-color-context' */ export { default as __unstableBlockSettingsMenuFirstItem } from './block-settings-menu/block-settings-menu-first-item'; +export { default as __unstableBlockToolbarLastItem } from './block-toolbar/block-toolbar-last-item'; +export { default as __unstableBlockNameContext } from './block-toolbar/block-name-context'; export { default as __unstableInserterMenuExtension } from './inserter-menu-extension'; export { default as __experimentalPreviewOptions } from './preview-options'; export { default as __experimentalUseResizeCanvas } from './use-resize-canvas'; diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 0c60ff4993aa56..e956a6444a6f20 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -44,7 +44,6 @@ import { speak } from '@wordpress/a11y'; /** * Internal dependencies */ -import useListViewModal from './use-list-view-modal'; import useNavigationMenu from '../use-navigation-menu'; import useNavigationEntities from '../use-navigation-entities'; import Placeholder from './placeholder'; @@ -283,10 +282,6 @@ function Navigation( { const navRef = useRef(); const isDraftNavigationMenu = navigationMenu?.status === 'draft'; - const { listViewToolbarButton, listViewModal } = useListViewModal( - clientId - ); - const { convert, status: classicMenuConversionStatus, @@ -646,9 +641,7 @@ function Navigation( { /> ) } - { listViewToolbarButton } - { listViewModal } { hasSubmenuIndicatorSetting && ( diff --git a/packages/block-library/src/navigation/edit/use-list-view-modal.js b/packages/block-library/src/navigation/edit/use-list-view-modal.js deleted file mode 100644 index 51b09e52875e77..00000000000000 --- a/packages/block-library/src/navigation/edit/use-list-view-modal.js +++ /dev/null @@ -1,72 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalListView as ListView, - store as blockEditorStore, -} from '@wordpress/block-editor'; -import { ToolbarButton, Modal } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { useRef, useEffect, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; -import { listView } from '@wordpress/icons'; - -function NavigationBlockListView( { clientId, __experimentalFeatures } ) { - const blocks = useSelect( - ( select ) => - select( blockEditorStore ).__unstableGetClientIdsTree( clientId ), - [ clientId ] - ); - - const listViewRef = useRef(); - const [ minHeight, setMinHeight ] = useState( 300 ); - useEffect( () => { - setMinHeight( listViewRef?.current?.clientHeight ?? 300 ); - }, [] ); - - return ( -
- -
- ); -} - -export default function useListViewModal( clientId, __experimentalFeatures ) { - const [ isModalOpen, setIsModalOpen ] = useState( false ); - - const listViewToolbarButton = ( - setIsModalOpen( true ) } - icon={ listView } - /> - ); - - const listViewModal = isModalOpen && ( - { - setIsModalOpen( false ); - } } - shouldCloseOnClickOutside={ false } - > - - - ); - - return { - listViewToolbarButton, - listViewModal, - }; -} diff --git a/packages/e2e-tests/specs/site-editor/style-variations.test.js b/packages/e2e-tests/specs/site-editor/style-variations.test.js index c32939d283fdef..16f50fdf9154c5 100644 --- a/packages/e2e-tests/specs/site-editor/style-variations.test.js +++ b/packages/e2e-tests/specs/site-editor/style-variations.test.js @@ -73,7 +73,7 @@ async function getCustomFontSizeValue() { async function getColorValue( colorType ) { return page.evaluate( ( _colorType ) => { return document.evaluate( - `substring-before(substring-after(//div[@aria-label="Settings"]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`, + `substring-before(substring-after(//div[contains(@class, "edit-site-global-styles-sidebar__panel")]//button[.//*[text()="${ _colorType }"]]//*[contains(@class,"component-color-indicator")]/@style, "background: "), ";")`, document, null, XPathResult.ANY_TYPE, diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index de18566e66fff4..5dcbaf9cd46f7c 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -15,13 +15,19 @@ import { __experimentalLinkControl, BlockInspector, BlockTools, + __unstableBlockToolbarLastItem, __unstableBlockSettingsMenuFirstItem, __unstableUseTypingObserver as useTypingObserver, BlockEditorKeyboardShortcuts, store as blockEditorStore, + __unstableBlockNameContext, } from '@wordpress/block-editor'; import { useMergeRefs, useViewportMatch } from '@wordpress/compose'; 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 @@ -65,6 +71,13 @@ export default function BlockEditor( { setIsInserterOpen } ) { templateType ); const { setPage } = useDispatch( editSiteStore ); + const { enableComplementaryArea } = useDispatch( interfaceStore ); + const openNavigationSidebar = useCallback( () => { + enableComplementaryArea( + 'core/edit-site', + 'edit-site/navigation-menu' + ); + }, [ enableComplementaryArea ] ); const contentRef = useRef(); const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] ); const isMobileViewport = useViewportMatch( 'small', '<' ); @@ -133,6 +146,22 @@ export default function BlockEditor( { setIsInserterOpen } ) { ) } + <__unstableBlockToolbarLastItem> + <__unstableBlockNameContext.Consumer> + { ( blockName ) => + blockName === 'core/navigation' && ( + + + + ) + } + + diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index aa5eaacc28ab44..3788a3aece74bc 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -14,6 +14,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; */ import DefaultSidebar from './default-sidebar'; import GlobalStylesSidebar from './global-styles-sidebar'; +import NavigationMenuSidebar from './navigation-menu-sidebar'; import { STORE_NAME } from '../../store/constants'; import SettingsHeader from './settings-header'; import TemplateCard from './template-card'; @@ -77,6 +78,7 @@ export function SidebarComplementaryAreaFills() { ) } + ); } diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js new file mode 100644 index 00000000000000..4627bd73050ab9 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { FlexBlock, Flex } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { navigation } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from '../default-sidebar'; +import NavigationInspector from './navigation-inspector'; + +export default function NavigationMenuSidebar() { + return ( + + + { __( 'Navigation' ) } + + + } + > + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js new file mode 100644 index 00000000000000..e05f9222c69130 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -0,0 +1,128 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { useState, useEffect } from '@wordpress/element'; +import { SelectControl } from '@wordpress/components'; +import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data'; +import { + store as blockEditorStore, + BlockEditorProvider, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import NavigationMenu from './navigation-menu'; + +const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ]; + +export default function NavigationInspector() { + const { + selectedNavigationId, + clientIdToRef, + navigationMenus, + hasResolvedNavigationMenus, + firstNavigationId, + } = useSelect( ( select ) => { + const { + __experimentalGetActiveBlockIdByBlockNames, + __experimentalGetGlobalBlocksByName, + getBlock, + } = select( blockEditorStore ); + + const { getNavigationMenus, hasFinishedResolution } = select( + coreStore + ); + const selectedNavId = __experimentalGetActiveBlockIdByBlockNames( + 'core/navigation' + ); + const navIds = __experimentalGetGlobalBlocksByName( 'core/navigation' ); + const idToRef = {}; + navIds.forEach( ( id ) => { + idToRef[ id ] = getBlock( id )?.attributes?.ref; + } ); + return { + selectedNavigationId: selectedNavId, + firstNavigationId: navIds?.[ 0 ], + clientIdToRef: idToRef, + navigationMenus: getNavigationMenus( NAVIGATION_MENUS_QUERY[ 0 ] ), + hasResolvedNavigationMenus: hasFinishedResolution( + 'getNavigationMenus', + NAVIGATION_MENUS_QUERY + ), + }; + }, [] ); + + const firstNavRefInTemplate = clientIdToRef[ firstNavigationId ]; + const firstNavRef = navigationMenus?.[ 0 ]?.id; + const defaultValue = firstNavRefInTemplate || firstNavRef; + + const [ menu, setCurrentMenu ] = useState( firstNavRefInTemplate ); + + useEffect( () => { + if ( selectedNavigationId ) { + setCurrentMenu( clientIdToRef[ selectedNavigationId ] ); + } + }, [ selectedNavigationId ] ); + + let options = []; + if ( navigationMenus ) { + options = navigationMenus.map( ( { id, title } ) => ( { + value: id, + label: title.rendered, + } ) ); + } + + const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor( + 'postType', + 'wp_navigation', + { id: menu || defaultValue } + ); + + const { hasLoadedInnerBlocks } = useSelect( + ( select ) => { + const { hasFinishedResolution } = select( coreStore ); + return { + hasLoadedInnerBlocks: hasFinishedResolution( + 'getEntityRecord', + [ 'postType', 'wp_navigation', menu || defaultValue ] + ), + }; + }, + [ menu, defaultValue ] + ); + + const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); + + return ( +
+ { ! hasResolvedNavigationMenus && ( +
+ ) } + { hasResolvedNavigationMenus && ( + + ) } + { isLoading && ( + <> +
+
+
+ + ) } + { ! isLoading && ( + + + + ) } +
+ ); +} diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js new file mode 100644 index 00000000000000..462c4714f2da72 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +import { + __experimentalListView as ListView, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { useEffect } from '@wordpress/element'; +import { useDispatch } from '@wordpress/data'; + +const ALLOWED_BLOCKS = { + 'core/navigation': [ + 'core/navigation-link', + 'core/search', + 'core/social-links', + 'core/page-list', + 'core/spacer', + 'core/home-link', + 'core/site-title', + 'core/site-logo', + 'core/navigation-submenu', + ], + 'core/social-links': [ 'core/social-link' ], + 'core/navigation-submenu': [ + 'core/navigation-link', + 'core/navigation-submenu', + ], + 'core/navigation-link': [ + 'core/navigation-link', + 'core/navigation-submenu', + ], +}; + +export default function NavigationMenu( { innerBlocks } ) { + const { updateBlockListSettings } = useDispatch( blockEditorStore ); + + //TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList + //Think through a better way of doing this, possible with adding allowed blocks to block library metadata + useEffect( () => { + updateBlockListSettings( '', { + allowedBlocks: ALLOWED_BLOCKS[ 'core/navigation' ], + } ); + innerBlocks.forEach( ( block ) => { + if ( ALLOWED_BLOCKS[ block.name ] ) { + updateBlockListSettings( block.clientId, { + allowedBlocks: ALLOWED_BLOCKS[ block.name ], + } ); + } + } ); + }, [ updateBlockListSettings, innerBlocks ] ); + return ( + <> + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss new file mode 100644 index 00000000000000..0e227e4f4ca799 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss @@ -0,0 +1,28 @@ +@keyframes loadingpulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} + +.edit-site-navigation-inspector { + padding: $grid-unit-20; +} + +.edit-site-navigation-inspector__placeholder { + padding: $grid-unit-10; + margin: $grid-unit-10; + background-color: $gray-100; + animation: loadingpulse 1s linear infinite; + animation-delay: 0.5s; // avoid animating for fast network responses +} + +.edit-site-navigation-inspector__placeholder.is-child { + margin-left: $grid-unit-30; + width: 50%; +} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 883ce1c0642159..b61d06574c7aa0 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -11,6 +11,7 @@ @import "./components/add-new-template/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; +@import "./components/sidebar/navigation-menu-sidebar/style.scss"; @import "./components/sidebar/template-card/style.scss"; @import "./components/editor/style.scss"; @import "./components/template-details/style.scss"; From acf8a274150450fd2067b7859ee34d1f20d29f74 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 10 Mar 2022 11:42:49 +0000 Subject: [PATCH 02/19] Fix table width to avoid overflow --- .../components/sidebar/navigation-menu-sidebar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss index 0e227e4f4ca799..4348663367b29f 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss @@ -26,3 +26,8 @@ margin-left: $grid-unit-30; width: 50%; } + +.edit-site-navigation-inspector .block-editor-list-view-tree { + // do not allow width to expand beyond containing element width. + table-layout: fixed; +} From 8636579e086da6e06de8466aa2b9caeeaa9d5058 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 14 Mar 2022 14:17:48 +0000 Subject: [PATCH 03/19] Iterate on var naming and code comments --- .../navigation-inspector.js | 51 ++++++++++++------- 1 file changed, 34 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index e05f9222c69130..ede1785602bd5c 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -19,11 +19,11 @@ const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ]; export default function NavigationInspector() { const { - selectedNavigationId, + selectedNavigationBlockId, clientIdToRef, navigationMenus, hasResolvedNavigationMenus, - firstNavigationId, + firstNavigationBlockId, } = useSelect( ( select ) => { const { __experimentalGetActiveBlockIdByBlockNames, @@ -34,17 +34,23 @@ export default function NavigationInspector() { const { getNavigationMenus, hasFinishedResolution } = select( coreStore ); + + // Get the active Navigation block (if present). const selectedNavId = __experimentalGetActiveBlockIdByBlockNames( 'core/navigation' ); - const navIds = __experimentalGetGlobalBlocksByName( 'core/navigation' ); + + // Get all Navigation blocks currently within the editor canvas. + const navBlockIds = __experimentalGetGlobalBlocksByName( + 'core/navigation' + ); const idToRef = {}; - navIds.forEach( ( id ) => { + navBlockIds.forEach( ( id ) => { idToRef[ id ] = getBlock( id )?.attributes?.ref; } ); return { - selectedNavigationId: selectedNavId, - firstNavigationId: navIds?.[ 0 ], + selectedNavigationBlockId: selectedNavId, + firstNavigationBlockId: navBlockIds?.[ 0 ], clientIdToRef: idToRef, navigationMenus: getNavigationMenus( NAVIGATION_MENUS_QUERY[ 0 ] ), hasResolvedNavigationMenus: hasFinishedResolution( @@ -54,17 +60,24 @@ export default function NavigationInspector() { }; }, [] ); - const firstNavRefInTemplate = clientIdToRef[ firstNavigationId ]; - const firstNavRef = navigationMenus?.[ 0 ]?.id; - const defaultValue = firstNavRefInTemplate || firstNavRef; + const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ]; + const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id; + + // Default Navigation Menu `ref` is either: + // - the Navigation Menu referenced by the first Nav block within the template. + // - the first of the available Navigation Menus (`wp_navigation`) posts. + const defaultNavigationMenu = + firstNavRefInTemplate || firstNavigationMenuRef; const [ menu, setCurrentMenu ] = useState( firstNavRefInTemplate ); + // If a Nav block is selected within the canvas then set it to be + // active within the Navigation sidebar. useEffect( () => { - if ( selectedNavigationId ) { - setCurrentMenu( clientIdToRef[ selectedNavigationId ] ); + if ( selectedNavigationBlockId ) { + setCurrentMenu( clientIdToRef[ selectedNavigationBlockId ] ); } - }, [ selectedNavigationId ] ); + }, [ selectedNavigationBlockId ] ); let options = []; if ( navigationMenus ) { @@ -77,7 +90,7 @@ export default function NavigationInspector() { const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'wp_navigation', - { id: menu || defaultValue } + { id: menu || defaultNavigationMenu } ); const { hasLoadedInnerBlocks } = useSelect( @@ -86,11 +99,15 @@ export default function NavigationInspector() { return { hasLoadedInnerBlocks: hasFinishedResolution( 'getEntityRecord', - [ 'postType', 'wp_navigation', menu || defaultValue ] + [ + 'postType', + 'wp_navigation', + menu || defaultNavigationMenu, + ] ), }; }, - [ menu, defaultValue ] + [ menu, defaultNavigationMenu ] ); const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); @@ -102,9 +119,9 @@ export default function NavigationInspector() { ) } { hasResolvedNavigationMenus && ( setCurrentMenu( Number( val ) ) } /> ) } { isLoading && ( From 9d86b1c4d02137da3cf3be047b0ec1450c0ae14d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 14 Mar 2022 14:31:49 +0000 Subject: [PATCH 04/19] Further naming refinement --- .../navigation-inspector.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index ede1785602bd5c..52390af0af8444 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -63,12 +63,13 @@ export default function NavigationInspector() { const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ]; const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id; - // Default Navigation Menu `ref` is either: + // Default Navigation Menu is either: // - the Navigation Menu referenced by the first Nav block within the template. // - the first of the available Navigation Menus (`wp_navigation`) posts. - const defaultNavigationMenu = + const defaultNavigationMenuId = firstNavRefInTemplate || firstNavigationMenuRef; + // The Navigation Menu manually selected by the user within the Nav inspector. const [ menu, setCurrentMenu ] = useState( firstNavRefInTemplate ); // If a Nav block is selected within the canvas then set it to be @@ -90,7 +91,7 @@ export default function NavigationInspector() { const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'wp_navigation', - { id: menu || defaultNavigationMenu } + { id: menu || defaultNavigationMenuId } ); const { hasLoadedInnerBlocks } = useSelect( @@ -102,12 +103,12 @@ export default function NavigationInspector() { [ 'postType', 'wp_navigation', - menu || defaultNavigationMenu, + menu || defaultNavigationMenuId, ] ), }; }, - [ menu, defaultNavigationMenu ] + [ menu, defaultNavigationMenuId ] ); const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); @@ -119,9 +120,11 @@ export default function NavigationInspector() { ) } { hasResolvedNavigationMenus && ( setCurrentMenu( Number( val ) ) } + onChange={ ( newMenuId ) => + setCurrentMenu( Number( newMenuId ) ) + } /> ) } { isLoading && ( From cf580557feba56bdb1a983142337b23560044914 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 14 Mar 2022 14:44:47 +0000 Subject: [PATCH 05/19] More var renaming --- .../navigation-inspector.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index 52390af0af8444..d547198cdc2c10 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -70,13 +70,16 @@ export default function NavigationInspector() { firstNavRefInTemplate || firstNavigationMenuRef; // The Navigation Menu manually selected by the user within the Nav inspector. - const [ menu, setCurrentMenu ] = useState( firstNavRefInTemplate ); + const [ currentMenuId, setCurrentMenuId ] = useState( + firstNavRefInTemplate + ); - // If a Nav block is selected within the canvas then set it to be + // If a Nav block is selected within the canvas then set the + // Navigation Menu referenced by it's `ref` attribute to be // active within the Navigation sidebar. useEffect( () => { if ( selectedNavigationBlockId ) { - setCurrentMenu( clientIdToRef[ selectedNavigationBlockId ] ); + setCurrentMenuId( clientIdToRef[ selectedNavigationBlockId ] ); } }, [ selectedNavigationBlockId ] ); @@ -91,7 +94,7 @@ export default function NavigationInspector() { const [ innerBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', 'wp_navigation', - { id: menu || defaultNavigationMenuId } + { id: currentMenuId || defaultNavigationMenuId } ); const { hasLoadedInnerBlocks } = useSelect( @@ -103,12 +106,12 @@ export default function NavigationInspector() { [ 'postType', 'wp_navigation', - menu || defaultNavigationMenuId, + currentMenuId || defaultNavigationMenuId, ] ), }; }, - [ menu, defaultNavigationMenuId ] + [ currentMenuId, defaultNavigationMenuId ] ); const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); @@ -120,10 +123,10 @@ export default function NavigationInspector() { ) } { hasResolvedNavigationMenus && ( - setCurrentMenu( Number( newMenuId ) ) + setCurrentMenuId( Number( newMenuId ) ) } /> ) } From bcf4e9120fe470aa2810332023c7dd3739341c76 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 15 Mar 2022 09:33:43 +0000 Subject: [PATCH 06/19] Rename panel title for clarity --- .../src/components/sidebar/navigation-menu-sidebar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js index 4627bd73050ab9..1681cf4714852d 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/index.js @@ -16,14 +16,14 @@ export default function NavigationMenuSidebar() { - { __( 'Navigation' ) } + { __( 'Navigation Menus' ) } } From 6b9171a6d74d03ed0564a1e7823cc9d1b18fd98e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 17 Mar 2022 16:05:56 +0000 Subject: [PATCH 07/19] Improve a11y of component --- .../navigation-inspector.js | 58 +++++++++++++++++-- .../navigation-menu.js | 3 +- 2 files changed, 54 insertions(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index d547198cdc2c10..eb3b3fa24c84b1 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -9,6 +9,8 @@ import { store as blockEditorStore, BlockEditorProvider, } from '@wordpress/block-editor'; +import { speak } from '@wordpress/a11y'; +import { useInstanceId } from '@wordpress/compose'; /** * Internal dependencies @@ -22,6 +24,7 @@ export default function NavigationInspector() { selectedNavigationBlockId, clientIdToRef, navigationMenus, + isResolvingNavigationMenus, hasResolvedNavigationMenus, firstNavigationBlockId, } = useSelect( ( select ) => { @@ -31,9 +34,11 @@ export default function NavigationInspector() { getBlock, } = select( blockEditorStore ); - const { getNavigationMenus, hasFinishedResolution } = select( - coreStore - ); + const { + getNavigationMenus, + hasFinishedResolution, + isResolving, + } = select( coreStore ); // Get the active Navigation block (if present). const selectedNavId = __experimentalGetActiveBlockIdByBlockNames( @@ -53,6 +58,10 @@ export default function NavigationInspector() { firstNavigationBlockId: navBlockIds?.[ 0 ], clientIdToRef: idToRef, navigationMenus: getNavigationMenus( NAVIGATION_MENUS_QUERY[ 0 ] ), + isResolvingNavigationMenus: isResolving( + 'getNavigationMenus', + NAVIGATION_MENUS_QUERY + ), hasResolvedNavigationMenus: hasFinishedResolution( 'getNavigationMenus', NAVIGATION_MENUS_QUERY @@ -60,6 +69,11 @@ export default function NavigationInspector() { }; }, [] ); + const navMenuListId = useInstanceId( + NavigationMenu, + 'edit-site-navigation-inspector-menu' + ); + const firstNavRefInTemplate = clientIdToRef[ firstNavigationBlockId ]; const firstNavigationMenuRef = navigationMenus?.[ 0 ]?.id; @@ -97,10 +111,15 @@ export default function NavigationInspector() { { id: currentMenuId || defaultNavigationMenuId } ); - const { hasLoadedInnerBlocks } = useSelect( + const { isLoadingInnerBlocks, hasLoadedInnerBlocks } = useSelect( ( select ) => { - const { hasFinishedResolution } = select( coreStore ); + const { isResolving, hasFinishedResolution } = select( coreStore ); return { + isLoadingInnerBlocks: isResolving( 'getEntityRecord', [ + 'postType', + 'wp_navigation', + currentMenuId || defaultNavigationMenuId, + ] ), hasLoadedInnerBlocks: hasFinishedResolution( 'getEntityRecord', [ @@ -116,6 +135,26 @@ export default function NavigationInspector() { const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); + useEffect( () => { + if ( isResolvingNavigationMenus ) { + speak( 'Loading Navigation sidebar menus.' ); + } + + if ( hasResolvedNavigationMenus ) { + speak( 'Navigation sidebar menus have loaded.' ); + } + }, [ isResolvingNavigationMenus, hasResolvedNavigationMenus ] ); + + useEffect( () => { + if ( isLoadingInnerBlocks ) { + speak( 'Loading Navigation sidebar selected menu items.' ); + } + + if ( hasLoadedInnerBlocks ) { + speak( 'Navigation sidebar selected menu items have loaded.' ); + } + }, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] ); + return (
{ ! hasResolvedNavigationMenus && ( @@ -123,6 +162,10 @@ export default function NavigationInspector() { ) } { hasResolvedNavigationMenus && ( @@ -143,7 +186,10 @@ export default function NavigationInspector() { onChange={ onChange } onInput={ onInput } > - + ) }
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js index 462c4714f2da72..cc20cc02bb271d 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js @@ -31,7 +31,7 @@ const ALLOWED_BLOCKS = { ], }; -export default function NavigationMenu( { innerBlocks } ) { +export default function NavigationMenu( { innerBlocks, id } ) { const { updateBlockListSettings } = useDispatch( blockEditorStore ); //TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList @@ -51,6 +51,7 @@ export default function NavigationMenu( { innerBlocks } ) { return ( <> Date: Tue, 15 Mar 2022 11:01:11 +0000 Subject: [PATCH 08/19] Revert addition of fixed table layout. Introduces too many visual bugs --- .../components/sidebar/navigation-menu-sidebar/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss index 4348663367b29f..0e227e4f4ca799 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss @@ -26,8 +26,3 @@ margin-left: $grid-unit-30; width: 50%; } - -.edit-site-navigation-inspector .block-editor-list-view-tree { - // do not allow width to expand beyond containing element width. - table-layout: fixed; -} From 4050b49b155b655d1abde7f4027acf0deec02c76 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 24 Mar 2022 12:57:58 +0000 Subject: [PATCH 09/19] Wrap items to avoid off screen movers where possible --- .../navigation-menu-sidebar/style.scss | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss index 0e227e4f4ca799..2bcae5f23b106b 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss @@ -10,19 +10,30 @@ } } + .edit-site-navigation-inspector { padding: $grid-unit-20; + + .block-editor-list-view-leaf .block-editor-list-view-block-contents { + align-items: flex-start; + white-space: normal; + } + + .block-editor-list-view-block__title { + margin-top: 3px; + } } + .edit-site-navigation-inspector__placeholder { padding: $grid-unit-10; margin: $grid-unit-10; background-color: $gray-100; animation: loadingpulse 1s linear infinite; animation-delay: 0.5s; // avoid animating for fast network responses -} -.edit-site-navigation-inspector__placeholder.is-child { - margin-left: $grid-unit-30; - width: 50%; + &.is-child { + margin-left: $grid-unit-30; + width: 50%; + } } From d57531be29d67201fadde0363af84649a4068903 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 15 Mar 2022 14:33:26 +0000 Subject: [PATCH 10/19] Move additional padding --- .../components/sidebar/navigation-menu-sidebar/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss index 2bcae5f23b106b..c13319b27e0710 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss @@ -22,6 +22,11 @@ .block-editor-list-view-block__title { margin-top: 3px; } + + .block-editor-list-view-block__menu-cell { + padding-right: 0; + } + } From f4c4aad054291a4f7df431c73a31000e8c3ba999 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 17 Mar 2022 16:06:24 +0000 Subject: [PATCH 11/19] Revert id on ListView This is now handled in https://github.com/WordPress/gutenberg/pull/39494 --- .../sidebar/navigation-menu-sidebar/navigation-menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js index cc20cc02bb271d..09d2ca067f7d4e 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js @@ -51,7 +51,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { return ( <> Date: Thu, 17 Mar 2022 16:06:42 +0000 Subject: [PATCH 12/19] Use standard getEntityRecords and remove custom entity selector Now moved to https://github.com/WordPress/gutenberg/pull/39498 --- .../navigation-inspector.js | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index eb3b3fa24c84b1..ace85bab462eda 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -34,11 +34,15 @@ export default function NavigationInspector() { getBlock, } = select( blockEditorStore ); - const { - getNavigationMenus, - hasFinishedResolution, - isResolving, - } = select( coreStore ); + const { getEntityRecords, hasFinishedResolution, isResolving } = select( + coreStore + ); + + const navigationMenusQuery = [ + 'postType', + 'wp_navigation', + NAVIGATION_MENUS_QUERY[ 0 ], + ]; // Get the active Navigation block (if present). const selectedNavId = __experimentalGetActiveBlockIdByBlockNames( @@ -57,14 +61,14 @@ export default function NavigationInspector() { selectedNavigationBlockId: selectedNavId, firstNavigationBlockId: navBlockIds?.[ 0 ], clientIdToRef: idToRef, - navigationMenus: getNavigationMenus( NAVIGATION_MENUS_QUERY[ 0 ] ), + navigationMenus: getEntityRecords( ...navigationMenusQuery ), isResolvingNavigationMenus: isResolving( - 'getNavigationMenus', - NAVIGATION_MENUS_QUERY + 'getEntityRecords', + navigationMenusQuery ), hasResolvedNavigationMenus: hasFinishedResolution( - 'getNavigationMenus', - NAVIGATION_MENUS_QUERY + 'getEntityRecords', + navigationMenusQuery ), }; }, [] ); From f84d09adef66339592c1da5ed42994724a60dd92 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 16 Mar 2022 12:45:21 +0000 Subject: [PATCH 13/19] Add handling for no data or limited data --- .../navigation-inspector.js | 18 +++++++++++++++++- .../sidebar/navigation-menu-sidebar/style.scss | 2 -- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index ace85bab462eda..1a340cbb046083 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -11,6 +11,7 @@ import { } from '@wordpress/block-editor'; import { speak } from '@wordpress/a11y'; import { useInstanceId } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -139,6 +140,8 @@ export default function NavigationInspector() { const isLoading = ! ( hasResolvedNavigationMenus && hasLoadedInnerBlocks ); + const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1; + useEffect( () => { if ( isResolvingNavigationMenus ) { speak( 'Loading Navigation sidebar menus.' ); @@ -159,12 +162,25 @@ export default function NavigationInspector() { } }, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] ); + const hasNavigationMenus = + hasResolvedNavigationMenus && navigationMenus?.length; + + if ( ! hasNavigationMenus ) { + return ( +
+

+ { __( 'There are no Navigation Menus.' ) } +

+
+ ); + } + return (
{ ! hasResolvedNavigationMenus && (
) } - { hasResolvedNavigationMenus && ( + { hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && ( Date: Mon, 21 Mar 2022 11:28:15 +0000 Subject: [PATCH 14/19] Collapse all Nav nodes by default --- .../sidebar/navigation-menu-sidebar/navigation-menu.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js index 09d2ca067f7d4e..f5601447dd318b 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-menu.js @@ -54,6 +54,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { id={ id } showNestedBlocks showBlockMovers + expandNested={ false } __experimentalFeatures __experimentalPersistentListViewFeatures /> From fa27d0a68b9f15499820635910d9e1a96b674c1c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 21 Mar 2022 11:34:44 +0000 Subject: [PATCH 15/19] Only show empty message when there are no menus --- .../navigation-inspector.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index 1a340cbb046083..989b82856e3c55 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -142,6 +142,8 @@ export default function NavigationInspector() { const hasMoreThanOneNavigationMenu = navigationMenus?.length > 1; + const hasNavigationMenus = !! navigationMenus?.length; + useEffect( () => { if ( isResolvingNavigationMenus ) { speak( 'Loading Navigation sidebar menus.' ); @@ -162,21 +164,14 @@ export default function NavigationInspector() { } }, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] ); - const hasNavigationMenus = - hasResolvedNavigationMenus && navigationMenus?.length; - - if ( ! hasNavigationMenus ) { - return ( -
+ return ( +
+ { hasResolvedNavigationMenus && ! hasNavigationMenus && (

{ __( 'There are no Navigation Menus.' ) }

-
- ); - } + ) } - return ( -
{ ! hasResolvedNavigationMenus && (
) } From 7efa14f27eb57214fee0d40051e73a1e3bb4ec71 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 21 Mar 2022 11:41:31 +0000 Subject: [PATCH 16/19] Guard against editing unpublished Menus --- .../navigation-menu-sidebar/navigation-inspector.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index 989b82856e3c55..dd727ee8a5b20c 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -144,6 +144,10 @@ export default function NavigationInspector() { const hasNavigationMenus = !! navigationMenus?.length; + // Entity block editor will return entities that are not currently published. + // Guard by only allowing their usage if there are published Nav Menus. + const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : []; + useEffect( () => { if ( isResolvingNavigationMenus ) { speak( 'Loading Navigation sidebar menus.' ); @@ -197,13 +201,13 @@ export default function NavigationInspector() { ) } { ! isLoading && ( ) } From 2198e9d2e3e8015059566caf78eb096b8acb315c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 23 Mar 2022 10:32:23 +0000 Subject: [PATCH 17/19] Select Gallery block in list view correctly --- packages/e2e-tests/specs/editor/blocks/gallery.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js index 0ca66f2b977584..1d896dc07f8a54 100644 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js @@ -39,6 +39,12 @@ async function upload( selector ) { return filename; } +async function getListViewBlocks( blockLabel ) { + return page.$x( + `//table[contains(@aria-label,'Block navigation structure')]//span[contains(@class,'block-editor-list-view-block__title') and text()='${ blockLabel }']` + ); +} + describe( 'Gallery', () => { beforeEach( async () => { await createNewPost(); From 782602ff32851e4fcbd1b7c2e129c9012a4cf74f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 24 Mar 2022 13:02:44 +0000 Subject: [PATCH 18/19] Remove rebase artifact --- packages/e2e-tests/specs/editor/blocks/gallery.test.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js index 1d896dc07f8a54..0ca66f2b977584 100644 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js @@ -39,12 +39,6 @@ async function upload( selector ) { return filename; } -async function getListViewBlocks( blockLabel ) { - return page.$x( - `//table[contains(@aria-label,'Block navigation structure')]//span[contains(@class,'block-editor-list-view-block__title') and text()='${ blockLabel }']` - ); -} - describe( 'Gallery', () => { beforeEach( async () => { await createNewPost(); From 9a59e6ecab4d857cbd1685e627218af947c26938 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 24 Mar 2022 13:57:50 +0000 Subject: [PATCH 19/19] Add empty message in case of empty menu --- .../navigation-menu-sidebar/navigation-inspector.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js index dd727ee8a5b20c..fa747bb6197421 100644 --- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js @@ -148,6 +148,8 @@ export default function NavigationInspector() { // Guard by only allowing their usage if there are published Nav Menus. const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : []; + const hasInnerBlocks = !! publishedInnerBlocks?.length; + useEffect( () => { if ( isResolvingNavigationMenus ) { speak( 'Loading Navigation sidebar menus.' ); @@ -199,7 +201,7 @@ export default function NavigationInspector() {
) } - { ! isLoading && ( + { hasInnerBlocks && ! isLoading && ( ) } + + { ! hasInnerBlocks && ! isLoading && ( +

+ { __( 'Navigation Menu is empty.' ) } +

+ ) }
); }