Navigation Overlay: Explicitly set fetchpriority for images by mikachan · Pull Request #76208 · WordPress/gutenberg

mikachan · 2026-03-05T18:03:43Z

What?

This PR sets fetchpriority="low" on images inside a Navigation Overlay template part so they don't compete with the page's actual LCP image.

Why?

When a navigation block uses a custom overlay template part containing an image, that image can incorrectly receive fetchpriority="high" even though it is hidden until the user opens the menu. This happens because the template part block calls wp_filter_content_tags() on its rendered content with the context "template_part_header", which wp_get_loading_optimization_attributes() treats as an in-viewport context and may assign fetchpriority="high".

This has two negative effects on LCP:

The overlay image gets fetchpriority="high", causing the browser to fetch it with high priority even though it is not visible.
The shared LCP counter (wp_increase_content_media_count) is incremented by the hidden image, potentially using up the budget before the actual LCP image (e.g. the post's featured image) is processed, causing it not to receive fetchpriority="high".

How?

After the overlay blocks are rendered in WP_Navigation_Block_Renderer::get_responsive_container_markup(), a new helper function block_core_navigation_set_overlay_image_lazy_loading() uses WP_HTML_Tag_Processor to set fetchpriority="low" on every <img> in the overlay HTML.

Testing Instructions

In the Site Editor, create or edit a Navigation block and set it to use a custom overlay template part (Navigation block settings > Overlay > select or create a template part)
Add an Image block to the overlay template part with dimensions of at least 250×250px
Create or edit a post/page and add a Featured Image
View the post/page on the frontend
Inspect the page source or DevTools network panel:
- The <img> inside the Navigation Overlay should have fetchpriority="low"
- The featured image should have fetchpriority="high"

westonruter

Thanks for jumping on this so quickly!

packages/block-library/src/navigation/index.php

phpunit/blocks/render-block-navigation-test.php

packages/block-library/src/navigation/index.php

github-actions · 2026-03-05T18:22:57Z

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: mikachan <mikachan@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

github-actions · 2026-03-05T18:54:56Z

Flaky tests detected in 5d077c4.
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/22847693432
📝 Reported issues:

[Flaky Test] User Mention: should allow newlines after multiple mention completions #48537 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js
[Flaky Test] should undo bold #48558 in /test/e2e/specs/editor/various/undo.spec.js

Co-authored-by: Weston Ruter <weston@ruter.net>

mikachan · 2026-03-06T10:42:06Z

@westonruter Thanks for the quick and detailed review! I think I've addressed all your feedback. This should be ready for another review 🤞

westonruter

Some minor suggestions to add assertions that the next_tag() calls are successful.

phpunit/blocks/render-block-navigation-test.php

westonruter · 2026-03-06T23:39:27Z

@mikachan I've opened a companion ticket Core-64823 and PR #76208 to fix things on the core side.

phpunit/blocks/render-block-navigation-test.php

Co-authored-by: Weston Ruter <weston@ruter.net>

mikachan · 2026-03-09T09:53:46Z

Thanks @westonruter! All of the latest feedback should now be addressed.

westonruter

Thank you!

t-hamano

LGTM 👍

* Set images to lazy loading in overlay * Explicitly set fetchpriority=low * Update comment * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update packages/block-library/src/navigation/index.php Co-authored-by: Weston Ruter <weston@ruter.net> * Rename function * Use WP_HTML_Tag_Processor in tests * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> * Update phpunit/blocks/render-block-navigation-test.php Co-authored-by: Weston Ruter <weston@ruter.net> --------- Co-authored-by: Weston Ruter <weston@ruter.net> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: westonruter <westonruter@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>

github-actions · 2026-03-10T09:49:42Z

I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 25fb7e8

This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@61988 602fd350-edb4-49c9-b593-d223f7449a82

This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@61988 git-svn-id: http://core.svn.wordpress.org/trunk@61270 1a063a9b-81f0-0310-95a4-ce76da25c4cd

mikachan added 3 commits March 5, 2026 17:45

Set images to lazy loading in overlay

dc8c65a

Explicitly set fetchpriority=low

0d9e370

Update comment

ddcb825

mikachan requested review from ajitbohra and fabiankaegy as code owners March 5, 2026 18:03

mikachan added [Type] Performance Related to performance efforts [Block] Navigation Affects the Navigation Block labels Mar 5, 2026

westonruter requested changes Mar 5, 2026

View reviewed changes

github-actions bot added the [Package] Block library /packages/block-library label Mar 5, 2026

mikachan and others added 11 commits March 6, 2026 10:14

Update packages/block-library/src/navigation/index.php

e77b42a

Co-authored-by: Weston Ruter <weston@ruter.net>

Update packages/block-library/src/navigation/index.php

caa7516

Co-authored-by: Weston Ruter <weston@ruter.net>

Update packages/block-library/src/navigation/index.php

8321700

Co-authored-by: Weston Ruter <weston@ruter.net>

Update packages/block-library/src/navigation/index.php

8346055

Co-authored-by: Weston Ruter <weston@ruter.net>

Update packages/block-library/src/navigation/index.php

375e8d2

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

687ff93

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

e5318a3

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

8424123

Co-authored-by: Weston Ruter <weston@ruter.net>

Update packages/block-library/src/navigation/index.php

4190d42

Co-authored-by: Weston Ruter <weston@ruter.net>

Rename function

6c4eaea

Use WP_HTML_Tag_Processor in tests

9819659

mikachan changed the title ~~Navigation Overlay: Explicitly set fetchpriority~~ Navigation Overlay: Explicitly set fetchpriority for images Mar 6, 2026

westonruter reviewed Mar 6, 2026

View reviewed changes

westonruter mentioned this pull request Mar 6, 2026

Add support for IMG tags with fetchpriority=low or fetchpriority=auto WordPress/wordpress-develop#11196

Closed

westonruter added this to the Gutenberg 22.8 milestone Mar 7, 2026

westonruter mentioned this pull request Mar 7, 2026

Add fetchpriority=low to IMG tags in collapsed Details blocks #76269

Merged

westonruter reviewed Mar 9, 2026

View reviewed changes

phpunit/blocks/render-block-navigation-test.php Outdated Show resolved Hide resolved

westonruter reviewed Mar 9, 2026

View reviewed changes

phpunit/blocks/render-block-navigation-test.php Outdated Show resolved Hide resolved

westonruter reviewed Mar 9, 2026

View reviewed changes

phpunit/blocks/render-block-navigation-test.php Outdated Show resolved Hide resolved

westonruter reviewed Mar 9, 2026

View reviewed changes

phpunit/blocks/render-block-navigation-test.php Outdated Show resolved Hide resolved

mikachan and others added 8 commits March 9, 2026 09:48

Update phpunit/blocks/render-block-navigation-test.php

e47e384

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

f19ead8

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

33ec6c2

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

b9e95c9

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

6bf48b0

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

e3cba3b

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

fe6660f

Co-authored-by: Weston Ruter <weston@ruter.net>

Update phpunit/blocks/render-block-navigation-test.php

5d077c4

Co-authored-by: Weston Ruter <weston@ruter.net>

westonruter approved these changes Mar 9, 2026

View reviewed changes

westonruter added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 10, 2026

westonruter requested a review from t-hamano March 10, 2026 03:08

westonruter mentioned this pull request Mar 10, 2026

Add fetchpriority=low to IMG tags in collapsed Accordion Item blocks #76336

Merged

t-hamano approved these changes Mar 10, 2026

View reviewed changes

mikachan merged commit fd0e6c6 into trunk Mar 10, 2026
47 checks passed

mikachan deleted the fix/nav-overlay-img branch March 10, 2026 09:48

github-actions bot removed the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 10, 2026

github-actions bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Mar 10, 2026

Conversation

mikachan commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mikachan commented Mar 6, 2026

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

westonruter commented Mar 6, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mikachan commented Mar 9, 2026

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mikachan commented Mar 5, 2026 •

edited

Loading

github-actions bot commented Mar 5, 2026 •

edited

Loading

github-actions bot commented Mar 5, 2026 •

edited

Loading