Skip to content

Navigation Link: Use block bindings to dynamically fetch the URL in the editor and on front end. #71630

Merged
getdave merged 22 commits intotrunkfrom
feature/navigation-link-block-bindings
Oct 3, 2025
Merged

Navigation Link: Use block bindings to dynamically fetch the URL in the editor and on front end. #71630
getdave merged 22 commits intotrunkfrom
feature/navigation-link-block-bindings

Conversation

@getdave
Copy link
Contributor

@getdave getdave commented Sep 12, 2025

What

This PR improves the Navigation Link block in two key ways:

  • makes Navigation Link blocks' URL attribute dynamic if the link is to an entity (e.g. Page, Post...etc) using the Block Bindings API
  • makes it clear when a Nav Link block is linking to an entity vs a static URL through improved UI indicators

Closes #18345

Why

The Core Problem

The Navigation Link block has never dynamically fetched URLs for linked entities (e.g. Pages, Posts):

  • When a user selects a Page/Post in the Editor, the block stores:
    • id: the ID of the entity.
    • url: a static copy of the permalink at that time.
  • This url remains fixed — even if the entity's actual permalink changes later.
  • Critically, the front end also uses this static URL. There is no dynamic lookup on render, which was previously assumed.

This means:

  • If you change a page's URL (e.g. change the slug), existing Nav Links break silently.
  • There is a false sense of safety — users believe they are linking to an entity, but the system never tracks or updates the link.

Why This Is a Major Usability Issue

  1. WYSIWYG Mismatch

    • Editor shows outdated links.
    • Front end shows exactly the same outdated links.
    • This contradicts user expectations and introduces subtle bugs.
  2. Invisible Link Types

    • There's no visual difference between a link to a Page and a manually entered static URL.
    • Users can't tell if their link is "safe" (entity-bound) or "fragile" (static).
  3. Poor Content Resilience

    • If you rename or move content, your menus don't adapt.
    • This leads to 404s and broken navigation — especially problematic on large or client-managed sites.

How

Using the Block Bindings API, we bind the url attribute of the block to the entity represented by the id attribute of the block through a new core/entity binding source.

Key implementation details:

  • Created a generic core/entity binding source that uses source_args['key'] to determine which property to return (e.g., url)
  • Updated the Navigation Link block to automatically create bindings when an entity is selected
  • Enhanced the LinkControl UI to clearly indicate when a link is bound to an entity
  • Disabled manual URL editing for bound links with an "unlink" option to break the binding
  • Updated PHP rendering to use the Block Bindings API for automatic URL resolution

This creates a unified approach between editor and frontend, with clear visual indicators for dynamic vs static links.

Note: After discussion with subject matter experts (@ockham and @cbravobernal), we agreed to implement a generic core/entity binding source for now. @ockham will investigate the possibility of normalizing this with existing data sources in the future.

Proposed Followups

The following items are being pushed to immediate follow ups:

  • update design to follow mockups in this comment
  • automatically update the Text content of the Nav Link item to match the chosen entity. This is the most likely workflow.
  • update the Submenu block to match the implementation. Requires a quick refactor to align and share code between the blocks first to make this refactor easier.
  • remove entity block binding and utilise existing post-data and term-data bindings once they have been made more extensible (see this comment)
  • Avoid using state to manage focus

@github-actions
Copy link

github-actions bot commented Sep 12, 2025

Size Change: +972 B (+0.05%)

Total Size: 1.96 MB

Filename Size Change
build/block-editor/index.min.js 270 kB +329 B (+0.12%)
build/block-editor/style-rtl.css 16 kB +28 B (+0.18%)
build/block-editor/style.css 16 kB +22 B (+0.14%)
build/block-library/index.min.js 239 kB +403 B (+0.17%)
build/editor/index.min.js 137 kB +190 B (+0.14%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 482 B
build-module/block-library/accordion/view.min.js 656 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.6 kB
build-module/interactivity/debug.min.js 17.7 kB
build-module/interactivity/index.min.js 14.1 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.5 kB
build/block-editor/content.css 4.49 kB
build/block-editor/default-editor-styles-rtl.css 392 B
build/block-editor/default-editor-styles.css 392 B
build/block-library/blocks/accordion-heading/style-rtl.css 340 B
build/block-library/blocks/accordion-heading/style.css 340 B
build/block-library/blocks/accordion-item/style-rtl.css 213 B
build/block-library/blocks/accordion-item/style.css 213 B
build/block-library/blocks/accordion-panel/style-rtl.css 99 B
build/block-library/blocks/accordion-panel/style.css 99 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/editor-rtl.css 625 B
build/block-library/blocks/navigation-link/editor.css 628 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/editor-rtl.css 11.5 kB
build/block-library/editor.css 11.5 kB
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 253 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 75.4 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.9 kB
build/edit-post/style-rtl.css 2.78 kB
build/edit-post/style.css 2.78 kB
build/edit-site/index.min.js 242 kB
build/edit-site/posts-rtl.css 9.37 kB
build/edit-site/posts.css 9.37 kB
build/edit-site/style-rtl.css 15.4 kB
build/edit-site/style.css 15.5 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/style-rtl.css 9.57 kB
build/editor/style.css 9.58 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.55 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

This comment was marked as resolved.

@getdave getdave changed the title NavigationLink: Add isEntity prop to LinkControl for dynamic URL binding Use block bindings to dynamically fetch the URL for Navigation Link in the editor and on front end Sep 12, 2025
@getdave getdave self-assigned this Sep 12, 2025
@getdave getdave added [Type] Enhancement A suggestion for improvement. [Block] Navigation Link Affects the Navigation Link Block labels Sep 12, 2025
@getdave getdave changed the title Use block bindings to dynamically fetch the URL for Navigation Link in the editor and on front end [WIP] Use block bindings to dynamically fetch the URL for Navigation Link in the editor and on front end Sep 12, 2025
@cbravobernal cbravobernal self-requested a review September 19, 2025 11:05
@getdave getdave requested a review from ockham September 19, 2025 12:14
@getdave

This comment was marked as outdated.

@getdave getdave force-pushed the feature/navigation-link-block-bindings branch 3 times, most recently from edb4727 to 0661e98 Compare September 25, 2025 08:21
@getdave

This comment was marked as resolved.

@getdave getdave force-pushed the feature/navigation-link-block-bindings branch from 0661e98 to 9d781a2 Compare September 26, 2025 08:59
@getdave
Copy link
Contributor Author

getdave commented Sep 26, 2025

Update help text to

Link stays in sync with the selected category.

Text should probably auto update to match the entity title (follow up)

@jasmussen
Copy link
Contributor

jasmussen commented Sep 26, 2025

Important PR; nice work!

I wanted to note, that I think this PR experience wise is more or less good to go, as the value UI is fairly legible and can always be improved later. So no blockers on the visuals.

That said, two design options, I believe they are based past work by @jameskoster. I don’t have a preference:

options

@scruffian

This comment was marked as resolved.

@scruffian

This comment was marked as resolved.

@github-actions
Copy link

github-actions bot commented Sep 26, 2025

Flaky tests detected in 3eb61ea.
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/18225510631
📝 Reported issues:

@scruffian
Copy link
Contributor

When the submenu blocks are in a synced state, they don't get the purple outline, or icon:
Screenshot 2025-09-26 at 11 48 22

I think this is also true for links that are synced but haven't been set through the new UI

@getdave
Copy link
Contributor Author

getdave commented Sep 26, 2025

@scruffian thanks for the review 👍

I think there's a focus loss when clicking the "unlink" button too:

I have pushed what I hope is a fix for this. Could you pull and re-test 🙏

I found a bug with closing the popover - when the link URL field has been cleared, the popover gets stuck open:

I think I came across this too, but I can no longer replicate it. Can you?

When the submenu blocks are in a synced state, they don't get the purple outline, or icon:

Agreed. Once @cbravobernal has reviewed the implementation for Nav Link and we've stablised an approved method then we should duplicate this to Submenus as well.

@getdave getdave closed this Sep 26, 2025
@getdave getdave reopened this Sep 26, 2025
@getdave getdave added the [Block] Navigation Affects the Navigation Block label Sep 26, 2025
@getdave
Copy link
Contributor Author

getdave commented Oct 6, 2025

Recently, two navigation tests have become unstable.

Interesting but not unexpected given the scope of these changes. Nothing flagged during dev but I guess flaky tests are...well... flaky.

@jeryj was working on quite a few "fix" PRs which may inadvertently resolve these. But let's keep a close eye.

I don't think we need to revert this PR for flaky tests if we can wrap them up in the next few days. It's an important change so we will get these issues ironed out.

@getdave getdave added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Oct 7, 2025
cbravobernal added a commit that referenced this pull request Oct 7, 2025
…n the editor and on front end (#71630)

* Initial commit

* Post rebase fixes

* Improve help text as per https://github.com/WordPress/gutenberg/pull/71630\#discussion_r2397328702

* Extract simple suffic component

* Remove erroneous isSelected condition for url binding condition

* Initial e2e test coverage

* Test unlinking entity

* Improve scope of test

* Improve error handling in binding

* Implement a11y fixes as per https://github.com/WordPress/gutenberg/pull/71630/files\#r2398999057

* Improve tests to provide coverage for a11y relationship between unsync button and input

* Extract simple component for help text and add tests

* LinkControl: Add accessibility association for unlink button

- Add aria-describedby association between unlink button and help text
- Generate unique helpTextId using useInstanceId hook for entity use cases
- Create custom help text with proper semantic HTML (p tag)
- Add tooltip support using showTooltip and label props
- Position help text inside search-input-wrapper with custom styling
- Use standard design system variables for consistent styling
- Update button label to 'Unsync and edit' for better UX
- Add comprehensive unit tests for accessibility association
- Fix existing test regression for button name change

Addresses a11y feedback: 'The Synced with the selected page help text
underneath this input's aria-describedby isn't attached to the button,
it's attached to an unfocusable input, so screen reader users will
likely skip it. If we're in this synced state, the aria-described by
text should get assigned to the button so it's accessible.'

* LinkControl: Clean up URLInput and SearchInput components

- Remove unused help prop from LinkControlSearchInput
- Add aria-describedby support to URLInput component
- Remove unused helpText variable and sprintf import
- Complete the accessibility association implementation

* URLInput: Remove unused ariaDescribedBy prop

- Remove ariaDescribedBy from props destructuring
- Remove ariaDescribedBy from inputProps
- This prop was added but never actually used in LinkControl
- The accessibility association is handled directly in LinkControl

* Implement bding in Submenu via shared code paths

* Register Submenu bindings

* Revert bindings docs

* Lint and fix

* Remove TODOs in code

* Add backport PR info

* Fix autoformatting breaking changelog

Unlinked contributors: warudin.

Co-authored-by: getdave <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: scruffian <[email protected]>
Co-authored-by: cbravobernal <[email protected]>
Co-authored-by: jeryj <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: obenland <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: noisysocks <[email protected]>
Co-authored-by: mrfoxtalbot <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: retrofox <[email protected]>
@cbravobernal
Copy link
Contributor

Cherry-picked in 7a93fd5 for Gutenberg 21.8

@cbravobernal cbravobernal removed the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Oct 7, 2025
@getdave
Copy link
Contributor Author

getdave commented Oct 7, 2025

@cbravobernal Unfortunately @jeryj noticed that this PR broke the ability to create custom links without block bindings being created. I have a fix incoming.

@jeryj
Copy link
Contributor

jeryj commented Oct 7, 2025

Flaky Test fixes are being worked on here: #72132

@ockham ockham mentioned this pull request Oct 7, 2025
31 tasks
@cbravobernal cbravobernal changed the title Use block bindings to dynamically fetch the URL for Navigation Link in the editor and on front end Navigation Link: Use block bindings to dynamically fetch the URL in the editor and on front end. Oct 7, 2025
@getdave
Copy link
Contributor Author

getdave commented Oct 8, 2025

Tracking #72059

@mtias
Copy link
Member

mtias commented Oct 14, 2025

We should have a follow up to bring this behavior to the Button block if it doesn't exist already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Navigation Link Affects the Navigation Link Block [Block] Navigation Affects the Navigation Block [Block] Submenu Affects the Submenu Block - for submenus in navigation [Feature] Block bindings [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

NavigationLink: make the URL dynamic for links to Posts

8 participants