Skip to content

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

@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

  1. Add an accordion block and enable auto-close
  2. Add some accordion items
  3. Set one accordion item to be Open by default
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] AccordionAffects the Accordion Block[Status] In discussionUsed to indicate that an issue is in the process of being discussed[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    🦵 Punted to 7.0

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions