Repository navigation
Accordion heading padding set via theme.json is ignored (Specificity conflict) #72776
Description
Description
The custom padding applied to the core/accordion-heading block via theme.json is being overridden by a more specific, zero-padding rule that exists in the core block library CSS. This prevents theme authors from effectively customizing the spacing of accordion headings using the standard Global Styles system.
Expected behavior:
The padding defined in theme.json should take effect, resulting in the accordion heading having padding-left: 0.3em and padding-right: 0.3em. The theme.json-generated CSS should have sufficient specificity to override the default block library styles.
Actual behavior:
The theme.json-generated CSS for the padding is generated with low specificity:
:root :where(.wp-block-accordion-heading) {
padding-right: 0.3em;
padding-left: 0.3em;
}
This rule is subsequently overridden by a more specific default block library CSS rule (from /wp-includes/css/dist/block-library/style.css):
.wp-block-accordion .wp-block-accordion-heading {
padding: 0;
}
The effective padding on the accordion heading remains padding: 0.
Step-by-step reproduction instructions
Ensure you are running WordPress 6.9-beta2 (or the latest Gutenberg trunk).
In your active theme's theme.json, add the following custom padding definition under the blocks section:
"blocks": {
"core/accordion-heading": {
"spacing": {
"padding": {
"left": "0.3em",
"right": "0.3em"
}
}
}
}
Create a new post or page and add the accordion block with at least one item.
View the page on the frontend or inspect the editor, and check the CSS rules applied to the Accordion heading element (.wp-block-accordion-heading).
Screenshots, screen recording, code snippet
No response
Environment info
WordPress Version: 6.9-beta2
Gutenberg Version: (N/A, or latest from trunk/nightly)
Theme: Custom hybrid theme using theme.json
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
Labels
Type
Projects
- StatusShow more project fields✅ Done
Activity