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

Navigation: browse mode list all Navigation Menus. #50840

Merged
merged 11 commits into from
May 23, 2023

Conversation

getdave
Copy link
Contributor

@getdave getdave commented May 22, 2023

What?

Adds a list of all Navigation menus to the Browse Mode section of the Site Editor.

Obeys rule:

  • Only one menu - clicking through immediately shows that menu in list view mode.
  • Multiple menus - clicking through shows a list of menus. You can click on any menu to enter list view mode.

All menus are accessible directly via URL as is the listing screen.

Closes #50578

Also addresses part of #50579.

Why?

Address the part of the UX and Design shown in #50578. This part of the wider effort to add Navigation to the Browse mode.

How?

Creates dedicated components for listing all menus and showing a single menu.

Updates the main Browse Mode sidebar to use a special component for the Navigation button which will route according to the number of Navigation menus it finds (obeying the rules set out above).

Known Issues

  • Clicking through to individual menu seems to trigger a new API request which is unexpected as it should be in state already. We will fix this in a followup.
  • An individual menu takes a long time to load into the list view. This is because of the additional Nav block under the hood. We can replace this in a follow up as I don't believe it's required.

Testing Instructions

Throughout the testing below keep clicking back button and checking it routes you as expected.

  • Add 2 (or more) menus using a Nav block.
  • Open Site Editor.
  • See Navigation in Browse Mode and click it.
  • See you are routed to a listing of all menus. Check and copy the URL for reference.
  • Click on individual menu. Check you are navigated to a list view of that menu. Copy the URL for reference.
  • Click back.
  • Delete menus at http://localhost:8888/wp-admin/edit.php?post_type=wp_navigation&paged=1 such that you have a single menu remaining.
  • Load Site Editor.
  • Click on Navigation in Browse Mode.
  • See that you are routed directly to the list view for that menu without any intermediate "listing" view.
  • Delete all menus at http://localhost:8888/wp-admin/edit.php?post_type=wp_navigation&paged=1.
    • Check that loading the site editor gives you no Navigation option.
    • Check that going directly to menus listing by URL show appropriate message.
    • Check that going direct to single menu by URL shows appropriate message.

Testing Instructions for Keyboard

Screenshots or screencast

Screen.Capture.on.2023-05-22.at.13-49-57.mp4

@getdave getdave added the [Feature] Navigation in Site View Navigation section in the Site Editor when in Site View, offering a way to manage Navigation Menus a label May 22, 2023
@getdave getdave self-assigned this May 22, 2023
@getdave getdave force-pushed the add/nav-browse-mode-list-all-menus branch from 413b850 to 598b943 Compare May 22, 2023 11:04
@getdave getdave force-pushed the add/nav-browse-mode-list-all-menus branch from 598b943 to ef90205 Compare May 22, 2023 11:05
@github-actions
Copy link

github-actions bot commented May 22, 2023

Size Change: +440 B (0%)

Total Size: 1.4 MB

Filename Size Change
build/block-editor/index.min.js 198 kB +39 B (0%)
build/block-editor/style-rtl.css 15.1 kB -47 B (0%)
build/block-editor/style.css 15.1 kB -46 B (0%)
build/block-library/blocks/post-comments-form/style-rtl.css 508 B +7 B (+1%)
build/block-library/blocks/post-comments-form/style.css 508 B +7 B (+1%)
build/block-library/index.min.js 204 kB +43 B (0%)
build/block-library/style-rtl.css 12.9 kB +125 B (+1%)
build/block-library/style.css 12.9 kB +126 B (+1%)
build/commands/index.min.js 15 kB +3 B (0%)
build/components/index.min.js 232 kB +35 B (0%)
build/components/style-rtl.css 11.7 kB -17 B (0%)
build/components/style.css 11.7 kB -16 B (0%)
build/edit-site/index.min.js 64 kB +147 B (0%)
build/edit-site/style-rtl.css 10.5 kB +19 B (0%)
build/edit-site/style.css 10.5 kB +15 B (0%)
ℹ️ 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.33 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 472 B
build/block-directory/index.min.js 7.18 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.12 kB
build/block-editor/content.css 4.12 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 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 90 B
build/block-library/blocks/archives/style.css 90 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 126 B
build/block-library/blocks/audio/theme.css 126 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 91 B
build/block-library/blocks/avatar/style.css 91 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 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 409 B
build/block-library/blocks/columns/style.css 409 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 199 B
build/block-library/blocks/comment-template/style.css 198 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 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 159 B
build/block-library/blocks/details/style.css 159 B
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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 375 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/freeform/style-rtl.css 246 B
build/block-library/blocks/freeform/style.css 246 B
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 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 654 B
build/block-library/blocks/group/editor.css 654 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 652 B
build/block-library/blocks/image/style.css 652 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 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 478 B
build/block-library/blocks/latest-posts/style.css 478 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 507 B
build/block-library/blocks/media-text/style.css 505 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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/editor-rtl.css 2.33 kB
build/block-library/blocks/navigation/editor.css 2.33 kB
build/block-library/blocks/navigation/interactivity.min.js 865 B
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 279 B
build/block-library/blocks/paragraph/style.css 281 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-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 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 281 B
build/block-library/blocks/post-template/style.css 281 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 434 B
build/block-library/blocks/search/style.css 432 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 234 B
build/block-library/blocks/separator/style.css 234 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 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/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12 kB
build/block-library/editor.css 12 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/interactivity/runtime.min.js 2.23 kB
build/block-library/interactivity/vendors.min.js 8.15 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/compose/index.min.js 12.4 kB
build/core-commands/index.min.js 1.8 kB
build/core-data/index.min.js 16.5 kB
build/customize-widgets/index.min.js 12.2 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 708 B
build/data/index.min.js 8.68 kB
build/date/index.min.js 40.5 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.72 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 35.2 kB
build/edit-post/style-rtl.css 7.76 kB
build/edit-post/style.css 7.75 kB
build/edit-widgets/index.min.js 17.3 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 45.8 kB
build/editor/style-rtl.css 3.54 kB
build/editor/style.css 3.53 kB
build/element/index.min.js 4.89 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.77 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.73 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.91 kB
build/list-reusable-blocks/index.min.js 2.14 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.97 kB
build/notices/index.min.js 963 B
build/plugins/index.min.js 1.85 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.33 kB
build/primitives/index.min.js 944 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 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.25 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 11 kB
build/router/index.min.js 1.78 kB
build/server-side-render/index.min.js 2.08 kB
build/shortcode/index.min.js 1.42 kB
build/style-engine/index.min.js 1.52 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.65 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.28 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented May 22, 2023

Flaky tests detected in 84c4e94.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5045996147
📝 Reported issues:

@getdave getdave marked this pull request as ready for review May 22, 2023 12:59
@getdave getdave requested a review from scruffian May 22, 2023 13:02
@getdave getdave assigned getdave and unassigned getdave May 22, 2023
@scruffian scruffian requested review from jeryj and ajlende May 22, 2023 14:14
@scruffian
Copy link
Contributor

This looks like a good start. I think that when you select a navigation we should update the preview to show only that navigation, but we can do that in #50579.

) {
history.push( {
postType: attributes.type,
postId: attributes.id,
Copy link
Contributor

Choose a reason for hiding this comment

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

What do you think about using slug instead of ID? Is that possible?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Possibly. In this PR though?

Copy link
Contributor

Choose a reason for hiding this comment

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

Happy for it to be a followup, but remember once people start using these permalinks we have to support them so it would be good to look into it before the next Gutenberg release.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm going to look at the routing again and see what we have available.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thinking about this more, since pages already use IDs, I think it's fine for navigations to do the same

@getdave
Copy link
Contributor Author

getdave commented May 22, 2023

This looks like a good start.

@scruffian Thanks for the review. What makes you think this isn't ready to merge already? Is there anything you noticed that would block that?

@jasmussen
Copy link
Contributor

Nice one.

Instead of saying "Loading navigation menu." can it just show a spinner? In general whenever something is loading, we should either show nothing (assuming the loading is fast), the spinner, or even the spinner after a small delay in case it finishes loading before that.

The left spacing of the nav menu here is a little off. I'm assuming that's the list view leaving room for nested chevrons?

Screenshot 2023-05-23 at 09 02 43

We might want to massage that, can happen separately. I know @jameskoster has some detail page designs for this.

I would echo Ben, that when you select an individual menu to load, we need to load in the preview just that one menu. Whether that happens here or later, I'll defer to you.

@getdave
Copy link
Contributor Author

getdave commented May 23, 2023

Thanks for the review @jasmussen.

Instead of saying "Loading navigation menu." can it just show a spinner? In general whenever something is loading, we should either show nothing (assuming the loading is fast), the spinner, or even the spinner after a small delay in case it finishes loading before that.

Yes we can change that. Noted as a pattern for future reference.

The left spacing of the nav menu here is a little off. I'm assuming that's the list view leaving room for nested chevrons?

Yeh I also noted that and you're right it is due to the need to maintain space for chevrons. Happy to receive additional input on this design-wise and tackle in a followup.

I would echo Ben, that when you select an individual menu to load, we need to load in the preview just that one menu. Whether that happens here or later, I'll defer to you.

Agreed. We'll have to do it in a follow up because we currently don't have any way to load an individual menu in focus mode until we actually do the work to implement a focus mode 😅 I'm planning to look at this next.

Update: also I've fixed things so that the menus query is now always preloaded which means you rarely see the spinner. There is an unrelated bug which causes a spinner for the single menu view but that's something for a followup.

@getdave getdave removed the request for review from spacedmonkey May 23, 2023 08:19
Copy link
Contributor

@MaggieCabrera MaggieCabrera left a comment

Choose a reason for hiding this comment

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

This is testing very nicely and looks solid as far as my understanding goes

@getdave getdave enabled auto-merge (squash) May 23, 2023 08:38
@getdave getdave merged commit 28c6f58 into trunk May 23, 2023
@getdave getdave deleted the add/nav-browse-mode-list-all-menus branch May 23, 2023 09:05
@github-actions github-actions bot added this to the Gutenberg 15.9 milestone May 23, 2023
@scruffian
Copy link
Contributor

Is there anything you noticed that would block that?

No, happy for this to be merged and then follow up in future PRs with more changes :)

@cbravobernal cbravobernal changed the title Nav browse mode list all Navigation Menus Navigation: browse mode list all Navigation Menus. May 26, 2023
@ramonjd ramonjd added the Needs PHP backport Needs PHP backport to Core label Jun 5, 2023
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jun 14, 2023

// If there is a single menu then we can go directly to that menu.
// Otherwise we go to the navigation listing screen.
const path = hasSingleNavigationMenu
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not sure it's wise to do this (change the path depending on the number of menus). This creates an issue because now the "parent" of the navigation is "hidden". so for instance if you go to "navigation" and you click "back" you don't end up in the root place.

I wonder if the best solution is to instead of doing this, change the behavior within the /navigation screen to actually render the menu directly when there's one.

Copy link
Contributor

Choose a reason for hiding this comment

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

Also, another unwanted side effect of this is that in any place where we want to "navigate" to the "navigation" screen, we need to make the same check over and over again (check if there's a single menu and change the destination path). For instance I'm working on the command center and there's no way for me to add a link to "navigation" by just setting a path, I need to duplicate this code there too.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's a good point. I don't want to expose the need to duplicate that logic. Thank you for spotting it.

I think I had that functionality initially but the issue was that I needed a dedicated route for a single Navigation. That is a requirement for Nav Focus mode.

That said, if we accept the above, then we could also make the navigation listing route conditionally display

  • the list of menus
  • a single menu if there's only one

As long as we still retain the single route that would be good.

I'll raise an Issue

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Navigation in Site View Navigation section in the Site Editor when in Site View, offering a way to manage Navigation Menus a Needs User Documentation Needs new user documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation on Browse Mode: List all navigations
7 participants