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

Experiment: dedicated menu and menu item blocks for navigation editor #34496

Closed
wants to merge 10 commits into from
Closed

Experiment: dedicated menu and menu item blocks for navigation editor #34496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f0c8ad4
Add the blocks
talldan Sep 2, 2021
aa6e22f
Replace use of navigation block with menu block
talldan Sep 2, 2021
64b5166
Change lots
talldan Sep 2, 2021
2f668fc
Style adjustments
talldan Sep 2, 2021
62cbe01
Remove navigation block filters
talldan Sep 2, 2021
f1fcc6d
Update placeholder appearance
talldan Sep 3, 2021
ee31795
Change sidebar menu name back
talldan Sep 3, 2021
7031de9
Repair Add all pages option
talldan Sep 3, 2021
9cdd937
Fix unit tests
talldan Sep 3, 2021
9c6f594
Fix e2e tests
talldan Sep 3, 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
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

56 changes: 19 additions & 37 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
@@ -1,45 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Navigation editor allows creation of a menu when there are existing menu items 1`] = `"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} /-->"`;
exports[`Navigation editor allows creation of a menu when there are existing menus 1`] = `"<!-- wp:menu /-->"`;

exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
<!-- /wp:navigation -->"
"<!-- wp:menu -->
<!-- wp:menu-item {\\"label\\":\\"My page\\",\\"type\\":\\"page\\",\\"id\\":1,\\"url\\":\\"https://example.com/1\\"} /-->
<!-- /wp:menu -->"
`;

exports[`Navigation editor displays the first menu from the REST response when at least one menu exists 1`] = `
"<!-- 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-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-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-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-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-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-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":true} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\",\\"isTopLevelLink\\":false} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation -->"
"<!-- wp:menu -->
<!-- wp:menu-item {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\"} /-->

<!-- wp:menu-item {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\"} /-->

<!-- wp:menu-item {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\"} /-->

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

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

<!-- wp:menu-item {\\"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\\"} /-->

<!-- wp:menu-item {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\"} /-->
<!-- /wp:menu -->"
`;
31 changes: 21 additions & 10 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 @@ -193,7 +193,18 @@ describe( 'Navigation editor', () => {
POST: menuPostResponse,
} ),
...getMenuItemMocks( { GET: [] } ),
...getPagesMocks( { GET: [ {} ] } ), // mock a single page
...getPagesMocks( {
GET: [
{
type: 'page',
id: 1,
link: 'https://example.com/1',
title: {
rendered: 'My page',
},
},
],
} ),
] );

await page.keyboard.type( 'Main Menu' );
Expand All @@ -207,7 +218,7 @@ describe( 'Navigation editor', () => {

// Select the navigation block and create a block from existing pages.
const navigationBlock = await page.waitForSelector(
'div[aria-label="Block: Navigation"]'
'div[aria-label="Block: Menu"]'
);
await navigationBlock.click();

Expand All @@ -218,12 +229,12 @@ describe( 'Navigation editor', () => {

// When the block is created the root element changes from a div (for the placeholder)
// to a nav (for the navigation itself). Wait for this to happen.
await page.waitForSelector( 'nav[aria-label="Block: Navigation"]' );
await page.waitForSelector( 'nav[aria-label="Block: Menu"]' );

expect( await getSerializedBlocks() ).toMatchSnapshot();
} );

it( 'allows creation of a menu when there are existing menu items', async () => {
it( 'allows creation of a menu when there are existing menus', async () => {
const menuPostResponse = {
id: 4,
description: '',
Expand Down Expand Up @@ -281,7 +292,7 @@ describe( 'Navigation editor', () => {
await page.waitForXPath( '//div[contains(., "Menu created")]' );

// An empty navigation block will appear.
await page.waitForSelector( 'div[aria-label="Block: Navigation"]' );
await page.waitForSelector( 'div[aria-label="Block: Menu"]' );

expect( await getSerializedBlocks() ).toMatchSnapshot();
} );
Expand All @@ -299,7 +310,7 @@ describe( 'Navigation editor', () => {
} );

// Wait for the block to be present.
await page.waitForSelector( 'nav[aria-label="Block: Navigation"]' );
await page.waitForSelector( 'nav[aria-label="Block: Menu"]' );

expect( await getSerializedBlocks() ).toMatchSnapshot();
} );
Expand All @@ -313,7 +324,7 @@ describe( 'Navigation editor', () => {

// Select a link block with nested links in a submenu.
const parentLinkXPath =
'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
'//div[@aria-label="Block: Menu Item" and contains(.,"WordPress.org")]';
const linkBlock = await page.waitForXPath( parentLinkXPath );
await linkBlock.click();

Expand All @@ -322,7 +333,7 @@ describe( 'Navigation editor', () => {
// Submenus are hidden using `visibility: hidden` and shown using
// `visibility: visible` so the visible/hidden options must be used
// when selecting the elements.
const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Custom Link"]`;
const submenuLinkXPath = `${ parentLinkXPath }//div[@aria-label="Block: Menu Item"]`;
const submenuLinkVisible = await page.waitForXPath( submenuLinkXPath, {
visible: true,
} );
Expand Down Expand Up @@ -350,11 +361,11 @@ describe( 'Navigation editor', () => {

// Wait for the block to be present and start an empty block.
const navBlock = await page.waitForSelector(
'div[aria-label="Block: Navigation"]'
'div[aria-label="Block: Menu"]'
);
await navBlock.click();
const startEmptyButton = await page.waitForXPath(
'//button[.="Start empty"]'
'//button[.="Start blank"]'
);
await startEmptyButton.click();

Expand Down
10 changes: 5 additions & 5 deletions packages/edit-navigation/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ Themes can opt into this behaviour by declaring:
add_theme_support( 'block-nav-menus' );
```

This unlocks significant additional capabilities in the Navigation Editor. For example, by default, [the Navigation Editor screen only allows _link_ (`core/navigation-link`) blocks to be inserted into a navigation](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js). When a theme opts into `block-nav-menus` however, users are able to add non-link blocks to a navigation using the Navigation Editor screen, including:
This unlocks significant additional capabilities in the Navigation Editor. For example, by default, [the Navigation Editor screen only allows _link_ (`core/menu-item`) blocks to be inserted into a navigation](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/filters/disable-inserting-non-navigation-blocks.js). When a theme opts into `block-nav-menus` however, users are able to add non-link blocks to a navigation using the Navigation Editor screen, including:

- `core/navigation-link`.
- `core/menu-item`.
- `core/social`.
- `core/search`.

#### Technical Implementation details

By default, `core/navigation-link` items are serialized and persisted as `nav_menu_item` posts. No serialized block HTML is stored for these standard link blocks.
By default, `core/menu-item` items are serialized and persisted as `nav_menu_item` posts. No serialized block HTML is stored for these standard link blocks.

_Non_-link navigation items however, are [persisted as `nav_menu_items` with a special `type` of `block`](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/packages/edit-navigation/src/store/utils.js#L159-L166). These items have an [_additional_ `content` field which is used to store the serialized block markup](https://github.com/WordPress/gutenberg/blob/7fcd57c9a62c232899e287f6d96416477d810d5e/lib/navigation.php#L71-L101).

Expand Down Expand Up @@ -160,8 +160,8 @@ return (

## Glossary

- **Link block** - the basic `core/navigation-link` block which is the standard block used to add links within navigations.
- **Navigation block** - the root `core/navigation` block which can be used both with the Navigation Editor and outside (eg: Post / Site Editor).
- **Link block** - the basic `core/menu-item` block which is the standard block used to add links within navigations.
- **Navigation block** - the root `core/menu` block which can be used both with the Navigation Editor and outside (eg: Post / Site Editor).
- **Navigation editor / screen** - the new screen provided by Gutenberg to allow the user to edit navigations using a block-based UI.
- **Menus screen** - the current/existing [interface/screen for managing Menus](https://codex.wordpress.org/WordPress_Menu_User_Guide) in WordPress WPAdmin.

Expand Down
2 changes: 2 additions & 0 deletions packages/edit-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@wordpress/core-data": "file:../core-data",
"@wordpress/data": "file:../data",
"@wordpress/data-controls": "file:../data-controls",
"@wordpress/dom": "file:../dom",
"@wordpress/dom-ready": "file:../dom-ready",
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
Expand All @@ -45,6 +46,7 @@
"@wordpress/icons": "file:../icons",
"@wordpress/interface": "file:../interface",
"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/media-utils": "file:../media-utils",
"@wordpress/notices": "file:../notices",
"@wordpress/url": "file:../url",
Expand Down
48 changes: 48 additions & 0 deletions packages/edit-navigation/src/blocks/menu-item/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"apiVersion": 2,
"name": "core/menu-item",
"title": "Menu Item",
"category": "design",
"parent": [
"core/menu"
],
"description": "Add a page, link, or another item to your navigation.",
"textdomain": "default",
"attributes": {
"label": {
"type": "string"
},
"type": {
"type": "string"
},
"description": {
"type": "string"
},
"rel": {
"type": "string"
},
"id": {
"type": "number"
},
"opensInNewTab": {
"type": "boolean",
"default": false
},
"url": {
"type": "string"
},
"title": {
"type": "string"
},
"kind": {
"type": "string"
}
},
"supports": {
"customClassName": false,
"reusable": false,
"html": false
},
"editorStyle": "wp-block-navigation-link-editor",
"style": "wp-block-navigation-link"
}
Loading