close
Skip to content

Accordion auto-close setting doesn't close accordion items open by default in the editor #73745

@benoitchantre

Description

@benoitchantre

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

Example:

<!-- 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 -->

Expected behaviour

When auto-close is enabled, only one accordion item should be open.

Actual behaviour

Accordion items that are Open by default are not closed automatically (works on the front-end, not in the editor).

Screenshots or screen recording (optional)

WordPress information

  • WordPress version: 6.9
  • Gutenberg version:
  • Are all plugins except Gutenberg deactivated? Yes
  • Are you using a default theme (e.g. Twenty Twenty-One)? Yes, Twenty Twenty Five

Device information

  • Device: Firefox 145
  • Operating system: Mac OS 15.6.1
  • WordPress app version:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions