Use page list instead of placeholder as fallback

[draganescu]

Closes #42563

• [x] Default to a page list block when the navigation block is empty and no menus exist
  • [x] Add test for this
  • [x] Update tests that assume empty nav defaults to placeholder
    • [x] Update selectClassicMenu to pull the block toolbar instead of placeholder
  • [x] Update the front end to default to a page list block when the navigation block is empty and no menus exist
• [x] Show "empty placeholder" when deleting the selected menu from the block
  • [ ] Add test for this
• [x] Default to the most recently created menu if multiple menus exist
  • [x] Add test for this
• [x] Default to the only menu if only one menu exists
  • [x] Add test for this
• [ ] 🐛 deleting the fallback page list block results in a menu being created
• [ ] 🐛 responsive navigation blocks don't allow the fallback page list to be selected via mouse click

What?

This makes the navigation block default to a page list in the editor when loading an empty navigation block (one that has no uncontrolled blocks nor any ref).

Why?

We do this so that the editor respects the fallback of the front end, which is a page list.

How?

We use a similar technique to the one used in the pattern block which does not add the pattern before it is edited.

Testing Instructions

1. Use a theme that has a template part with an empty navigation block (e.g. Vivre)
2. Load the template part in the site editor
3. Make sure you delete ALL your navigation menus
4. You should see a page list block for navigation

Screenshots or screencast

N/A

[github-actions[bot]]

Size Change: +501 B (0%)

Total Size: 1.24 MB

Filename	Size	Change
build/block-editor/index.min.js	159 kB	+256 B (0%)
build/block-editor/style-rtl.css	15.1 kB	-17 B (0%)
build/block-editor/style.css	15 kB	-19 B (0%)
build/block-library/blocks/image/editor-rtl.css	876 B	+6 B (+1%)
build/block-library/blocks/navigation/editor-rtl.css	2.05 kB	+23 B (+1%)
build/block-library/blocks/navigation/editor.css	2.06 kB	+18 B (+1%)
build/block-library/blocks/navigation/style-rtl.css	1.98 kB	+1 B (0%)
build/block-library/blocks/navigation/style.css	1.97 kB	+1 B (0%)
build/block-library/blocks/social-links/style-rtl.css	1.39 kB	-1 B (0%)
build/block-library/blocks/social-links/style.css	1.38 kB	-1 B (0%)
build/block-library/blocks/video/style-rtl.css	174 B	+15 B (+9%)	🔍
build/block-library/blocks/video/style.css	174 B	+15 B (+9%)	🔍
build/block-library/editor-rtl.css	11 kB	+35 B (0%)
build/block-library/editor.css	11 kB	+35 B (0%)
build/block-library/index.min.js	186 kB	-205 B (0%)
build/block-library/style-rtl.css	11.8 kB	+8 B (0%)
build/block-library/style.css	11.8 kB	+10 B (0%)
build/blocks/index.min.js	49.5 kB	+25 B (0%)
build/components/index.min.js	198 kB	+118 B (0%)
build/components/style-rtl.css	11.6 kB	-24 B (0%)
build/components/style.css	11.6 kB	-25 B (0%)
build/core-data/index.min.js	15.4 kB	+38 B (0%)
build/edit-post/index.min.js	30.5 kB	+14 B (0%)
build/edit-site/index.min.js	57.5 kB	+161 B (0%)
build/edit-widgets/index.min.js	16.5 kB	-4 B (0%)
build/keycodes/index.min.js	1.81 kB	+18 B (+1%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	982 B
build/annotations/index.min.js	2.76 kB
build/api-fetch/index.min.js	2.26 kB
build/autop/index.min.js	2.14 kB
build/blob/index.min.js	475 B
build/block-directory/index.min.js	7.06 kB
build/block-directory/style-rtl.css	990 B
build/block-directory/style.css	991 B
build/block-editor/default-editor-styles-rtl.css	378 B
build/block-editor/default-editor-styles.css	378 B
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	65 B
build/block-library/blocks/archives/style.css	65 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	110 B
build/block-library/blocks/audio/theme.css	110 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	59 B
build/block-library/blocks/avatar/style.css	59 B
build/block-library/blocks/block/editor-rtl.css	161 B
build/block-library/blocks/block/editor.css	161 B
build/block-library/blocks/button/editor-rtl.css	441 B
build/block-library/blocks/button/editor.css	441 B
build/block-library/blocks/button/style-rtl.css	539 B
build/block-library/blocks/button/style.css	539 B
build/block-library/blocks/buttons/editor-rtl.css	292 B
build/block-library/blocks/buttons/editor.css	292 B
build/block-library/blocks/buttons/style-rtl.css	275 B
build/block-library/blocks/buttons/style.css	275 B
build/block-library/blocks/calendar/style-rtl.css	207 B
build/block-library/blocks/calendar/style.css	207 B
build/block-library/blocks/categories/editor-rtl.css	84 B
build/block-library/blocks/categories/editor.css	83 B
build/block-library/blocks/categories/style-rtl.css	79 B
build/block-library/blocks/categories/style.css	79 B
build/block-library/blocks/code/style-rtl.css	103 B
build/block-library/blocks/code/style.css	103 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	406 B
build/block-library/blocks/columns/style.css	406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	187 B
build/block-library/blocks/comment-template/style.css	185 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	834 B
build/block-library/blocks/comments/editor.css	832 B
build/block-library/blocks/comments/style-rtl.css	632 B
build/block-library/blocks/comments/style.css	630 B
build/block-library/blocks/cover/editor-rtl.css	615 B
build/block-library/blocks/cover/editor.css	616 B
build/block-library/blocks/cover/style-rtl.css	1.55 kB
build/block-library/blocks/cover/style.css	1.55 kB
build/block-library/blocks/embed/editor-rtl.css	293 B
build/block-library/blocks/embed/editor.css	293 B
build/block-library/blocks/embed/style-rtl.css	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	110 B
build/block-library/blocks/embed/theme.css	110 B
build/block-library/blocks/file/editor-rtl.css	300 B
build/block-library/blocks/file/editor.css	300 B
build/block-library/blocks/file/style-rtl.css	253 B
build/block-library/blocks/file/style.css	254 B
build/block-library/blocks/file/view.min.js	346 B
build/block-library/blocks/freeform/editor-rtl.css	2.44 kB
build/block-library/blocks/freeform/editor.css	2.44 kB
build/block-library/blocks/gallery/editor-rtl.css	948 B
build/block-library/blocks/gallery/editor.css	950 B
build/block-library/blocks/gallery/style-rtl.css	1.53 kB
build/block-library/blocks/gallery/style.css	1.53 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	412 B
build/block-library/blocks/group/editor.css	412 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	76 B
build/block-library/blocks/heading/style.css	76 B
build/block-library/blocks/html/editor-rtl.css	327 B
build/block-library/blocks/html/editor.css	329 B
build/block-library/blocks/image/editor.css	873 B
build/block-library/blocks/image/style-rtl.css	627 B
build/block-library/blocks/image/style.css	630 B
build/block-library/blocks/image/theme-rtl.css	110 B
build/block-library/blocks/image/theme.css	110 B
build/block-library/blocks/latest-comments/style-rtl.css	284 B
build/block-library/blocks/latest-comments/style.css	284 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	463 B
build/block-library/blocks/latest-posts/style.css	462 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	266 B
build/block-library/blocks/media-text/editor.css	263 B
build/block-library/blocks/media-text/style-rtl.css	493 B
build/block-library/blocks/media-text/style.css	490 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	705 B
build/block-library/blocks/navigation-link/editor.css	703 B
build/block-library/blocks/navigation-link/style-rtl.css	115 B
build/block-library/blocks/navigation-link/style.css	115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation-submenu/view.min.js	423 B
build/block-library/blocks/navigation/view-modal.min.js	2.78 kB
build/block-library/blocks/navigation/view.min.js	443 B
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	363 B
build/block-library/blocks/page-list/editor.css	363 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	174 B
build/block-library/blocks/paragraph/editor.css	174 B
build/block-library/blocks/paragraph/style-rtl.css	260 B
build/block-library/blocks/paragraph/style.css	260 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	493 B
build/block-library/blocks/post-comments-form/style.css	493 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	73 B
build/block-library/blocks/post-excerpt/editor.css	73 B
build/block-library/blocks/post-excerpt/style-rtl.css	69 B
build/block-library/blocks/post-excerpt/style.css	69 B
build/block-library/blocks/post-featured-image/editor-rtl.css	507 B
build/block-library/blocks/post-featured-image/editor.css	505 B
build/block-library/blocks/post-featured-image/style-rtl.css	166 B
build/block-library/blocks/post-featured-image/style.css	166 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	282 B
build/block-library/blocks/post-template/style.css	282 B
build/block-library/blocks/post-terms/style-rtl.css	73 B
build/block-library/blocks/post-terms/style.css	73 B
build/block-library/blocks/post-title/style-rtl.css	80 B
build/block-library/blocks/post-title/style.css	80 B
build/block-library/blocks/preformatted/style-rtl.css	103 B
build/block-library/blocks/preformatted/style.css	103 B
build/block-library/blocks/pullquote/editor-rtl.css	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	326 B
build/block-library/blocks/pullquote/style.css	325 B
build/block-library/blocks/pullquote/theme-rtl.css	167 B
build/block-library/blocks/pullquote/theme.css	167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	282 B
build/block-library/blocks/query-pagination/style.css	278 B
build/block-library/blocks/query/editor-rtl.css	439 B
build/block-library/blocks/query/editor.css	439 B
build/block-library/blocks/quote/style-rtl.css	213 B
build/block-library/blocks/quote/style.css	213 B
build/block-library/blocks/quote/theme-rtl.css	223 B
build/block-library/blocks/quote/theme.css	226 B
build/block-library/blocks/read-more/style-rtl.css	132 B
build/block-library/blocks/read-more/style.css	132 B
build/block-library/blocks/rss/editor-rtl.css	202 B
build/block-library/blocks/rss/editor.css	204 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	165 B
build/block-library/blocks/search/editor.css	165 B
build/block-library/blocks/search/style-rtl.css	396 B
build/block-library/blocks/search/style.css	393 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	233 B
build/block-library/blocks/separator/style.css	233 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	464 B
build/block-library/blocks/shortcode/editor.css	464 B
build/block-library/blocks/site-logo/editor-rtl.css	455 B
build/block-library/blocks/site-logo/editor.css	455 B
build/block-library/blocks/site-logo/style-rtl.css	192 B
build/block-library/blocks/site-logo/style.css	192 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	84 B
build/block-library/blocks/site-title/editor.css	84 B
build/block-library/blocks/social-link/editor-rtl.css	184 B
build/block-library/blocks/social-link/editor.css	184 B
build/block-library/blocks/social-links/editor-rtl.css	674 B
build/block-library/blocks/social-links/editor.css	673 B
build/block-library/blocks/spacer/editor-rtl.css	322 B
build/block-library/blocks/spacer/editor.css	322 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	494 B
build/block-library/blocks/table/editor.css	494 B
build/block-library/blocks/table/style-rtl.css	611 B
build/block-library/blocks/table/style.css	609 B
build/block-library/blocks/table/theme-rtl.css	175 B
build/block-library/blocks/table/theme.css	175 B
build/block-library/blocks/tag-cloud/style-rtl.css	239 B
build/block-library/blocks/tag-cloud/style.css	239 B
build/block-library/blocks/template-part/editor-rtl.css	235 B
build/block-library/blocks/template-part/editor.css	235 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	87 B
build/block-library/blocks/verse/style.css	87 B
build/block-library/blocks/video/editor-rtl.css	561 B
build/block-library/blocks/video/editor.css	563 B
build/block-library/blocks/video/theme-rtl.css	110 B
build/block-library/blocks/video/theme.css	110 B
build/block-library/common-rtl.css	1.01 kB
build/block-library/common.css	1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/reset-rtl.css	478 B
build/block-library/reset.css	478 B
build/block-library/theme-rtl.css	695 B
build/block-library/theme.css	700 B
build/block-serialization-default-parser/index.min.js	1.11 kB
build/block-serialization-spec-parser/index.min.js	2.83 kB
build/compose/index.min.js	12 kB
build/customize-widgets/index.min.js	11.3 kB
build/customize-widgets/style-rtl.css	1.4 kB
build/customize-widgets/style.css	1.4 kB
build/data-controls/index.min.js	653 B
build/data/index.min.js	8.03 kB
build/date/index.min.js	32 kB
build/deprecated/index.min.js	507 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.69 kB
build/edit-navigation/index.min.js	16 kB
build/edit-navigation/style-rtl.css	4 kB
build/edit-navigation/style.css	4.01 kB
build/edit-post/classic-rtl.css	546 B
build/edit-post/classic.css	547 B
build/edit-post/style-rtl.css	6.94 kB
build/edit-post/style.css	6.94 kB
build/edit-site/style-rtl.css	8.22 kB
build/edit-site/style.css	8.2 kB
build/edit-widgets/style-rtl.css	4.35 kB
build/edit-widgets/style.css	4.35 kB
build/editor/index.min.js	41.5 kB
build/editor/style-rtl.css	3.66 kB
build/editor/style.css	3.65 kB
build/element/index.min.js	4.68 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	6.75 kB
build/format-library/style-rtl.css	571 B
build/format-library/style.css	571 B
build/hooks/index.min.js	1.64 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.77 kB
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.78 kB
build/list-reusable-blocks/index.min.js	1.74 kB
build/list-reusable-blocks/style-rtl.css	835 B
build/list-reusable-blocks/style.css	835 B
build/media-utils/index.min.js	2.93 kB
build/notices/index.min.js	953 B
build/nux/index.min.js	2.05 kB
build/nux/style-rtl.css	732 B
build/nux/style.css	728 B
build/plugins/index.min.js	1.94 kB
build/preferences-persistence/index.min.js	2.22 kB
build/preferences/index.min.js	1.3 kB
build/primitives/index.min.js	933 B
build/priority-queue/index.min.js	612 B
build/react-i18n/index.min.js	696 B
build/react-refresh-entry/index.min.js	8.44 kB
build/react-refresh-runtime/index.min.js	7.31 kB
build/redux-routine/index.min.js	2.74 kB
build/reusable-blocks/index.min.js	2.21 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	11.2 kB
build/server-side-render/index.min.js	1.61 kB
build/shortcode/index.min.js	1.53 kB
build/token-list/index.min.js	644 B
build/url/index.min.js	3.61 kB
build/vendors/react-dom.min.js	38.5 kB
build/vendors/react.min.js	4.34 kB
build/viewport/index.min.js	1.08 kB
build/warning/index.min.js	268 B
build/widgets/index.min.js	7.19 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.06 kB

_{compressed-size-action}

[getdave]

Whatever we do here has to include changes from https://github.com/WordPress/gutenberg/pull/42182 in order to ensure they work together.

[scruffian]

Some things I noticed, perhaps not related to this change or necessary to fix in this PR

1. When the fallback is a page list block, I can't select it in the editor
2. When I edit the block so that its using a navigation CPT, the template appears unedited in the editor:

I found this too: https://github.com/WordPress/gutenberg/issues/42856

[draganescu]

@scruffian the template part seems to pick up the changes for me:

https://user-images.githubusercontent.com/107534/182177319-737034d7-9129-467a-bd6b-e555e9077f1c.mp4

[scruffian]

If I have

• a navigation block in the header and another in the footer
• no navigation menus
• I set the header to use a classic menu
• the footer also gets updated to use the classic menu, because now I have a CPT

This feel unintuitive, but it also does make sense when you understand why....

[jasmussen]

Thanks for working on this. Took it for a quick spin and it looks like I need a little guidance on my local setup, and possibly I found a few small glitches.

It's a bit hard to discern what's going on, and this wasn't as pure a test as it should be since I had a lot of menus to delete. But:

• It looks like new menus are created when inserting fresh, or deleting a menu, as opposed to selecting an existing menu. Perhaps a separate issue?
• Deleting menus didn't appear to work as intended — deleting "Header navigation 3" appeared to create a duplicate of the same name, and then suddenly a new "Header navigation 2".

I'll see if I can get these menus deleted and try again.

[draganescu]

Addressed the feedback in f679f69. Will do a new round of review and fix/add tests

[jasmussen]

Took it for a spin, long GIF with description after:

Deleted all the menus, deleting goes to the fallback placeholder. After that, I inserted a new nav menu which fell back to the page list.

Instead of showing a placeholder, I'd still fall back to the "menu selection logic" which would load the first available menu when inserting fresh. But nothing that need block this PR (unless that's trivial to implement). Nice work 👏

A followup challenge is making it then easy to customize the Page List for when you want a custom menu (which can be a rabbit hole unless we're careful) — one thing we likely do need to fix is that right now you can't select the Page List child block unless you use the list view:

This is the case when the mobile responsive feature is enabled, and it looks like the "responsive container" intercepts the click. How best to fix this, I'm not sure — touching pointer-events always feels fragile 🤔

[scruffian]

This mostly looks good. ~The problem I see is that even when I have any wp_navigation post types the fallback is always to Page List. We could deal with that in a different PR though....~ This was a faulty test, sorry.

[scruffian]

LGTM (again!)

[draganescu]

Found a new bug while debugging tests: inserting two blocks when there are no menus (fallback on page list) automatically creates a new menu.

[draganescu]

I think the issue in https://github.com/WordPress/gutenberg/issues/43227 blocks the tests from passing because when using interactive if I click on the navigation block the pass is 100%. Sometimes the test seems to be stuck at the await waitForInserterCloseAndContentFocus(); in the insertBlock( searchTerm ) { helper and this did not happen before this PR.

[scruffian]

I pushed a commit (6c67ecd) which removes the "disabled" state of the block when there's an overlay. I hope this fixes https://github.com/WordPress/gutenberg/issues/43227. I don't think we need this state anymore.

[jasmussen]

🚀

[getdave]

@draganescu I think we need to ensure we add a dev note for this one. The change I wrote about here which got merged into this PR means that any Themes which include a Page List in their bundled template parts will cause their users to effectively "opt out" of the default fallback experience.

It's actually quite a significant change as many Themes have taken to including Page List in their Nav block inner blocks.

[draganescu]

Navigation Block Fallback Behavior in WP 6.1 Dev Note

In WordPress 6.1 the navigation block will have a new fallback behavior.

What is the fallback behavior?

When a theme uses a navigation block in a template part , the aim is to hint at where the navigation should visually be located, for the theme's UI to be consistent, usable and good looking. However, themes can't know beforehand what menus the site has, how many pages, what they're called and so on. For this reason, themes include a navigation block in template parts, but without knowing what content they'll show.

The fallback behavior is the small heuristics in the navigation block which tries to determine what the block should display, by default, when a user activates a theme.

What is the new fall back behavior?

Starting with WordPress 6.1, theme developers and authors can lean on the following fallback behavior of the block:

If the navigation block has inner blocks, it will honor them and display that. If it is empty however, then it will initialize the fallback behavior.

The fallback behavior (in both the editor and the front of the site) is:

• if there are no block menus or classic menus, the block will display a list of available pages using the Page List block.
• if there are multiple block menus, the navigation block will display the most recently created block menu.

The key changes can be summarised as follows:

1. Improved consistency.
2. Page List as default fallback.
3. Selecting the most recent block menu.

Consistency: previously the fallback behavior was not consistent between the front of the site and the editor. If a theme used an empty navigation block it would display a list of pages on the front, and an empty block in the editor. Now the behavior is consistent between both meaning that the editor mirrors what users see on the front.

Defaulting to page list: previously, themes which wanted to default to a page list in the editor usually included a page list inner block within the Navigation block. With this update this is no longer necessary, as the block, if empty, will automatically have  consistent front and editor behavior, eventually defaulting to a page list.

Selecting the most recent block menu: this part of the fallback behavior is new, in the event a site has multiple block menus, an empty navigation block will display the most recent one.

Notes

Display only.

The fallback behavior only affects what the empty navigation block will display. Unless the user edits the navigation block's default fallback, adding a link, changing a label, converting a page list block to a list of links or selecting another menu, the markup of the template part is not changed.

Default content is still honored.

There is no change to how navigation blocks with inner blocks from theme markup behave. Themes  still include inner blocks in the markup in the event they want to showcase a specific situation, for instance a small three links menu, pointing to #, with some restriction on length of link labels - this will continue to work, just like before, rendering the uncontrolled inner blocks both on the front and in the editor.

Props

Dave Smith (@getdave ) for editing and technical review.