Skip to content

Conversation

getdave
Copy link
Contributor

@getdave getdave commented Aug 8, 2025

What

This is a PROTOTYPE exploring an alternative UX approach for Navigation blocks in Write Mode, different from the approach in #70977.

Instead of making Navigation block children directly editable in the canvas, this prototype explores a Content Panel → List View workflow where:

  1. Users click on "Header Navigation" in the Content panel of a section block
  2. This selects the Navigation block and shows its inspector controls
  3. The inspector displays the List View tab for menu editing
  4. Child blocks of Navigation blocks are disabled from direct editing

Closes #65699

Why

This explores an alternative to the direct canvas editing approach in #70977. The goal is to provide a more structured menu editing experience while maintaining Write Mode's content-focused philosophy.

How

  • Modified block inspector logic to show Navigation block controls when selected from Content panel
  • Added chevron icon to Navigation blocks in Content panel to indicate clickable behavior
  • Updated back button logic to navigate to parent section when in contentOnly mode
  • HACK: Force disabled editing for child blocks of Navigation blocks

Testing

  1. Enable Write Mode in Gutenberg experiments
  2. Add a Navigation block to a section
  3. Click "Header Navigation" in the section's Content panel
  4. Verify Navigation block inspector shows with List View tab
  5. Verify child blocks are not editable in canvas
  6. Test back button navigation

Screenshots

Screen.Capture.on.2025-08-12.at.12-04-08.mp4

Prototype Hacks and Limitations

⚠️ This is a prototype with several hacks that would need proper APIs if pursued:

Hacks Implemented:

Block Inspector Override: Modified to show Navigation block inspector instead of Content panel when Navigation block is selected

  • Proper Solution: Would need a proper API for blocks to register custom inspector behaviors

Content Panel Click Behavior: Added chevron icon and click-through logic in

  • Proper Solution: Would need a proper system for blocks to define custom Content panel interactions

Back Button Logic: Modified to navigate to parent section for Navigation blocks in contentOnly mode

  • Proper Solution: Would need a proper API for blocks to define custom navigation behaviors

UI State Management: Multiple properties updated to respect the disabled state (, , , etc.)

  • Proper Solution: Would need a unified system for managing block editing states

Overlay ("Click through"): added nav block specific condition

  • Proper Solution: consider a supports.__experimentalForceBlockOverlay which blocks can use to opt into overlay even when in contentOnly.

Why These Are Hacks:

  • Hard-coded block names: Uses string comparisons
  • UI layer modifications: Changes inspector behavior at the UI level rather than through proper APIs
  • State overrides: Forces editing modes without proper block-level configuration
  • Tight coupling: Creates dependencies between different components that should be loosely coupled

What Would Be Needed for Production:

  1. Block Configuration API: Allow blocks to define their Content panel behavior
  2. Inspector Customization API: Allow blocks to define custom inspector layouts
  3. Child Block Management API: Allow blocks to define which children are editable vs. managed
  4. Navigation Behavior API: Allow blocks to define custom back/forward navigation
  5. State Management System: Unified system for managing block editing states

Alternative Approach

This prototype explores a different UX than #70977:

Both approaches have merit and this prototype helps evaluate the trade-offs between direct editing vs. structured menu management.

Next Steps

This prototype is for feedback and discussion. If this UX direction is pursued, the hacks would need to be replaced with proper APIs and systems.

Copy link

github-actions bot commented Aug 8, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@getdave getdave changed the title PROTOTYPE: Alternative Navigation Block Write Mode UX via Content Panel Explore Alternative Navigation Block Write Mode UX via Content Panel Aug 8, 2025
@getdave getdave requested a review from scruffian August 8, 2025 11:36
Copy link

github-actions bot commented Aug 8, 2025

Size Change: +1.9 kB (+0.1%)

Total Size: 1.94 MB

Filename Size Change
build/block-editor/index.min.js 267 kB +279 B (+0.1%)
build/block-library/blocks/navigation-link/editor-rtl.css 665 B +40 B (+6.4%) 🔍
build/block-library/blocks/navigation-link/editor.css 668 B +40 B (+6.37%) 🔍
build/block-library/editor-rtl.css 11.5 kB +18 B (+0.16%)
build/block-library/editor.css 11.5 kB +19 B (+0.16%)
build/block-library/index.min.js 238 kB +1.5 kB (+0.64%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 482 B
build-module/block-library/accordion/view.min.js 427 B
build-module/block-library/file/view.min.js 466 B
build-module/block-library/form/view.min.js 533 B
build-module/block-library/image/view.min.js 1.78 kB
build-module/block-library/navigation/view.min.js 1.19 kB
build-module/block-library/query/view.min.js 767 B
build-module/block-library/search/view.min.js 639 B
build-module/interactivity-router/full-page.min.js 565 B
build-module/interactivity-router/index.min.js 11.4 kB
build-module/interactivity/debug.min.js 17.6 kB
build-module/interactivity/index.min.js 14 kB
build/a11y/index.min.js 925 B
build/annotations/index.min.js 2.13 kB
build/api-fetch/index.min.js 2.41 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.18 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.43 kB
build/block-editor/content.css 4.42 kB
build/block-editor/default-editor-styles-rtl.css 392 B
build/block-editor/default-editor-styles.css 392 B
build/block-editor/style-rtl.css 15.9 kB
build/block-editor/style.css 15.9 kB
build/block-library/blocks/accordion/style-rtl.css 573 B
build/block-library/blocks/accordion/style.css 573 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 61 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 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 265 B
build/block-library/blocks/button/editor.css 265 B
build/block-library/blocks/button/style-rtl.css 554 B
build/block-library/blocks/button/style.css 554 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 349 B
build/block-library/blocks/buttons/style.css 349 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 132 B
build/block-library/blocks/categories/editor.css 131 B
build/block-library/blocks/categories/style-rtl.css 152 B
build/block-library/blocks/categories/style.css 152 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 139 B
build/block-library/blocks/code/style.css 139 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 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 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-author-name/style-rtl.css 72 B
build/block-library/blocks/comment-author-name/style.css 72 B
build/block-library/blocks/comment-content/style-rtl.css 120 B
build/block-library/blocks/comment-content/style.css 120 B
build/block-library/blocks/comment-date/style-rtl.css 65 B
build/block-library/blocks/comment-date/style.css 65 B
build/block-library/blocks/comment-edit-link/style-rtl.css 70 B
build/block-library/blocks/comment-edit-link/style.css 70 B
build/block-library/blocks/comment-reply-link/style-rtl.css 71 B
build/block-library/blocks/comment-reply-link/style.css 71 B
build/block-library/blocks/comment-template/style-rtl.css 191 B
build/block-library/blocks/comment-template/style.css 191 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 168 B
build/block-library/blocks/comments-pagination/editor.css 168 B
build/block-library/blocks/comments-pagination/style-rtl.css 201 B
build/block-library/blocks/comments-pagination/style.css 201 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 842 B
build/block-library/blocks/comments/editor.css 842 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 637 B
build/block-library/blocks/cover/editor-rtl.css 631 B
build/block-library/blocks/cover/editor.css 631 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 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 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 331 B
build/block-library/blocks/embed/editor.css 331 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 278 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 366 B
build/block-library/blocks/form-input/style.css 366 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/freeform/editor-rtl.css 2.59 kB
build/block-library/blocks/freeform/editor.css 2.59 kB
build/block-library/blocks/gallery/editor-rtl.css 615 B
build/block-library/blocks/gallery/editor.css 616 B
build/block-library/blocks/gallery/style-rtl.css 1.83 kB
build/block-library/blocks/gallery/style.css 1.83 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 334 B
build/block-library/blocks/group/editor.css 334 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 353 B
build/block-library/blocks/html/editor.css 354 B
build/block-library/blocks/image/editor-rtl.css 763 B
build/block-library/blocks/image/editor.css 763 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 139 B
build/block-library/blocks/latest-posts/editor.css 138 B
build/block-library/blocks/latest-posts/style-rtl.css 520 B
build/block-library/blocks/latest-posts/style.css 520 B
build/block-library/blocks/list/style-rtl.css 107 B
build/block-library/blocks/list/style.css 107 B
build/block-library/blocks/loginout/style-rtl.css 61 B
build/block-library/blocks/loginout/style.css 61 B
build/block-library/blocks/media-text/editor-rtl.css 321 B
build/block-library/blocks/media-text/editor.css 320 B
build/block-library/blocks/media-text/style-rtl.css 543 B
build/block-library/blocks/media-text/style.css 542 B
build/block-library/blocks/more/editor-rtl.css 393 B
build/block-library/blocks/more/editor.css 393 B
build/block-library/blocks/navigation-link/style-rtl.css 190 B
build/block-library/blocks/navigation-link/style.css 188 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.23 kB
build/block-library/blocks/navigation/editor.css 2.24 kB
build/block-library/blocks/navigation/style-rtl.css 2.27 kB
build/block-library/blocks/navigation/style.css 2.26 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 356 B
build/block-library/blocks/page-list/editor.css 356 B
build/block-library/blocks/page-list/style-rtl.css 192 B
build/block-library/blocks/page-list/style.css 192 B
build/block-library/blocks/paragraph/editor-rtl.css 251 B
build/block-library/blocks/paragraph/editor.css 251 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author-biography/style-rtl.css 74 B
build/block-library/blocks/post-author-biography/style.css 74 B
build/block-library/blocks/post-author-name/style-rtl.css 69 B
build/block-library/blocks/post-author-name/style.css 69 B
build/block-library/blocks/post-author/style-rtl.css 188 B
build/block-library/blocks/post-author/style.css 189 B
build/block-library/blocks/post-comments-count/style-rtl.css 72 B
build/block-library/blocks/post-comments-count/style.css 72 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 525 B
build/block-library/blocks/post-comments-form/style.css 525 B
build/block-library/blocks/post-comments-link/style-rtl.css 71 B
build/block-library/blocks/post-comments-link/style.css 71 B
build/block-library/blocks/post-content/style-rtl.css 61 B
build/block-library/blocks/post-content/style.css 61 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 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 155 B
build/block-library/blocks/post-excerpt/style.css 155 B
build/block-library/blocks/post-featured-image/editor-rtl.css 715 B
build/block-library/blocks/post-featured-image/editor.css 712 B
build/block-library/blocks/post-featured-image/style-rtl.css 347 B
build/block-library/blocks/post-featured-image/style.css 347 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/style-rtl.css 414 B
build/block-library/blocks/post-template/style.css 414 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 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 162 B
build/block-library/blocks/post-title/style.css 162 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 133 B
build/block-library/blocks/pullquote/editor.css 133 B
build/block-library/blocks/pullquote/style-rtl.css 365 B
build/block-library/blocks/pullquote/style.css 365 B
build/block-library/blocks/pullquote/theme-rtl.css 176 B
build/block-library/blocks/pullquote/theme.css 176 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 154 B
build/block-library/blocks/query-pagination/editor.css 154 B
build/block-library/blocks/query-pagination/style-rtl.css 237 B
build/block-library/blocks/query-pagination/style.css 237 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query-total/style-rtl.css 64 B
build/block-library/blocks/query-total/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 432 B
build/block-library/blocks/query/editor.css 432 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 236 B
build/block-library/blocks/read-more/style-rtl.css 131 B
build/block-library/blocks/read-more/style.css 131 B
build/block-library/blocks/rss/editor-rtl.css 126 B
build/block-library/blocks/rss/editor.css 126 B
build/block-library/blocks/rss/style-rtl.css 284 B
build/block-library/blocks/rss/style.css 283 B
build/block-library/blocks/search/editor-rtl.css 199 B
build/block-library/blocks/search/editor.css 199 B
build/block-library/blocks/search/style-rtl.css 665 B
build/block-library/blocks/search/style.css 666 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 773 B
build/block-library/blocks/site-logo/editor.css 770 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-tagline/style-rtl.css 65 B
build/block-library/blocks/site-tagline/style.css 65 B
build/block-library/blocks/site-title/editor-rtl.css 85 B
build/block-library/blocks/site-title/editor.css 85 B
build/block-library/blocks/site-title/style-rtl.css 143 B
build/block-library/blocks/site-title/style.css 143 B
build/block-library/blocks/social-link/editor-rtl.css 314 B
build/block-library/blocks/social-link/editor.css 314 B
build/block-library/blocks/social-links/editor-rtl.css 339 B
build/block-library/blocks/social-links/editor.css 338 B
build/block-library/blocks/social-links/style-rtl.css 1.51 kB
build/block-library/blocks/social-links/style.css 1.51 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 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-of-contents/style-rtl.css 83 B
build/block-library/blocks/table-of-contents/style.css 83 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/editor-rtl.css 92 B
build/block-library/blocks/tag-cloud/editor.css 92 B
build/block-library/blocks/tag-cloud/style-rtl.css 248 B
build/block-library/blocks/tag-cloud/style.css 248 B
build/block-library/blocks/template-part/editor-rtl.css 368 B
build/block-library/blocks/template-part/editor.css 368 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 126 B
build/block-library/blocks/term-description/style.css 126 B
build/block-library/blocks/term-template/editor-rtl.css 225 B
build/block-library/blocks/term-template/editor.css 225 B
build/block-library/blocks/term-template/style-rtl.css 135 B
build/block-library/blocks/term-template/style.css 135 B
build/block-library/blocks/terms-query/style-rtl.css 70 B
build/block-library/blocks/terms-query/style.css 70 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 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 413 B
build/block-library/blocks/video/editor.css 414 B
build/block-library/blocks/video/style-rtl.css 202 B
build/block-library/blocks/video/style.css 202 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.08 kB
build/block-library/common.css 1.08 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 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 15.4 kB
build/block-library/style.css 15.4 kB
build/block-library/theme-rtl.css 715 B
build/block-library/theme.css 719 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.7 kB
build/commands/index.min.js 16.3 kB
build/commands/style-rtl.css 956 B
build/commands/style.css 953 B
build/components/index.min.js 252 kB
build/components/style-rtl.css 13.7 kB
build/components/style.css 13.7 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 3.58 kB
build/core-data/index.min.js 74.9 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.43 kB
build/customize-widgets/style.css 1.43 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.7 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 577 B
build/edit-post/classic.css 578 B
build/edit-post/index.min.js 13.4 kB
build/edit-post/style-rtl.css 2.69 kB
build/edit-post/style.css 2.69 kB
build/edit-site/index.min.js 239 kB
build/edit-site/posts-rtl.css 9.35 kB
build/edit-site/posts.css 9.35 kB
build/edit-site/style-rtl.css 15.4 kB
build/edit-site/style.css 15.4 kB
build/edit-widgets/index.min.js 17.8 kB
build/edit-widgets/style-rtl.css 4.05 kB
build/edit-widgets/style.css 4.06 kB
build/editor/index.min.js 133 kB
build/editor/style-rtl.css 9.2 kB
build/editor/style.css 9.21 kB
build/element/index.min.js 4.86 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.23 kB
build/format-library/style-rtl.css 472 B
build/format-library/style.css 472 B
build/hooks/index.min.js 1.65 kB
build/html-entities/index.min.js 467 B
build/i18n/index.min.js 2.23 kB
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.32 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 847 B
build/list-reusable-blocks/style.css 848 B
build/media-utils/index.min.js 3.69 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.62 kB
build/nux/style-rtl.css 767 B
build/nux/style.css 763 B
build/patterns/index.min.js 7.36 kB
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.87 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 562 B
build/preferences/style.css 562 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 978 B
build/react-i18n/index.min.js 640 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/index.min.js 2.53 kB
build/reusable-blocks/style-rtl.css 255 B
build/reusable-blocks/style.css 255 B
build/rich-text/index.min.js 12.2 kB
build/router/index.min.js 5.47 kB
build/server-side-render/index.min.js 1.6 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.04 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.97 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react-jsx-runtime.min.js 556 B
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 965 B
build/vips/index.min.js 36.2 kB
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 1bac4f9 to 8a971b4 Compare August 8, 2025 13:42
@t-hamano t-hamano added [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible [Block] Navigation Affects the Navigation Block labels Aug 9, 2025
@scruffian
Copy link
Contributor

scruffian commented Aug 13, 2025

Some more ideas to try:

  • When the sidebar is already open, the hanging “edit navigation” feels like a broken button. Let's change it to “add new page” in this case.
  • The “+ add block” inside the link / inserter is confusing, because the user has already added a block by clicking a [+] button. Should it say "Add another block" instead?
  • Add a “go to this page” link to the inspector panel when a link is selected .

@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 1954e7b to 633b200 Compare August 13, 2025 11:21
@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 633b200 to 61171c2 Compare August 15, 2025 08:20
@getdave
Copy link
Contributor Author

getdave commented Aug 15, 2025

Idea for implementing the "let's treat the Nav block inner blocks as content" is outlined here #52018.

I don't think the inner blocks should be active unless they themselves pass the role: content test.

@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 61171c2 to 2f6d705 Compare September 1, 2025 09:33
@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 2f6d705 to a135eb4 Compare September 4, 2025 12:31
@getdave
Copy link
Contributor Author

getdave commented Sep 4, 2025

I've updated this PR to revert the code that disabled sub blocks of the Nav block. This temporarily regresses the UX until we add the "overlay" / "click through" behaviour to the Nav block.

The UX I am envisioning is

  • user clicks anywhere in Nav block
  • Nav block is selected (you cannot select a child)
  • User sees Add page button in the toolbar
  • User can choose to either click that button or select a Nav item.

The key facet is that the complexity of the "Nav Item" blocks should be hidden from you initially in contentOnly. It should guide you towards the most simple path (adding a page).

@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from d417292 to 8008e87 Compare September 4, 2025 13:05
@getdave getdave changed the title Explore Alternative Navigation Block Write Mode UX via Content Panel Explore Navigation Block Write Mode UX via Content Panel Sep 5, 2025
Copy link
Contributor Author

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

Bringing over this feedback from @annezazu from the other PR:

Tested this out and have a few items of feedback:

I found it odd I couldn't delete a menu item but I could add one. I'd expect to be able to remove items.

The bold, italics, etc feel out of place to include here as we'd want folks styling their menu holistically. I think we can remove from the default experience but am curious why it was included in the first place.

I wonder how clearly editable these items are without anything showing up in the block settings. At a glance, it feels hard to tell that you can just directly get in there and item things compared to the alternative approach you've worked on.

@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 56b1dba to 48641ab Compare September 5, 2025 10:00
@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 48641ab to 87252d4 Compare September 5, 2025 12:28
@getdave
Copy link
Contributor Author

getdave commented Sep 11, 2025

Let's rebase this and bring in the contentRole: true from #71539 on the Nav block itself. As a result we can remove the role: content on the ref attribute in this PR.

This change makes navigation menu item labels editable in Write Mode by adding role: 'content' to the label attribute for both core/navigation-link and core/navigation-submenu blocks.

This allows users to:
- Edit menu item text/labels in Write Mode
- Maintain the content-focused editing experience
- Keep layout and styling controls disabled in Write Mode

Part of the Navigation Block Write Mode improvements.
This change treats Navigation blocks like Template Parts in Write Mode by giving them 'contentOnly' editing mode when outside of sections.

This allows Navigation blocks to be selectable and editable in Write Mode while maintaining the content-focused editing experience, similar to how Template Parts work.
…panel

- Modified block inspector logic to show Navigation block controls when selected
- Added condition to check for 'core/navigation' block type
- Ensures Navigation block inspector is shown instead of parent section block
- Enables direct access to Navigation block's List View tab from Content panel
- Import chevronRight icon from @wordpress/icons
- Add blockName detection to BlockQuickNavigationItem
- Show chevron icon only for 'core/navigation' blocks
- Provides visual indication that Navigation blocks have click-through behavior
- Add logic to detect when Navigation block is in contentOnly mode
- When in contentOnly mode, back button targets parent section instead of parent Navigation block
- Use getParentSectionBlock() to find the nearest section block
- Maintain existing behavior for other Navigation block contexts
- Improves navigation flow when editing Navigation blocks from Content panel
- Add buttonLabel logic to useSelect hook
- When in contentOnly mode: 'Go to parent section'
- When in normal mode: 'Go to parent Navigation block'
- Use dynamic buttonLabel in Button component
- Provides clear context about where the back button will navigate
…logic to check if current block is a child of a Navigation block\n- Use getBlockParentsByBlockName to find Navigation block parents\n- Force blockEditingMode to 'disabled' for Navigation block children\n- Ensures child blocks of Navigation blocks cannot be edited directly\n- Maintains existing editing behavior for all other blocks
This is a prototype hack to prevent direct editing of Navigation block children
while still allowing them to be selectable and managed through the Navigation
block's List View interface.

## What this hack does:

1. **Detection**: Uses getBlockParentsByBlockName() to check if the current
   block has any 'core/navigation' block parents

2. **Override**: If a block is a child of a Navigation block, forces its
   blockEditingMode to 'disabled' regardless of other editing mode logic

3. **UI Control**: Updates multiple properties to respect the disabled state:
   - blockEditingMode: Set to 'disabled' for Navigation children
   - isSubtreeDisabled: Disables the entire subtree
   - isEditingDisabled: Prevents editing interactions
   - hasEditableOutline: Removes editable outline styling
   - mayDisplayControls: Hides editing controls

## Why this hack is needed:

The Navigation block's child blocks (navigation links, submenus) have
role: 'content' attributes which would normally make them editable in
Write Mode. However, for the Navigation block UX, we want these children
to be managed through the Navigation block's List View interface rather
than being directly editable in the canvas.

## Limitations:

- This is a prototype solution that may need refinement
- Only affects direct children of Navigation blocks
- May need additional logic for deeper nesting scenarios
- Could be replaced with a more elegant solution in the future
- Add Edit navigation button to Template Part blocks when Navigation blocks are present
- Button only shows in contentOnly mode and selects first Navigation block
- Disambiguate button labels: Edit template part vs Edit navigation
- Update Navigation block Edit button to use sentence case for consistency
- Fix enableComplementaryArea import from interfaceStore
- Change button label from 'Edit template part' to 'Edit {Title}'
- Use template part entity title (e.g., 'Edit Header', 'Edit Footer')
- Fall back to 'Edit template part' if no title is available
- Maintain existing functionality for Navigation editing
- Wrap each button in ToolbarGroup components for proper visual separation
- Use standard WordPress UI components (ToolbarGroup) instead of custom CSS
- Maintain existing functionality while improving visual organization
- Follow WordPress design system best practices
- Replace ToolbarGroup approach with different BlockControls group props
- Use group='block' for Template Part Edit button and group='other' for Navigation Edit button
- WordPress automatically adds visual separators between different groups
- Add documentation comment explaining the prototype hack approach
- Maintain existing functionality while improving visual organization
- Convert template part titles to lowercase for consistent sentence case
- Button now shows 'Edit header' instead of 'Edit Header'
- Maintains fallback to 'Edit template part' when no title is available
- Improves visual consistency with other button labels
@getdave getdave force-pushed the feature/navigation-content-panel-list-view branch from 602232e to fc1f1c9 Compare September 11, 2025 09:02
@getdave getdave changed the title Explore Navigation Block Write Mode UX via Content Panel Explore Navigation Block contentOnly mode UX via Content Panel Sep 11, 2025
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 [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation Block: develop a content-only representation
3 participants