Repository navigation
Accordion Header: Consider defining default style #71529
Description
What problem does this address?
Many themes, especially the classic theme, apply styles to button elements. Since the Accordion block consists of the button element inside the heading element, such styles may also affect accordion headers, creating a slightly odd appearance.
What is your proposed solution?
It would be difficult to force all themes to add special styling for accordion header buttons, so I'd suggest applying the minimum amount of styling with the minimum CSS specificity.
In some themes, when you hover or focus on an accordion header, the text may not be visible at all, which we'll also need to fix.
Screenshots
It's also important to note that all themes below have different styles for the front-end and the editor.
Twenty Twenty One
| Editor | Front end |
|---|---|
 |
 |
Twenty Twenty
| Editor | Front end |
|---|---|
 |
 |
Twenty Nineteen
| Editor | Front end |
|---|---|
 |
 |
Twenty Seventeen
| Editor | Front end |
|---|---|
 |
 |
Activity
adityaanurag0219 commentedon Sep 7, 2025
Hi! I would like to work on this issue and submit a PR to fix the minimal styling of the Accordion header buttons.
t-hamano commentedon Sep 19, 2025
@adityaanurag0219 Please feel free to submit a PR 👍
theminaldiwan commentedon Oct 8, 2025
hi @adityaanurag0219
Just checking—are you currently working on this issue, or would you be okay if I pick it up and submit a PR?
adityaanurag0219 commentedon Oct 8, 2025
Hey! Thanks for checking 🙂
You can go ahead and pick it up, please continue with the issue.
ellatrix commentedon Nov 11, 2025
I don't quite understand why the accordion block wasn't
<details>elements stacked. Then we wouldn't have this issue?t-hamano commentedon Nov 11, 2025
The Details block already exists. The Accordion block exists for a different purpose.
See: #64119 (comment)