diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap index 82c208896c7dc..15a87d5fd1c4d 100644 --- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap +++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap @@ -12,34 +12,34 @@ exports[`Navigation editor displays the first menu from the REST response when a " - + - + - - - - + + + + - - - - + + + + - - - + + + - - - + + + - + - + " `; diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 972ba27eb834b..c2faffdf6e61a 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -322,9 +322,9 @@ describe( 'Navigation editor', () => { ] ); await visitNavigationEditor(); - // Select a link block with nested links in a submenu. + // Select a submenu block with nested links in a submenu. const parentLinkXPath = - '//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]'; + '//div[@aria-label="Block: Submenu" and contains(.,"WordPress.org")]'; const linkBlock = await page.waitForXPath( parentLinkXPath ); await linkBlock.click(); diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss index 5c5d813b02d38..fa1f3674ab53d 100644 --- a/packages/edit-navigation/src/components/editor/style.scss +++ b/packages/edit-navigation/src/components/editor/style.scss @@ -32,6 +32,7 @@ // Increase specificity. .wp-block-navigation-item { display: block; + margin: $grid-unit-10 0; // Show submenus on click. > .wp-block-navigation__submenu-container { @@ -53,15 +54,8 @@ display: none; } - // Menu items. - // This needs high specificity to override inherited values. - &.wp-block-navigation-item.wp-block-navigation-item { - margin-right: 0; - } - .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content { padding: 0.5em 1em; - margin-bottom: 6px; margin-right: 0; border-radius: $radius-block-ui; @@ -103,42 +97,40 @@ // Submenu icon indicator. .wp-block-navigation__submenu-icon { position: absolute; - top: 6px; + top: 15px; left: 0; - padding: 6px; + padding: 0; pointer-events: none; svg { // Point rightwards. transform: rotate(-90deg); - transition: transform 0.2s ease; @include reduce-motion("transition"); } } // Point downwards when open. - .is-selected.has-child > .wp-block-navigation__submenu-icon svg, - .has-child-selected.has-child > .wp-block-navigation__submenu-icon svg { + .wp-block-navigation-submenu.is-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg, + .wp-block-navigation-submenu.has-child-selected > .wp-block-navigation-item__content > .wp-block-navigation__submenu-icon svg { transform: rotate(0deg); } // Override inherited values to optimize menu items for the screen context. + .wp-block-navigation-submenu.has-child, .wp-block-navigation-item.has-child { cursor: default; border-radius: $radius-block-ui; } // Override for deeply nested submenus. - .has-child .wp-block-navigation__container .wp-block-navigation__container, .has-child .wp-block-navigation__container .wp-block-navigation__submenu-container { left: auto; } - // When editing a link with children, highlight the parent + // When editing a submenu with children, highlight the parent // and adjust the spacing and submenu icon. - .wp-block-navigation-item.has-child.is-editing { - > .wp-block-navigation__container, + .wp-block-navigation-submenu.is-editing { > .wp-block-navigation__submenu-container { opacity: 1; visibility: visible; @@ -146,7 +138,7 @@ background: transparent; top: auto; left: auto; - padding-left: $grid-unit-15; + padding-left: $grid-unit-20 + $grid-unit-05; min-width: auto; width: 100%; border: none; @@ -158,9 +150,18 @@ } } - // Add buttons + // Appender styles + .block-list-appender { + // Make appender rows the same height as items and center the button vertically. + display: flex; + flex-direction: column; + justify-content: center; + height: $grid-unit-50; + margin: $grid-unit-10 0; + } + .block-editor-button-block-appender.block-list-appender__toggle { - margin: 0 0 0 $grid-unit-20; + margin: 0 0 0 $grid-unit-30; padding: 0; } } diff --git a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js b/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js index c9a34fe168b0f..f8426c7dd9137 100644 --- a/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js +++ b/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js @@ -8,7 +8,13 @@ import { addFilter } from '@wordpress/hooks'; import { set } from 'lodash'; function disableInsertingNonNavigationBlocks( settings, name ) { - if ( ! [ 'core/navigation', 'core/navigation-link' ].includes( name ) ) { + if ( + ! [ + 'core/navigation', + 'core/navigation-link', + 'core/navigation-submenu', + ].includes( name ) + ) { set( settings, [ 'supports', 'inserter' ], false ); } return settings; diff --git a/packages/edit-navigation/src/store/menu-items-to-blocks.js b/packages/edit-navigation/src/store/menu-items-to-blocks.js index 024c267d67cef..88dd0d768f54a 100644 --- a/packages/edit-navigation/src/store/menu-items-to-blocks.js +++ b/packages/edit-navigation/src/store/menu-items-to-blocks.js @@ -65,12 +65,14 @@ function mapMenuItemsToBlocks( menuItems ) { ...nestedMapping, }; + // Create a submenu block when there are inner blocks, or just a link + // for a standalone item. + const itemBlockName = nestedBlocks?.length + ? 'core/navigation-submenu' + : 'core/navigation-link'; + // Create block with nested "innerBlocks". - const block = createBlock( - 'core/navigation-link', - attributes, - nestedBlocks - ); + const block = createBlock( itemBlockName, attributes, nestedBlocks ); // Create mapping for menuItem -> block mapping[ menuItem.id ] = block.clientId; diff --git a/packages/edit-navigation/src/store/test/menu-items-to-blocks.js b/packages/edit-navigation/src/store/test/menu-items-to-blocks.js index 599b30e679ff5..f4a40f0dae27e 100644 --- a/packages/edit-navigation/src/store/test/menu-items-to-blocks.js +++ b/packages/edit-navigation/src/store/test/menu-items-to-blocks.js @@ -186,7 +186,7 @@ describe( 'converting menu items to blocks', () => { expect( actual ).toEqual( [ expect.objectContaining( { - name: 'core/navigation-link', + name: 'core/navigation-submenu', attributes: expect.objectContaining( { label: 'Top Level', } ), @@ -199,13 +199,13 @@ describe( 'converting menu items to blocks', () => { innerBlocks: [], } ), expect.objectContaining( { - name: 'core/navigation-link', + name: 'core/navigation-submenu', attributes: expect.objectContaining( { label: 'Child 2', } ), innerBlocks: [ expect.objectContaining( { - name: 'core/navigation-link', + name: 'core/navigation-submenu', attributes: expect.objectContaining( { label: 'Sub Child', } ), diff --git a/packages/edit-navigation/src/store/utils.js b/packages/edit-navigation/src/store/utils.js index 13da7255ad626..b26b41dc4e830 100644 --- a/packages/edit-navigation/src/store/utils.js +++ b/packages/edit-navigation/src/store/utils.js @@ -156,7 +156,10 @@ export function computeCustomizedAttribute( let attributes; - if ( block.name === 'core/navigation-link' ) { + if ( + block.name === 'core/navigation-link' || + block.name === 'core/navigation-submenu' + ) { attributes = blockAttributesToMenuItem( block.attributes ); } else { attributes = {