-
Notifications
You must be signed in to change notification settings - Fork 4.8k
Accordion auto-close setting doesn't close accordion items open by default in the editor #73745
Copy link
Copy link
Closed
Labels
Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
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
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:
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Mobile App - i.e. Android or iOSNative mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Type
Fields
Give feedbackNo fields configured for issues without a type.