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.

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

Use page list instead of placeholder as fallback #42735

Merged
merged 14 commits into from
Aug 22, 2022
Merged

Conversation

draganescu
Copy link
Contributor

@draganescu draganescu commented Jul 27, 2022

Closes #42563

  • Default to a page list block when the navigation block is empty and no menus exist
    • Add test for this
    • Update tests that assume empty nav defaults to placeholder
      • Update selectClassicMenu to pull the block toolbar instead of placeholder
    • Update the front end to default to a page list block when the navigation block is empty and no menus exist
  • Show "empty placeholder" when deleting the selected menu from the block
    • Add test for this
  • Default to the most recently created menu if multiple menus exist
    • Add test for this
  • Default to the only menu if only one menu exists
    • Add test for this
  • 🐛 deleting the fallback page list block results in a menu being created, i think this is correct for now
  • 🐛 inserting two blocks when there are no menus (fallback on page list) automatically creates a new menu
  • 🐛 responsive navigation blocks don't allow the fallback page list to be selected via mouse click, , opened Double click required for inner block selection #43227

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

@draganescu draganescu marked this pull request as draft July 27, 2022 12:49
@github-actions
Copy link

github-actions bot commented Jul 27, 2022

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

@draganescu draganescu requested review from getdave and removed request for tellthemachines July 27, 2022 13:17
@getdave
Copy link
Contributor

getdave commented Jul 27, 2022

Whatever we do here has to include changes from #42182 in order to ensure they work together.

@draganescu draganescu force-pushed the try/page-list-fallback branch from 3807343 to c4ce023 Compare July 29, 2022 13:58
@scruffian
Copy link
Contributor

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:

Screenshot 2022-08-01 at 14 19 49

I found this too: #42856

@draganescu
Copy link
Contributor Author

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

template-part-modified.mp4

@draganescu draganescu marked this pull request as ready for review August 1, 2022 14:54
Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for working on this tricky problem.

Screen.Capture.on.2022-08-01.at.16-19-18.mov

On first pass I wanted to stress test this PR by ignoring the instructions and just coming to it with no expectations.

❌ I opened the Post Editor and added a Nav block and I ended up in an unresolvable state with no way to select, create or add items to my menu. I had x4 Navigation Menu posts in the database when I did this.

✅ When I manually deleted all my Navigation Menus and then added a Nav block I was presented with a Page List.

✅ When I then saved that Navigation and then opened a new Post and added a new Navigation block, the block automatically selected the first Navigation menu.

❌ When I tried to create a new Navigation Menu via the Create new menu item nothing happened and I went back to an unresolvable state.


At this point I'd say there a few side effects and problems that we need to iron out. Given the complexity of the scope of the block's interactions, I often find that adding e2e tests helps me to keep track of avoiding regressions and also exposing edge cases. You might want to explore that.

PS: "unresolvable state" looks like this

Screenshot 2022-08-01 at 16 32 20

packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
@draganescu draganescu marked this pull request as draft August 2, 2022 13:20
@draganescu draganescu force-pushed the try/page-list-fallback branch from b781d7c to 5d91de2 Compare August 2, 2022 15:54
@scruffian
Copy link
Contributor

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....

@scruffian scruffian force-pushed the update/respect-uncontrolled-inner-blocks-on-nav-block-in-editor branch from ff5669f to 4c52005 Compare August 3, 2022 08:06
Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested this principally by creating x2 menus in Empty Theme and then switching to TT2.

  • Initially it rendered the most recent menu (both Editor and FoS)
  • I then manually deleted 1 of the x2 menus.
  • I then reloaded. It rendered the single menu (both Editor and FoS)
  • I then manually deleted the remaining menu.
  • It then rendered the Page List (both Editor and FoS).

This seems good. Will continue testing.

Missing e2e tests

We'll want/need to update the e2e tests to match the new functionality. I know @talldan is rewriting these in Playwright so that's going to cause some pain.

Issues

I did notice the following when testing in the Post editor:

Creating a Menu then deleting leaves empty block on front of site

I created a Menu and saved it. Then I deleted it and when back to the Editor. I saw the "your block is not longer available message" but on the front of the site there was no fallback displayed.

I created a new menu and saw permissions warning

Update: I've tried to fix this over here.

I deleted a menu and then refreshed the post. Editor showed me the msg to warn about deleted menu but when I click on the message it shows me a permissions warning.

Screen.Capture.on.2022-08-03.at.14-40-14.mp4

Empty Navigation renders empty on front end

I created a new menu and left it empty. Then I saved. I switched to the front of the site and I saw an empty menu. This is expected but the <nav> element was still rendered. Should it not rendering no block at all?

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some code stuff I noticed.

packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/edit/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.php Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.php Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.php Outdated Show resolved Hide resolved
@draganescu draganescu force-pushed the try/page-list-fallback branch from efcdb1e to 6072b40 Compare August 19, 2022 08:29
@scruffian
Copy link
Contributor

I pushed a commit (6c67ecd) which removes the "disabled" state of the block when there's an overlay. I hope this fixes #43227. I don't think we need this state anymore.

…eated block menu. also added a missing await in the test classic menu selecting function
@draganescu draganescu merged commit 2ddd3a7 into trunk Aug 22, 2022
@draganescu draganescu deleted the try/page-list-fallback branch August 22, 2022 12:57
@github-actions github-actions bot added this to the Gutenberg 14.0 milestone Aug 22, 2022
@jasmussen
Copy link
Contributor

🚀

@getdave
Copy link
Contributor

getdave commented Sep 22, 2022

@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.

@getdave getdave mentioned this pull request Sep 22, 2022
89 tasks
@draganescu
Copy link
Contributor Author

draganescu commented Sep 22, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Remove block placeholder in favour of list of Pages as fallback state
7 participants