Skip to content

Image in collapsed Accordion block may erroneously get fetchpriority=high even though hidden #76335

New issue
New issue
Closed
Bug
#76336
Closed
Image in collapsed Accordion block may erroneously get fetchpriority=high even though hidden#76335
Bug
#76336
Assignees
westonruter
Labels
[Block] AccordionAffects the Accordion Block[Status] In ProgressTracking issues with work in progress[Type] PerformanceRelated to performance efforts
Milestone
Gutenberg 22.8
@westonruter

Description

@westonruter
westonruter
opened on Mar 10, 2026

Description

This is to apply to the Accordion block the same change done for the Details block as reported in:

Also related to:

Sample Post Content 
<!-- wp:accordion -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item -->
<div class="wp-block-accordion-item"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">First Image</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:image {"id":36,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg" alt="" class="wp-image-36"/></figure>
<!-- /wp:image --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item -->

<!-- wp:accordion-item {"openByDefault":true} -->
<div class="wp-block-accordion-item is-open"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button type="button" class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Second Image</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->

<!-- wp:accordion-panel -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:image {"id":37,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8000/wp-content/uploads/2025/11/Bison_with_its_young-2560w-1024x683.jpg" alt="" class="wp-image-37"/></figure>
<!-- /wp:image --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->
Rendered HTML 
<div
  data-wp-context='{ "autoclose": false, "accordionItems": [] }'
  data-wp-interactive="core/accordion"
  role="group"
  class="wp-block-accordion is-layout-flow wp-block-accordion-is-layout-flow"
>
  <div
    data-wp-class--is-open="state.isOpen"
    data-wp-context='{ "id": "accordion-item-3", "openByDefault": false }'
    data-wp-init="callbacks.initAccordionItems"
    data-wp-on-window--hashchange="callbacks.hashChange"
    class="wp-block-accordion-item is-layout-flow wp-block-accordion-item-is-layout-flow"
  >
    <h3 class="wp-block-accordion-heading">
      <button
        aria-expanded="false"
        aria-controls="accordion-item-3-panel"
        data-wp-bind--aria-expanded="state.isOpen"
        data-wp-on--click="actions.toggle"
        id="accordion-item-3"
        type="button"
        class="wp-block-accordion-heading__toggle"
      >
        <span class="wp-block-accordion-heading__toggle-title">First Image</span
        ><span
          class="wp-block-accordion-heading__toggle-icon"
          aria-hidden="true"
          >+</span
        >
      </button>
    </h3>

    <div
      inert
      aria-labelledby="accordion-item-3"
      data-wp-bind--inert="!state.isOpen"
      id="accordion-item-3-panel"
      role="region"
      class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow"
    >
      <figure class="wp-block-image size-large">
        <img
          fetchpriority="high"
          decoding="async"
          width="1024"
          height="668"
          sizes="(max-width: 645px) 100vw, 645px"
          src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg"
          alt=""
          class="wp-image-36"
          srcset="
            http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg  1024w,
            http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-300x196.jpg    300w,
            http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-768x501.jpg    768w,
            http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1536x1002.jpg 1536w,
            http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-2048x1336.jpg 2048w
          "
        />
      </figure>
    </div>
  </div>

  <div
    data-wp-class--is-open="state.isOpen"
    data-wp-context='{ "id": "accordion-item-4", "openByDefault": true }'
    data-wp-init="callbacks.initAccordionItems"
    data-wp-on-window--hashchange="callbacks.hashChange"
    class="wp-block-accordion-item is-open is-layout-flow wp-block-accordion-item-is-layout-flow"
  >
    <h3 class="wp-block-accordion-heading">
      <button
        aria-expanded="true"
        aria-controls="accordion-item-4-panel"
        data-wp-bind--aria-expanded="state.isOpen"
        data-wp-on--click="actions.toggle"
        id="accordion-item-4"
        type="button"
        class="wp-block-accordion-heading__toggle"
      >
        <span class="wp-block-accordion-heading__toggle-title"
          >Second Image</span
        ><span
          class="wp-block-accordion-heading__toggle-icon"
          aria-hidden="true"
          >+</span
        >
      </button>
    </h3>

    <div
      aria-labelledby="accordion-item-4"
      data-wp-bind--inert="!state.isOpen"
      id="accordion-item-4-panel"
      role="region"
      class="wp-block-accordion-panel is-layout-flow wp-block-accordion-panel-is-layout-flow"
    >
      <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>
    </div>
  </div>
</div>

<p class="wp-block-paragraph"></p>
Image

Note the IMG in the initial collapsed Accordion item gets fetchpriority=high:

<img
  fetchpriority="high"
  decoding="async"
  width="1024"
  height="668"
  sizes="(max-width: 645px) 100vw, 645px"
  src="http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg"
  alt=""
  class="wp-image-36"
  srcset="
    http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1024x668.jpg  1024w,
    http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-300x196.jpg    300w,
    http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-768x501.jpg    768w,
    http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-1536x1002.jpg 1536w,
    http://localhost:8000/wp-content/uploads/2025/11/American_bison_k5680-1-2048x1336.jpg 2048w
  "
/>

Props to @t-hamano for #76302 (review)

Step-by-step reproduction instructions

  1. Create a blank post.
  2. Add an Accordion block as the first content.
  3. Add two items: the first collapsed (as default) and the second open.
  4. Add an Image block to each accordion item.
  5. Notice that the IMG in the initial collapsed Accordion gets fetchpriority=high erroneously.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Block] AccordionAffects the Accordion Block[Status] In ProgressTracking issues with work in progress[Type] PerformanceRelated to performance efforts

Type

Bug

Fields

No fields configured for Bug.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions