From 7555b878ce346c569bdf207a552e9a0a15877924 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 28 Mar 2023 22:46:49 +0100 Subject: [PATCH] Navigtion: Use the ListView in the Navigation block inspector controls use the hook from list view remove prop drilling remove prop drilling Allow list view to scroll add custom scrollbars on hover update navigation block tests to account for using the list view fix test List View: Add a new prop to allow blocks in the inserter to be prioritized add another prop to list view Don't bother sorting if there are no proitizedInnerBlocks Open LinkUI popover after appending link from Navigation side block inserter The behavior when adding a link from the appender button on the OffCanvasEditor is to open a link control popover. This commit copies over several files from the OffCanvasEditor that was required for that to work in the ListView. The behavior is buggy, IMO, but it does match what is in trunk. inverted colors for the scrollbar Moved files related to navigation block outside of list-view. Remove unused link-ui from list-view Fix webpack runtime error For some reason keeping both exports in the same file caused an error that PrivateListView was used before initialization remove unneeded code to prioritize the blocks in the inserter remove unused prop move the inline function to a separate definition remove unneccessary change --- .../components/list-view/block-contents.js | 3 +- .../src/components/list-view/index.js | 266 +---------------- .../components/list-view/private-list-view.js | 270 ++++++++++++++++++ packages/block-editor/src/private-apis.js | 2 +- .../src/navigation-link/update-attributes.js | 4 +- .../src/navigation-link/use-inserted-block.js | 43 +++ .../src/navigation/edit/leaf-more-menu.js | 7 +- .../edit/menu-inspector-controls.js | 87 +++++- .../block-library/src/navigation/editor.scss | 6 + .../specs/editor/blocks/navigation.spec.js | 20 +- 10 files changed, 424 insertions(+), 284 deletions(-) create mode 100644 packages/block-editor/src/components/list-view/private-list-view.js create mode 100644 packages/block-library/src/navigation-link/use-inserted-block.js diff --git a/packages/block-editor/src/components/list-view/block-contents.js b/packages/block-editor/src/components/list-view/block-contents.js index a1f5f3562cfd40..402653803c28b9 100644 --- a/packages/block-editor/src/components/list-view/block-contents.js +++ b/packages/block-editor/src/components/list-view/block-contents.js @@ -12,6 +12,7 @@ import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ +import { unlock } from '../../lock-unlock'; import ListViewBlockSelectButton from './block-select-button'; import BlockDraggable from '../block-draggable'; import { store as blockEditorStore } from '../../store'; @@ -38,7 +39,7 @@ const ListViewBlockContents = forwardRef( const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect( ( select ) => { const { hasBlockMovingClientId, getSelectedBlockClientId } = - select( blockEditorStore ); + unlock( select( blockEditorStore ) ); return { blockMovingClientId: hasBlockMovingClientId(), selectedBlockInBlockEditor: getSelectedBlockClientId(), diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 1c0a093e208358..9a3ae46dbcc526 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -1,270 +1,17 @@ /** * WordPress dependencies */ -import { - useInstanceId, - useMergeRefs, - __experimentalUseFixedWindowList as useFixedWindowList, -} from '@wordpress/compose'; -import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components'; -import { AsyncModeProvider, useSelect } from '@wordpress/data'; -import deprecated from '@wordpress/deprecated'; -import { - useCallback, - useEffect, - useMemo, - useRef, - useReducer, - forwardRef, -} from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { forwardRef } from '@wordpress/element'; /** * Internal dependencies */ -import ListViewBranch from './branch'; -import { ListViewContext } from './context'; -import ListViewDropIndicator from './drop-indicator'; -import useBlockSelection from './use-block-selection'; -import useListViewClientIds from './use-list-view-client-ids'; -import useListViewDropZone from './use-list-view-drop-zone'; -import useListViewExpandSelectedItem from './use-list-view-expand-selected-item'; -import { store as blockEditorStore } from '../../store'; -import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown'; +import { unlock } from '../../lock-unlock'; +import { privateApis as blockEditorPrivateApis } from '../../private-apis'; -const expanded = ( state, action ) => { - if ( Array.isArray( action.clientIds ) ) { - return { - ...state, - ...action.clientIds.reduce( - ( newState, id ) => ( { - ...newState, - [ id ]: action.type === 'expand', - } ), - {} - ), - }; - } - return state; -}; +export { BLOCK_LIST_ITEM_HEIGHT } from './private-list-view'; -export const BLOCK_LIST_ITEM_HEIGHT = 36; - -/** @typedef {import('react').ComponentType} ComponentType */ -/** @typedef {import('react').Ref} Ref */ - -/** - * Show a hierarchical list of blocks. - * - * @param {Object} props Components props. - * @param {string} props.id An HTML element id for the root element of ListView. - * @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy. - * @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`. - * @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`. - * @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`. - * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component. - * @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list. - * @param {string} props.description Optional accessible description for the tree grid component. - * @param {?Function} props.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected. - * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI. - * @param {Ref} ref Forwarded ref - */ -function ListViewComponent( - { - id, - blocks, - showBlockMovers = false, - isExpanded = false, - showAppender = false, - blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown, - rootClientId, - description, - onSelect, - renderAdditionalBlockUI, - }, - ref -) { - // This can be removed once we no longer need to support the blocks prop. - if ( blocks ) { - deprecated( - '`blocks` property in `wp.blockEditor.__experimentalListView`', - { - since: '6.3', - alternative: '`rootClientId` property', - } - ); - } - - const instanceId = useInstanceId( ListViewComponent ); - const { clientIdsTree, draggedClientIds, selectedClientIds } = - useListViewClientIds( { blocks, rootClientId } ); - - const { getBlock } = useSelect( blockEditorStore ); - const { visibleBlockCount, shouldShowInnerBlocks } = useSelect( - ( select ) => { - const { - getGlobalBlockCount, - getClientIdsOfDescendants, - __unstableGetEditorMode, - } = select( blockEditorStore ); - const draggedBlockCount = - draggedClientIds?.length > 0 - ? getClientIdsOfDescendants( draggedClientIds ).length + 1 - : 0; - return { - visibleBlockCount: getGlobalBlockCount() - draggedBlockCount, - shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out', - }; - }, - [ draggedClientIds ] - ); - - const { updateBlockSelection } = useBlockSelection(); - - const [ expandedState, setExpandedState ] = useReducer( expanded, {} ); - - const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone(); - const elementRef = useRef(); - const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] ); - - const isMounted = useRef( false ); - const { setSelectedTreeId } = useListViewExpandSelectedItem( { - firstSelectedBlockClientId: selectedClientIds[ 0 ], - setExpandedState, - } ); - const selectEditorBlock = useCallback( - ( event, blockClientId ) => { - updateBlockSelection( event, blockClientId ); - setSelectedTreeId( blockClientId ); - if ( onSelect ) { - onSelect( getBlock( blockClientId ) ); - } - }, - [ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ] - ); - useEffect( () => { - isMounted.current = true; - }, [] ); - - // List View renders a fixed number of items and relies on each having a fixed item height of 36px. - // If this value changes, we should also change the itemHeight value set in useFixedWindowList. - // See: https://github.com/WordPress/gutenberg/pull/35230 for additional context. - const [ fixedListWindow ] = useFixedWindowList( - elementRef, - BLOCK_LIST_ITEM_HEIGHT, - visibleBlockCount, - { - useWindowing: true, - windowOverscan: 40, - } - ); - - const expand = useCallback( - ( clientId ) => { - if ( ! clientId ) { - return; - } - setExpandedState( { type: 'expand', clientIds: [ clientId ] } ); - }, - [ setExpandedState ] - ); - const collapse = useCallback( - ( clientId ) => { - if ( ! clientId ) { - return; - } - setExpandedState( { type: 'collapse', clientIds: [ clientId ] } ); - }, - [ setExpandedState ] - ); - const expandRow = useCallback( - ( row ) => { - expand( row?.dataset?.block ); - }, - [ expand ] - ); - const collapseRow = useCallback( - ( row ) => { - collapse( row?.dataset?.block ); - }, - [ collapse ] - ); - const focusRow = useCallback( - ( event, startRow, endRow ) => { - if ( event.shiftKey ) { - updateBlockSelection( - event, - startRow?.dataset?.block, - endRow?.dataset?.block - ); - } - }, - [ updateBlockSelection ] - ); - - const contextValue = useMemo( - () => ( { - isTreeGridMounted: isMounted.current, - draggedClientIds, - expandedState, - expand, - collapse, - BlockSettingsMenu, - listViewInstanceId: instanceId, - renderAdditionalBlockUI, - } ), - [ - draggedClientIds, - expandedState, - expand, - collapse, - BlockSettingsMenu, - instanceId, - renderAdditionalBlockUI, - ] - ); - - // If there are no blocks to show, do not render the list view. - if ( ! clientIdsTree.length ) { - return null; - } - - return ( - - - - - - - - - ); -} -export const PrivateListView = forwardRef( ListViewComponent ); +const { PrivateListView } = unlock( blockEditorPrivateApis ); export default forwardRef( ( props, ref ) => { return ( @@ -272,10 +19,9 @@ export default forwardRef( ( props, ref ) => { ref={ ref } { ...props } showAppender={ false } - blockSettingsMenu={ BlockSettingsDropdown } rootClientId={ null } onSelect={ null } - renderAdditionalBlockUICallback={ null } + renderAdditionalBlockUI={ null } /> ); } ); diff --git a/packages/block-editor/src/components/list-view/private-list-view.js b/packages/block-editor/src/components/list-view/private-list-view.js new file mode 100644 index 00000000000000..7680808a737891 --- /dev/null +++ b/packages/block-editor/src/components/list-view/private-list-view.js @@ -0,0 +1,270 @@ +/** + * WordPress dependencies + */ +import { + useInstanceId, + useMergeRefs, + __experimentalUseFixedWindowList as useFixedWindowList, +} from '@wordpress/compose'; +import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components'; +import { AsyncModeProvider, useSelect } from '@wordpress/data'; +import deprecated from '@wordpress/deprecated'; +import { + useCallback, + useEffect, + useMemo, + useRef, + useReducer, + forwardRef, +} from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; + +import { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown'; + +import ListViewBranch from './branch'; +import { ListViewContext } from './context'; +import ListViewDropIndicator from './drop-indicator'; +import useBlockSelection from './use-block-selection'; +import useListViewClientIds from './use-list-view-client-ids'; +import useListViewDropZone from './use-list-view-drop-zone'; +import useListViewExpandSelectedItem from './use-list-view-expand-selected-item'; + +const expanded = ( state, action ) => { + if ( Array.isArray( action.clientIds ) ) { + return { + ...state, + ...action.clientIds.reduce( + ( newState, id ) => ( { + ...newState, + [ id ]: action.type === 'expand', + } ), + {} + ), + }; + } + return state; +}; + +export const BLOCK_LIST_ITEM_HEIGHT = 36; + +/** @typedef {import('react').ComponentType} ComponentType */ +/** @typedef {import('react').Ref} Ref */ + +/** + * Show a hierarchical list of blocks. + * + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy. + * @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`. + * @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`. + * @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`. + * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component. + * @param {string} props.rootClientId The client id of the root block from which we determine the blocks to show in the list. + * @param {string} props.description Optional accessible description for the tree grid component. + * @param {?Function} props.onSelect Optional callback to be invoked when a block is selected. Receives the block object that was selected. + * @param {Function} props.renderAdditionalBlockUI Function that renders additional block content UI. + * @param {Ref} ref Forwarded ref + */ +const PrivateListView = forwardRef( function ListViewComponent( + { + id, + blocks, + showBlockMovers = false, + isExpanded = false, + showAppender = false, + blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown, + rootClientId, + description, + onSelect, + renderAdditionalBlockUI, + }, + ref +) { + // This can be removed once we no longer need to support the blocks prop. + if ( blocks ) { + deprecated( + '`blocks` property in `wp.blockEditor.__experimentalListView`', + { + since: '6.3', + alternative: '`rootClientId` property', + } + ); + } + + const instanceId = useInstanceId( ListViewComponent ); + const { clientIdsTree, draggedClientIds, selectedClientIds } = + useListViewClientIds( { blocks, rootClientId } ); + + const { getBlock } = useSelect( blockEditorStore ); + const { visibleBlockCount, shouldShowInnerBlocks } = useSelect( + ( select ) => { + const { + getGlobalBlockCount, + getClientIdsOfDescendants, + __unstableGetEditorMode, + } = select( blockEditorStore ); + const draggedBlockCount = + draggedClientIds?.length > 0 + ? getClientIdsOfDescendants( draggedClientIds ).length + 1 + : 0; + return { + visibleBlockCount: getGlobalBlockCount() - draggedBlockCount, + shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out', + }; + }, + [ draggedClientIds ] + ); + + const { updateBlockSelection } = useBlockSelection(); + + const [ expandedState, setExpandedState ] = useReducer( expanded, {} ); + + const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone(); + const elementRef = useRef(); + const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] ); + + const isMounted = useRef( false ); + const { setSelectedTreeId } = useListViewExpandSelectedItem( { + firstSelectedBlockClientId: selectedClientIds[ 0 ], + setExpandedState, + } ); + const selectEditorBlock = useCallback( + ( event, blockClientId ) => { + updateBlockSelection( event, blockClientId ); + setSelectedTreeId( blockClientId ); + if ( onSelect ) { + onSelect( getBlock( blockClientId ) ); + } + }, + [ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ] + ); + useEffect( () => { + isMounted.current = true; + }, [] ); + + // List View renders a fixed number of items and relies on each having a fixed item height of 36px. + // If this value changes, we should also change the itemHeight value set in useFixedWindowList. + // See: https://github.com/WordPress/gutenberg/pull/35230 for additional context. + const [ fixedListWindow ] = useFixedWindowList( + elementRef, + BLOCK_LIST_ITEM_HEIGHT, + visibleBlockCount, + { + useWindowing: true, + windowOverscan: 40, + } + ); + + const expand = useCallback( + ( clientId ) => { + if ( ! clientId ) { + return; + } + setExpandedState( { type: 'expand', clientIds: [ clientId ] } ); + }, + [ setExpandedState ] + ); + const collapse = useCallback( + ( clientId ) => { + if ( ! clientId ) { + return; + } + setExpandedState( { type: 'collapse', clientIds: [ clientId ] } ); + }, + [ setExpandedState ] + ); + const expandRow = useCallback( + ( row ) => { + expand( row?.dataset?.block ); + }, + [ expand ] + ); + const collapseRow = useCallback( + ( row ) => { + collapse( row?.dataset?.block ); + }, + [ collapse ] + ); + const focusRow = useCallback( + ( event, startRow, endRow ) => { + if ( event.shiftKey ) { + updateBlockSelection( + event, + startRow?.dataset?.block, + endRow?.dataset?.block + ); + } + }, + [ updateBlockSelection ] + ); + + const contextValue = useMemo( + () => ( { + isTreeGridMounted: isMounted.current, + draggedClientIds, + expandedState, + expand, + collapse, + BlockSettingsMenu, + listViewInstanceId: instanceId, + renderAdditionalBlockUI, + } ), + [ + draggedClientIds, + expandedState, + expand, + collapse, + BlockSettingsMenu, + instanceId, + renderAdditionalBlockUI, + ] + ); + + // If there are no blocks to show, do not render the list view. + if ( ! clientIdsTree.length ) { + return null; + } + + return ( + + + + + + + + + ); +} ); + +export default PrivateListView; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index a7357311eedbe8..68a834a100028e 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -7,7 +7,7 @@ import { lock } from './lock-unlock'; import OffCanvasEditor from './components/off-canvas-editor'; import ResizableBoxPopover from './components/resizable-box-popover'; import { ComposedPrivateInserter as PrivateInserter } from './components/inserter'; -import { PrivateListView } from './components/list-view'; +import PrivateListView from './components/list-view/private-list-view'; import BlockInfo from './components/block-info-slot-fill'; import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show'; import { cleanEmptyObject } from './hooks/utils'; diff --git a/packages/block-library/src/navigation-link/update-attributes.js b/packages/block-library/src/navigation-link/update-attributes.js index f618b5f03ef2fe..5133cae3878338 100644 --- a/packages/block-library/src/navigation-link/update-attributes.js +++ b/packages/block-library/src/navigation-link/update-attributes.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { safeDecodeURI } from '@wordpress/url'; import { escapeHTML } from '@wordpress/escape-html'; +import { safeDecodeURI } from '@wordpress/url'; /** * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind @@ -89,7 +89,7 @@ export const updateAttributes = ( setAttributes( { // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string. - ...{ url: newUrl ? encodeURI( safeDecodeURI( newUrl ) ) : newUrl }, + ...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ), ...( label && { label } ), ...( undefined !== opensInNewTab && { opensInNewTab } ), ...( id && Number.isInteger( id ) && { id } ), diff --git a/packages/block-library/src/navigation-link/use-inserted-block.js b/packages/block-library/src/navigation-link/use-inserted-block.js new file mode 100644 index 00000000000000..2644ca2e04f514 --- /dev/null +++ b/packages/block-library/src/navigation-link/use-inserted-block.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; + +export const useInsertedBlock = ( insertedBlockClientId ) => { + const { insertedBlockAttributes, insertedBlockName } = useSelect( + ( select ) => { + const { getBlockName, getBlockAttributes } = + select( blockEditorStore ); + + return { + insertedBlockAttributes: getBlockAttributes( + insertedBlockClientId + ), + insertedBlockName: getBlockName( insertedBlockClientId ), + }; + }, + [ insertedBlockClientId ] + ); + + const { updateBlockAttributes } = useDispatch( blockEditorStore ); + + const setInsertedBlockAttributes = ( _updatedAttributes ) => { + if ( ! insertedBlockClientId ) return; + updateBlockAttributes( insertedBlockClientId, _updatedAttributes ); + }; + + if ( ! insertedBlockClientId ) { + return { + insertedBlockAttributes: undefined, + insertedBlockName: undefined, + setInsertedBlockAttributes, + }; + } + + return { + insertedBlockAttributes, + insertedBlockName, + setInsertedBlockAttributes, + }; +}; diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js index f57335ce2bef60..195425adbeb1f1 100644 --- a/packages/block-library/src/navigation/edit/leaf-more-menu.js +++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js @@ -29,9 +29,12 @@ function AddSubmenuItem( { block, onClose, expandedState, expand } ) { useDispatch( blockEditorStore ); const clientId = block.clientId; - const isDisabled = ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes( - block.name + const blockName = useSelect( + ( select ) => select( blockEditorStore ).getBlockName( clientId ), + [ clientId ] ); + const isDisabled = + ! BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU.includes( blockName ); return ( { - const { OffCanvasEditor } = unlock( blockEditorPrivateApis ); + const { PrivateListView } = unlock( blockEditorPrivateApis ); // Provide a hierarchy of clientIds for the given Navigation block (clientId). // This is required else the list view will display the entire block tree. @@ -45,6 +53,42 @@ const MainContent = ( { }, [ clientId ] ); + + const [ clientIdWithOpenLinkUI, setClientIdWithOpenLinkUI ] = useState(); + const { lastInsertedBlockClientId } = useSelect( ( select ) => { + const { getLastInsertedBlocksClientIds } = unlock( + select( blockEditorStore ) + ); + const lastInsertedBlocksClientIds = getLastInsertedBlocksClientIds(); + return { + lastInsertedBlockClientId: + lastInsertedBlocksClientIds && lastInsertedBlocksClientIds[ 0 ], + }; + }, [] ); + + const { + insertedBlockAttributes, + insertedBlockName, + setInsertedBlockAttributes, + } = useInsertedBlock( lastInsertedBlockClientId ); + + const hasExistingLinkValue = insertedBlockAttributes?.url; + + useEffect( () => { + if ( + lastInsertedBlockClientId && + BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) && + ! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value. + ) { + setClientIdWithOpenLinkUI( lastInsertedBlockClientId ); + } + }, [ + lastInsertedBlockClientId, + clientId, + insertedBlockName, + hasExistingLinkValue, + ] ); + const { navigationMenu } = useNavigationMenu( currentMenuId ); if ( currentMenuId && isNavigationMenuMissing ) { @@ -64,14 +108,41 @@ const MainContent = ( { : __( 'You have not yet created any menus. Displaying a list of your Pages' ); + + const renderLinkUI = ( block ) => { + return ( + clientIdWithOpenLinkUI === block.clientId && ( + setClientIdWithOpenLinkUI( null ) } + hasCreateSuggestion={ false } + onChange={ ( updatedValue ) => { + updateAttributes( + updatedValue, + setInsertedBlockAttributes, + insertedBlockAttributes + ); + setClientIdWithOpenLinkUI( null ); + } } + onCancel={ () => setClientIdWithOpenLinkUI( null ) } + /> + ) + ); + }; + return ( - +
+ +
); }; diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index ac1db543d22100..1ba36e084da2ae 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -657,3 +657,9 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op .wp-block-navigation__responsive-container-open.components-button { opacity: 1; } + +.wp-block-navigation__menu-inspector-controls { + overflow-x: auto; + + @include custom-scrollbars-on-hover(transparent, $gray-600); +} diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index dc303141957310..d6f2e7c14435e1 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -463,7 +463,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Page Link link', + name: 'Page Link', } ) .filter( { hasText: 'Block 1 of 2, Level 1', // proxy for filtering by description. @@ -474,7 +474,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Submenu link', + name: 'Submenu', } ) .filter( { hasText: 'Block 2 of 2, Level 1', // proxy for filtering by description. @@ -485,7 +485,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Page Link link', + name: 'Page Link', } ) .filter( { hasText: 'Block 1 of 1, Level 2', // proxy for filtering by description. @@ -568,7 +568,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Page Link link', + name: 'Page Link', } ) .filter( { hasText: 'Block 3 of 3, Level 1', // proxy for filtering by description. @@ -618,7 +618,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Submenu link', + name: 'Submenu', } ) .filter( { hasText: 'Block 2 of 2, Level 1', // proxy for filtering by description. @@ -710,7 +710,7 @@ test.describe( 'Navigation block', () => { await expect( listViewPanel .getByRole( 'gridcell', { - name: 'Page Link link', + name: 'Page Link', } ) .filter( { hasText: 'Block 1 of 2, Level 1', // proxy for filtering by description. @@ -741,7 +741,7 @@ test.describe( 'Navigation block', () => { // click on options menu for the first menu item and select remove. const firstMenuItem = listView .getByRole( 'gridcell', { - name: 'Page Link link', + name: 'Page Link', } ) .filter( { hasText: 'Block 1 of 2, Level 1', // proxy for filtering by description. @@ -765,7 +765,7 @@ test.describe( 'Navigation block', () => { name: 'Options for Page Link block', } ) .getByRole( 'menuitem', { - name: 'Add submenu link', + name: 'Add submenu', } ); await addSubmenuOption.click(); @@ -778,7 +778,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Custom Link link', + name: 'Custom Link', } ) .filter( { hasText: 'Block 1 of 1, Level 2', // proxy for filtering by description. @@ -791,7 +791,7 @@ test.describe( 'Navigation block', () => { await expect( listView .getByRole( 'gridcell', { - name: 'Submenu link', + name: 'Submenu', } ) .filter( { hasText: 'Block 1 of 2, Level 1', // proxy for filtering by description.