Nav block: enable creation from existing WP Menus #18869

getdave · 2019-12-02T12:30:55Z

This PR allow the creation of Nav Block (items) from existing WP Menus. ~~Requires the experimental Menu REST API Plugin. The intent is that this endpoint gets merged into WordPress Core thereby enabling this functionality on the Block to become a reality.~~ (update: the endpoints are now merged into Gutenberg Core).

This is visually based on this mockup from @shaunandrews.

Note: the creation of the Nav Block from the Menu is a one time action. It does not keep the Nav Block items in sync with the Menu.

~~Depends on #20292~~
Closes #18575

Todo

The following items are outstanding on this PR:

Update e2e tests to match new design.
Fix or workaround Axe accessibility tests errors in component dependencies.
Fix or work around React state update on an unmounted component relating to ToolbarContainer component (again not modified in this PR so unrelated???).
Fix CSS logic to ensure the dividing line is always below the last "Menu" item. We cannot rely on there always being a "Create from pages" option. See https://d.pr/i/qfvMbT.

Testing Instructions

If you notice any "lag" on inserting/selecting the Block you are probably experiencing #22823.

Does this match the approved design?

Pre-test setup

Remove all Menus (Appearance -> Menus) from your WP site.
Switch to this branch. Rebuild. Any issues with Prettier please see here).

Test Flow

Create a New Post
Add Nav Block
You should not see any Menu options in the placeholder dropdown as there are no menus.
Goto Apperance -> Menus and create a new Menu but do not add any items to it.
Create a New Post
Add Nav Block
You should see the Menu you created within the dropdown. Select the Menu from the dropdown and click the "Create" button.
You should see an empty Nav Block created with no Nav Item Blocks - this reflects the empty state of your WP Menu.
Goto Appearance -> Menus and add some items to your Menu (be sure to hit "Save" to save your Menu else it will still have 0 items!).
Create a New Post
Add Nav Block
You should still see the Menu you created within the dropdown. Select the Menu from the dropdown and click the "Create" button.
You should see the Nav Block created with all of the items that exist in your WP Menu.
Test that you can still create from Pages and create an empty Nav block.
Also try the tests above on a limited network connection (simulate using Devtools "Network" tab).

How has this been tested?

Manual testing
e2e tests

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR. .

packages/block-library/src/navigation/edit.js

WunderBart · 2020-01-07T14:03:45Z

Wanted to test this one, but I'm getting an error when running npm run dev (after a clean npm install):

Build Progress: [==============================] 100%
[1] 
[1] > gutenberg@7.0.0 dev:packages /Users/bart/Code/WunderBart/gutenberg
[1] > node ./bin/packages/watch.js
[1] 
[1] internal/modules/cjs/loader.js:800
[1]     throw err;
[1]     ^
[1] 
[1] Error: Cannot find module '/Users/bart/Code/WunderBart/gutenberg/packages/edit-site/package.json'
[1] Require stack:
[1] - /Users/bart/Code/WunderBart/gutenberg/bin/packages/get-packages.js
[1] - /Users/bart/Code/WunderBart/gutenberg/bin/packages/watch.js
[1]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
[1]     at Function.Module._load (internal/modules/cjs/loader.js:690:27)
[1]     at Module.require (internal/modules/cjs/loader.js:852:19)
[1]     at require (internal/modules/cjs/helpers.js:74:18)
[1]     at hasModuleField (/Users/bart/Code/WunderBart/gutenberg/bin/packages/get-packages.js:35:21)
[1]     at apply (/Users/bart/Code/WunderBart/gutenberg/node_modules/lodash/lodash.js:476:27)
[1]     at /Users/bart/Code/WunderBart/gutenberg/node_modules/lodash/lodash.js:5259:20
[1]     at arrayEvery (/Users/bart/Code/WunderBart/gutenberg/node_modules/lodash/lodash.js:558:12)
[1]     at /Users/bart/Code/WunderBart/gutenberg/node_modules/lodash/lodash.js:5258:18
[1]     at apply (/Users/bart/Code/WunderBart/gutenberg/node_modules/lodash/lodash.js:474:27) {
[1]   code: 'MODULE_NOT_FOUND',
[1]   requireStack: [
[1]     '/Users/bart/Code/WunderBart/gutenberg/bin/packages/get-packages.js',
[1]     '/Users/bart/Code/WunderBart/gutenberg/bin/packages/watch.js'
[1]   ]
[1] }
[1] npm 
[1] ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm 
[1] ERR! gutenberg@7.0.0 dev:packages: `node ./bin/packages/watch.js`
[1] npm ERR! Exit status 1
[1] npm ERR! 
[1] npm ERR! Failed at the gutenberg@7.0.0 dev:packages script.
[1] npm 
[1] ERR! This is probably not a problem with npm. There is likely additional logging output above.

Master branch is working fine for me.

Env:

node v12.13.1 (from .nvmrc)
npm v6.12.1

getdave · 2020-01-09T14:19:34Z

@marekhrabe and I are going to take this up full time again starting tomorrow.

getdave · 2020-01-09T16:17:31Z

@youknowriad I think this feature is important for continuity with WP Core. However, we cannot land it until the REST API supports Menus.

However, the REST API team already have a feature Plugin for Menu endpoints that needs testing. We can develop against this Plugin.

However, in order to merge the feature we'll need to wait on WP Core to release the Menu endpoints. That could take some time.

I felt it was worth asking - is there any way we would consider adding an "experimental" endpoint to Gutenberg to allow READ access to Menus as a stop-gap until the WP Core REST API is updated with an official endpoint?

cc @apeatling

youknowriad · 2020-01-10T13:38:48Z

@getdave this seems like a good use case to bring the required endpoints from that plugin to Gutenberg and test it properly.

spacedmonkey · 2020-01-10T16:50:28Z

@youknowriad The menus endpoint is being activily developed in the plugin still. We still have one PR that is outstand. We then need to have unit tests and tidy up the code. So to me, this still makes sense for this to live in it's own plugin for now.

If you want to use it in your code base, you could bring it in using composer?

youknowriad · 2020-01-13T09:04:10Z

If you want to use it in your code base, you could bring it in using composer?

I don't mind using composer here personally, The concern is the extra tooling but we can probably try it.

spacedmonkey · 2020-02-18T20:41:10Z

I have created a PR for menu endpoints - #20292

github-actions · 2020-03-04T19:16:37Z

Size Change: +2.07 kB (0%)

Total Size: 1.13 MB

Filename	Size	Change
`build/block-library/index.js`	129 kB	+1.6 kB (1%)
`build/block-library/style-rtl.css`	7.96 kB	+238 B (2%)
`build/block-library/style.css`	7.96 kB	+237 B (2%)
`build/components/style-rtl.css`	19.5 kB	-7 B (0%)
`build/components/style.css`	19.5 kB	-4 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.14 kB	0 B
`build/annotations/index.js`	3.62 kB	0 B
`build/api-fetch/index.js`	3.4 kB	0 B
`build/autop/index.js`	2.83 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.77 kB	0 B
`build/block-directory/style-rtl.css`	892 B	0 B
`build/block-directory/style.css`	892 B	0 B
`build/block-editor/index.js`	106 kB	0 B
`build/block-editor/style-rtl.css`	11.8 kB	0 B
`build/block-editor/style.css`	11.8 kB	0 B
`build/block-library/editor-rtl.css`	7.88 kB	0 B
`build/block-library/editor.css`	7.89 kB	0 B
`build/block-library/theme-rtl.css`	684 B	0 B
`build/block-library/theme.css`	686 B	0 B
`build/block-serialization-default-parser/index.js`	1.88 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	48.1 kB	0 B
`build/components/index.js`	195 kB	0 B
`build/compose/index.js`	9.31 kB	0 B
`build/core-data/index.js`	11.4 kB	0 B
`build/data-controls/index.js`	1.29 kB	0 B
`build/data/index.js`	8.44 kB	0 B
`build/date/index.js`	5.47 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.17 kB	0 B
`build/edit-navigation/index.js`	8.24 kB	0 B
`build/edit-navigation/style-rtl.css`	918 B	0 B
`build/edit-navigation/style.css`	919 B	0 B
`build/edit-post/index.js`	303 kB	0 B
`build/edit-post/style-rtl.css`	5.6 kB	0 B
`build/edit-post/style.css`	5.6 kB	0 B
`build/edit-site/index.js`	16.6 kB	0 B
`build/edit-site/style-rtl.css`	2.96 kB	0 B
`build/edit-site/style.css`	2.96 kB	0 B
`build/edit-widgets/index.js`	9.34 kB	0 B
`build/edit-widgets/style-rtl.css`	2.4 kB	0 B
`build/edit-widgets/style.css`	2.4 kB	0 B
`build/editor/editor-styles-rtl.css`	425 B	0 B
`build/editor/editor-styles.css`	428 B	0 B
`build/editor/index.js`	44.8 kB	0 B
`build/editor/style-rtl.css`	4.26 kB	0 B
`build/editor/style.css`	4.27 kB	0 B
`build/element/index.js`	4.64 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.72 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	2.13 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.56 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.51 kB	0 B
`build/keycodes/index.js`	1.94 kB	0 B
`build/list-reusable-blocks/index.js`	3.12 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	5.29 kB	0 B
`build/notices/index.js`	1.79 kB	0 B
`build/nux/index.js`	3.4 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.56 kB	0 B
`build/primitives/index.js`	1.5 kB	0 B
`build/priority-queue/index.js`	789 B	0 B
`build/redux-routine/index.js`	2.85 kB	0 B
`build/rich-text/index.js`	14.8 kB	0 B
`build/server-side-render/index.js`	2.68 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.28 kB	0 B
`build/url/index.js`	4.06 kB	0 B
`build/viewport/index.js`	1.85 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.17 kB	0 B

_{compressed-size-action}

Addresses #18869 (comment)

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Addresses #18869 (comment)

Due to loading spinner we now have to wait on the dropdown before interacting.

This fix will work once a complementary update has been applied to CustomSelectControl to enable the options to have a custom classname applied.

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Fixes #18869 (comment)

getdave · 2020-06-10T13:37:57Z

Thanks for working on this @getdave.

You are very welcome. Thanks for all the reviews and help. Also @draganescu (and others).

I still feel like this is a lot of code to add to the one file (navigation/edit.js), but having said that, the feature is working well.

Agreed. For clarity for others coming here in the future, the feature has now been:

manually tested by several contributors.
[approved by the feature's Design lead] (Nav block: enable creation from existing WP Menus #18869 (review)) @/karmatosed.
approved by @/talldan.
covered by an updated suite of e2e tests.

This makes me confident it will serve the need although there are certainly some UX and a11y improvements that could be looked at. As a result I've raised a number of followup issues that have been added to the Navigation project board.

I'll look to merge this asap.

paaljoachim · 2020-06-10T14:09:47Z

Great work Dave!!

collimarco · 2021-08-20T11:04:00Z

This feature seems merged, but in the latest Wordpress version I can't find any Nav block...

Why? How is it called?

paaljoachim · 2021-08-20T13:36:27Z

Hey @collimarco Marco

The Nav block is for the moment only present in the Gutenberg plugin.
Here is it with the Gutenberg plugin activated:

It is missing when the Gutenberg plugin is not activated.

The Nav block was not included into WordPress 5.8 because it is still in a kind of experimental phase. Which means it is for now only included in the Gutenberg plugin. It should likely be included into WordPress 5.9 when it is released in December.

getdave self-assigned this Dec 2, 2019

getdave added this to 👀 PRs to review in Navigation editor via automation Dec 2, 2019

getdave mentioned this pull request Dec 3, 2019

REST API endpoint for Menu Post Types #18373

Closed

spacedmonkey reviewed Dec 4, 2019

View reviewed changes

packages/block-library/src/navigation/edit.js Outdated Show resolved Hide resolved

getdave moved this from 👀 PRs to review to 💻 Issues in progress in Navigation editor Jan 7, 2020

spacedmonkey mentioned this pull request Jan 8, 2020

Add permission check WP-API/menus-endpoints#40

Merged

getdave force-pushed the try/nav-block-create-from-menus branch from 2a8c8f2 to 2af97da Compare January 9, 2020 14:25

getdave mentioned this pull request Jan 9, 2020

Fixes e2e test failures via console log exception to handle temp wpnonce error #19532

Merged

6 tasks

getdave assigned marekhrabe Jan 9, 2020

getdave added [Block] Navigation Affects the Navigation Block [Status] In Progress Tracking issues with work in progress labels Jan 9, 2020

draganescu force-pushed the try/nav-block-create-from-menus branch from b1ff735 to 451d9f6 Compare March 4, 2020 19:12

draganescu force-pushed the try/nav-block-create-from-menus branch from 451d9f6 to 7c5d23c Compare March 9, 2020 07:47

draganescu assigned draganescu and unassigned marekhrabe and getdave Mar 9, 2020

draganescu marked this pull request as ready for review March 9, 2020 16:12

draganescu requested review from ajitbohra, jorgefilipecosta, nerrad, Soean and talldan as code owners March 9, 2020 16:12

getdave and others added 19 commits June 10, 2020 14:21

Update case so that placeholder is a single word

2329e79

Addresses #18869 (comment)

Update packages/block-library/src/navigation/create-data-tree.js

56c8e78

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Update packages/block-library/src/navigation/create-data-tree.js

d65d7e8

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Memozie dropdown options to avoid re-renders

bdde794

Addresses #18869 (comment)

Rename to disambiguate dropdown term

a14245a

Adds @return to docblock

6e5a561

Normalise selector format

3aa695d

Avoid setState re-render for same option selection

8dc5189

Update to show placeholder loading state when requesting pages or menus.

d460016

Fixes loading spinner alignment

8cd6467

Update to use var to store ref to common state property

468f3e7

Apply useCallback to utility function

ca2cbb2

Apply useCallback to improve perf

b0eb65d

FIx e2e test to wait for dropdown to be present before interaction

e97cbe7

Due to loading spinner we now have to wait on the dropdown before interacting.

Janitorial - fix to single quotes

fc85695

Updates dropdown divider to rely on classname over placement

47a450b

This fix will work once a complementary update has been applied to CustomSelectControl to enable the options to have a custom classname applied.

Fix double with single quotes

87305bc

Update packages/block-library/src/navigation/edit.js

2b95d56

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

Move fixture to subfolder

792937d

Fixes #18869 (comment)

getdave force-pushed the try/nav-block-create-from-menus branch from 4a766b2 to 792937d Compare June 10, 2020 13:23

getdave merged commit 7567111 into master Jun 10, 2020

getdave deleted the try/nav-block-create-from-menus branch June 10, 2020 14:06

github-actions bot added this to the Gutenberg 8.4 milestone Jun 10, 2020

jancavan mentioned this pull request Jun 21, 2020

(5P) External Media: Remove existing Google Photos filters in favor of date-range dropdown Automattic/jetpack#15880

Closed

This was referenced Jun 24, 2020

Release/8.4 #23410

Closed

Bump plugin version to 8.4.0-rc.2 #23412

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Nav block: enable creation from existing WP Menus #18869

Nav block: enable creation from existing WP Menus #18869

getdave commented Dec 2, 2019 •

edited

WunderBart commented Jan 7, 2020

getdave commented Jan 9, 2020 •

edited

getdave commented Jan 9, 2020

youknowriad commented Jan 10, 2020

spacedmonkey commented Jan 10, 2020

youknowriad commented Jan 13, 2020

spacedmonkey commented Feb 18, 2020

github-actions bot commented Mar 4, 2020 •

edited

getdave commented Jun 10, 2020 •

edited

paaljoachim commented Jun 10, 2020

collimarco commented Aug 20, 2021

paaljoachim commented Aug 20, 2021 •

edited

Nav block: enable creation from existing WP Menus #18869

Nav block: enable creation from existing WP Menus #18869

Conversation

getdave commented Dec 2, 2019 • edited

Todo

Testing Instructions

Pre-test setup

Test Flow

How has this been tested?

Screenshots

Types of changes

Checklist:

WunderBart commented Jan 7, 2020

getdave commented Jan 9, 2020 • edited

getdave commented Jan 9, 2020

youknowriad commented Jan 10, 2020

spacedmonkey commented Jan 10, 2020

youknowriad commented Jan 13, 2020

spacedmonkey commented Feb 18, 2020

github-actions bot commented Mar 4, 2020 • edited

getdave commented Jun 10, 2020 • edited

paaljoachim commented Jun 10, 2020

collimarco commented Aug 20, 2021

paaljoachim commented Aug 20, 2021 • edited

getdave commented Dec 2, 2019 •

edited

getdave commented Jan 9, 2020 •

edited

github-actions bot commented Mar 4, 2020 •

edited

getdave commented Jun 10, 2020 •

edited

paaljoachim commented Aug 20, 2021 •

edited