Accordion auto-close setting doesn't close accordion items open by default in the editor #73746
Description
Description
In the editor, the auto-close setting of the accordion block doesn't close accordion items that are Open by default.
Step-by-step reproduction instructions
- Add an accordion block and enable auto-close
- Add some accordion items
- Set one accordion item to be Open by default
- Click on another accordion item and see that the one that is Open by default isn't closed automatically
Screenshots, screen recording, code snippet
<!-- wp:accordion {"autoclose":true,"layout":{"type":"constrained"}} -->
<div role="group" class="wp-block-accordion"><!-- wp:accordion-item {"openByDefault":true,"backgroundColor":"base"} -->
<div class="wp-block-accordion-item is-open has-base-background-color has-background"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Lorem ipsum</span><span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span></button></h3>
<!-- /wp:accordion-heading -->
<!-- wp:accordion-panel {"openByDefault":true} -->
<div role="region" class="wp-block-accordion-panel"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur. Nibh tristique amet a pretium ut suspendisse et. Cursus at leo consequat in elementum sed ipsum. Faucibus odio consequat aliquam sed dui sagittis senectus. Sit sed magna ut feugiat dolor in neque eu feugiat. Lectus nunc nunc mi risus libero dapibus. Pharetra quam ipsum dignissim ac purus ipsum dolor. Gravida sit vel nibh gravida lacus turpis turpis facilisi pharetra. Vivamus eget ac cras suspendisse et eu molestie. Adipiscing lorem sit natoque auctor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item -->
<!-- wp:accordion-item {"backgroundColor":"base"} -->
<div class="wp-block-accordion-item has-base-background-color has-background"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Lorem ipsum</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:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur. Nibh tristique amet a pretium ut suspendisse et. Cursus at leo consequat in elementum sed ipsum. Faucibus odio consequat aliquam sed dui sagittis senectus. Sit sed magna ut feugiat dolor in neque eu feugiat. Lectus nunc nunc mi risus libero dapibus. Pharetra quam ipsum dignissim ac purus ipsum dolor. Gravida sit vel nibh gravida lacus turpis turpis facilisi pharetra. Vivamus eget ac cras suspendisse et eu molestie. Adipiscing lorem sit natoque auctor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item -->
<!-- wp:accordion-item {"backgroundColor":"base"} -->
<div class="wp-block-accordion-item has-base-background-color has-background"><!-- wp:accordion-heading -->
<h3 class="wp-block-accordion-heading"><button class="wp-block-accordion-heading__toggle"><span class="wp-block-accordion-heading__toggle-title">Lorem ipsum</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:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur. Nibh tristique amet a pretium ut suspendisse et. Cursus at leo consequat in elementum sed ipsum. Faucibus odio consequat aliquam sed dui sagittis senectus. Sit sed magna ut feugiat dolor in neque eu feugiat. Lectus nunc nunc mi risus libero dapibus. Pharetra quam ipsum dignissim ac purus ipsum dolor. Gravida sit vel nibh gravida lacus turpis turpis facilisi pharetra. Vivamus eget ac cras suspendisse et eu molestie. Adipiscing lorem sit natoque auctor.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:accordion-panel --></div>
<!-- /wp:accordion-item --></div>
<!-- /wp:accordion -->
Environment info
- WordPress Playground
- WordPress 6.9
- Twenty Twenty Five
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