Repository navigation
Tracking: Stabilize Accordion Blocks #71732
Description
Resources:
- Roadmap to 6.9: This article suggests adding accordion blocks as new blocks.
- My proposal about backward compatibility policies for blocks
Currently, the following four blocks are available only when experimental settings are enabled:
- Accordion (
core/accordion)- Accordion Item (
core/accordion-item)- Accordion Heading (
core/accordion-heading) - Accordion Panel (
core/accordion-panel)
- Accordion Heading (
- Accordion Item (
This issue lists the problems that need to be addressed in order for Accordion blocks to ship into core. If you have any thoughts on this issue itself or any tasks that need to be addressed, please feel free to comment.
cc @mikachan @MaggieCabrera @joedolson @ryanwelcher
Enable by default on the Gutenberg plugin
Currently, these blocks are only available if we enable the Experiments setting. My understanding is that enabling these blocks by default means we must fully guarantee backward compatibility.
I would like to minimize the burden of dealing with backward compatibility, so I propose evaluating and addressing the following points:
- Accordion Header: Remove hardcoded inline styles and unused CSS class: Accordion Header: Remove hardcoded inline styles and unused CSS class #71731
- Accordion Header: Don't use flex-direction:reverse: Accordion Header: Don't use flex-direction:reverse #71737
- Are all block supports working correctly? If they don't, let's remove them for now or fix them to work correctly. Accordion Blocks: Organize block supports #71823
- Let's standardize the format of CSS names. By convention, core blocks are formatted as
.wp-block-{blockName}__{element}. This means updating the save function, so we need to address it at this stage.: Accordion Blocks: Standardize CSS class names #71785 - Accordion Header: Let's remove the
textAlignmentattribute, since textAlign support is already available. This is to avoid moving from attributes to support in the future. However, note thattextAlignsupport is not currently fully functional. See Block Library: Migrate to the new textAlign block support #60763 (comment) for more details: Accordion Header: Remove textAlignment and textAlign #71875 - Are the block namespaces really fine as they are? Note: The namespaces have been changed once: Rename Accordions block to Accordion #71222 Accordion: rename block names #71978
- [Create fixtures]: Stabilize Accordion block #72036
- Finally, discuss and decide whether we enable these blocks on the Gutenberg plugin by default. Stabilize Accordion block #72036
- Remove the "accordion" keyword from the Details block, to reduce confusion between these two blocks (see this comment: New block: Accordion block #21584 (comment))
Ship to WP 6.9
This means removing "__experimental": true from blocks. We need to investigate and address any issues that need to be addressed before shipping this block to 6.9. #72036
Activity
withoutInteractiveFormattingprop instead of hardcoded formatt list #71741joedolson commentedon Sep 19, 2025
Thanks for opening this, @t-hamano! I've added a handful of accessibility issues that I'd also consider important to resolve to add this to core.
11 remaining items
t-hamano commentedon Sep 29, 2025
As the Accordion block is nearing stabilization, I would like to have one more discussion to finalize the block name. The current block names are as follows:
core/accordion)core/accordion-content)core/accordion-header)core/accordion-panel)Personally, I find the block name "Accordion Content" a bit strange.
This has probably been discussed somewhere before, but I prefer the block name "Accordion Item".
cc @mikachan, @alexandrebuffet, @jasmussen, @LukaszJaro, @Jabe64, @Nyiriland, @hanneslsm, @MaggieCabrera
hanneslsm commentedon Sep 29, 2025
Good point @t-hamano
I agree with you, "Accordion Content" sounds more like the Panel.
"Accordion Item" is also a valid name; we also have list items as child blocks in a Lists. However, for me a Item is a singular thing… but the Accordion item does persist of two child blocks.
It could also make sense to use "Accordion Group" here, what the initially overall "Accordion" was named.
Another thing I've just realized: Shouldn't the Header be "Accordion Title"? Or at least "Accordion Heading"? We do have the Heading block, but "header" is usually the template part. Also, the placeholder text currently says "Accordion title"
So we end up with
I'm not native english, so I'm very happy if someone else also chimes in and even outweighs my opinion. :)
Jabe64 commentedon Sep 29, 2025
+1 for Accordion Group but I'm not a native English speaker neither.
joedolson commentedon Sep 29, 2025
I'd give a +1 for Accordion Item. To me, Accordion Group sounds like a larger organizational structure.
I don't have significant issues between Accordion Heading vs. Header; but since it contains a Heading, I think it does make sense to repeat the same terminology as the inner block.
Regarding the placeholder: the name of the block should convey its structure, but the placeholder needs to be a hint about the content, so to me accordion title makes sense there.
t-hamano commentedon Sep 30, 2025
I'm not a native English speaker either, but I get the impression that "Accordion Group" is a wrapper for "grouping" multiple Accordions, so I prefer the "Accordion Item" instead.
hanneslsm commentedon Sep 30, 2025
Looking at other CSS frameworks, I revoke the idea of "Accordion group" and also go with "Accordion Item".
https://getbootstrap.com/docs/5.3/components/accordion/
https://get.foundation/sites/docs/accordion.html
https://primer.style/brand/components/RiverAccordion/
https://carbondesignsystem.com/components/accordion/usage/
So we end up with the following (Item and Heading):
t-hamano commentedon Sep 30, 2025
Okay, let's move forward with this.
t-hamano commentedon Oct 2, 2025
Ready to stabilize: #72036
t-hamano commentedon Oct 3, 2025
The Accordion block is now stabilized and will ship in WP 6.9. Thanks to everyone who worked on this issue!
For any open sub-issues, let's address them individually.
mrleemon commentedon Oct 30, 2025
Just a question. Is there a way to change the toggle icon in the Accordion Heading block?
t-hamano commentedon Oct 30, 2025
Currently, you cannot change the icon unless you add custom CSS. In the future, if the icon registration API is implemented, we may be able to incorporate some of that functionality into the accordion block as well.