Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update navigation editor to support new submenu block #34281

Merged
merged 13 commits into from
Sep 13, 2021
Merged

Update navigation editor to support new submenu block #34281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ead40d4
Include submenu in navigation editor inserter blocks
talldan Aug 25, 2021
83eefbd
Create submenu blocks when serializing from menu items
talldan Aug 25, 2021
ab67b89
Serialize submenu blocks back to menu items
talldan Aug 25, 2021
e764385
Update navigation editor styles
talldan Aug 25, 2021
c9ac983
Fix submenu arrow rotation
talldan Aug 27, 2021
54f6ddf
Fix appender not showing when creating a submenu
talldan Aug 27, 2021
9e88f0f
Adjust vertical spacing
talldan Aug 27, 2021
6670a4d
Adjust horizontal spacing
talldan Aug 27, 2021
782df2c
Adjust indentation some more
talldan Aug 27, 2021
b43332d
Remove margin rule that introduces inconsistent spacing
talldan Aug 27, 2021
2856e6f
Update block types in unit test
talldan Sep 8, 2021
5610a85
Update e2e test
talldan Sep 8, 2021
df75aef
Address feedback
talldan Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,34 @@ exports[`Navigation editor displays the first menu from the REST response when a
"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} /-->

<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"page\\",\\"id\\":51,\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":true} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
<!-- wp:navigation-submenu {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\",\\"isTopLevelItem\\":false} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"page\\",\\"id\\":27,\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":false} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"page\\",\\"id\\":43,\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->

<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"kind\\":\\"post-type\\",\\"isTopLevelLink\\":true} /-->

<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":true} -->
<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":true} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
<!-- wp:navigation-submenu {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"category\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelItem\\":false} -->
<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"category\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"id\\":16,\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"kind\\":\\"taxonomy\\",\\"isTopLevelLink\\":false} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} -->
<!-- wp:navigation-submenu {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelItem\\":true} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation -->"
`;
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/experiments/navigation-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
39 changes: 20 additions & 19 deletions packages/edit-navigation/src/components/editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;

Expand Down Expand Up @@ -103,50 +97,48 @@
// 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;
position: relative;
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;
Expand All @@ -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;
}
}
Expand Down
8 changes: 7 additions & 1 deletion packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 7 additions & 5 deletions packages/edit-navigation/src/store/menu-items-to-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions packages/edit-navigation/src/store/test/menu-items-to-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
} ),
Expand All @@ -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',
} ),
Expand Down
5 changes: 4 additions & 1 deletion packages/edit-navigation/src/store/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down