Add fetchpriority=low to IMG tags in collapsed Details blocks

[westonruter]

What?

Fixes #76268

Before ❌

<details class="wp-block-details">
  <summary>Collapsed kitty</summary>
  <figure class="wp-block-image size-large">
    <img
      fetchpriority="high"
      decoding="async"
      width="1024"
      height="771"
      sizes="(max-width: 645px) 100vw, 645px"
      src="http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1024x771.jpg"
      alt=""
      class="wp-image-415"
      srcset="
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1024x771.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-300x226.jpg    300w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-768x578.jpg    768w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1536x1157.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-2048x1542.jpg 2048w
      "
    />
  </figure>
</details>

<details class="wp-block-details" open>
  <summary>Expanded bison</summary>
  <figure class="wp-block-image size-large">
    <img
      decoding="async"
      width="1024"
      height="683"
      sizes="(max-width: 645px) 100vw, 645px"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
      alt=""
      class="wp-image-37"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-300x200.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-768x512.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1536x1025.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-2048x1366.jpg 2048w
      "
    />
  </figure>
</details>

After ✅

<details
  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"
>
  <summary>Collapsed kitty</summary>
  <figure class="wp-block-image size-large">
    <img
      decoding="async"
      width="1024"
      height="771"
      fetchpriority="low"
      src="http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1024x771.jpg"
      alt=""
      class="wp-image-415"
      srcset="
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1024x771.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-300x226.jpg    300w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-768x578.jpg    768w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1536x1157.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-2048x1542.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>
</details>

<details
  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"
  open
>
  <summary>Expanded bison</summary>
  <figure class="wp-block-image size-large">
    <img
      fetchpriority="high"
      decoding="async"
      width="1024"
      height="683"
      src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
      alt=""
      class="wp-image-37"
      srcset="
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg  1024w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-300x200.jpg    300w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-768x512.jpg    768w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1536x1025.jpg 1536w,
        http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-2048x1366.jpg 2048w
      "
      sizes="(max-width: 1024px) 100vw, 1024px"
    />
  </figure>
</details>

--- before.html	2026-03-06 16:23:40
+++ after.html	2026-03-06 16:21:48
@@ -1,14 +1,13 @@
 <details
-  class="wp-block-details"
+  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"
 >
   <summary>Collapsed kitty</summary>
   <figure class="wp-block-image size-large">
     <img
-      fetchpriority="high"
       decoding="async"
       width="1024"
       height="771"
-      sizes="(max-width: 645px) 100vw, 645px"
+      fetchpriority="low"
       src="http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1024x771.jpg"
       alt=""
       class="wp-image-415"
@@ -19,21 +18,22 @@
         http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-1536x1157.jpg 1536w,
         http://localhost:8000/wp-content/uploads/2026/03/PXL_20260302_201050363-2048x1542.jpg 2048w
       "
+      sizes="(max-width: 1024px) 100vw, 1024px"
     />
   </figure>
 </details>
 
 <details
-  class="wp-block-details"
+  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"
   open
 >
   <summary>Expanded bison</summary>
   <figure class="wp-block-image size-large">
     <img
+      fetchpriority="high"
       decoding="async"
       width="1024"
       height="683"
-      sizes="(max-width: 645px) 100vw, 645px"
       src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg"
       alt=""
       class="wp-image-37"
@@ -44,6 +44,7 @@
         http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1536x1025.jpg 1536w,
         http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-2048x1366.jpg 2048w
       "
+      sizes="(max-width: 1024px) 100vw, 1024px"
     />
   </figure>
 </details>

Why?

An IMG in a collapsed DETAILS element should get fetchpriority=low to prevent it from ever competing with resources in the critical rendering path. Similarly, fetchpriority=low must be added to prevent WordPress from erroneously adding fetchpriority=high with the IMG is the first large image in the content via wp_get_loading_optimization_attributes().

How?

This implements a similar approach as #76208 by using a render callback to dynamically add fetchpriority=low when the block is set to be collapsed by default.

Testing Instructions

1. Add two Details blocks to a post, with a large Image block in eac.
2. Configure the second block to be open by default.
3. Ensure that the IMG in the first Details block has fetchpriority=low, and the IMG in the second either has no fetchpriority at all or it has fetchpriority=high.

[github-actions]

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

[westonruter]

-  class="wp-block-details"
+  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"

It's not clear to me why these class names are being added.

[github-actions]

Flaky tests detected in b8e8442.
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/22883346397
📝 Reported issues:

• [Flaky Test] Custom Completer: should allow newlines after multiple option completions #48535 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

[t-hamano]

-  class="wp-block-details"
+  class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"

It's not clear to me why these class names are being added.

Because the Details block supports blockGap, the is-layout-flow (wp-block-details-is-layout-flow) class should be dynamically added regardless of whether the block has a server-side rendering callback.

In fact, these classes are added to the Details block when the Gutenberg plugin is disabled. So this is a problem specific to the Gutenberg plugin.

But why aren't these classes added when the Gutenberg plugin is enabled? Perhaps at least some layout-related CSS classes aren't added to the block when the following conditions are met:

• The Gutenberg plugin is enabled
• The block doesn't have server-side rendering

[t-hamano]

How about using the render_block_core/details filter instead, to give consumers the freedom to opt out of this processing?

function block_core_details_change_img_fetchpriority() {
	// 
}
add_filter( 'render_block_core/details', 'block_core_details_change_img_fetchpriority' );

function register_block_core_details() {
	register_block_type_from_metadata( __DIR__ . '/details' );
}
add_action( 'init', 'register_block_core_details' );

There's been a similar discussion about this before. #71207 (comment)

[westonruter]

Works for me. How about 575c4a4?

[Copilot]

Pull request overview

Adds a server-side render filter for the core/details block to ensure images inside collapsed <details> don’t receive high network priority, addressing an LCP/priority regression where hidden images can erroneously get fetchpriority="high".

Changes:

• Introduces a render_block_core/details filter that sets fetchpriority="low" on all <img> tags when showContent is false (collapsed by default).
• Registers the core/details block on init via metadata registration (consistent with other block-library PHP registrations).
• Adds PHPUnit coverage for collapsed vs expanded Details rendering expectations.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/block-library/src/details/index.php	Adds a render filter to force fetchpriority="low" for images in collapsed Details blocks and registers the block on init.
phpunit/blocks/render-block-details-test.php	Adds unit tests asserting fetchpriority behavior for collapsed vs expanded Details blocks.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[t-hamano]

LGTM!

[github-actions]

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