Accordion Heading: Route theme.json spacing to the toggle button

[sanketio]

What?

Closes #79662

Moves the Accordion Heading spacing selector from the legacy supports.spacing.__experimentalSelector into the block's selectors map, so theme.json padding reaches the toggle button.

Why?

The block declares a selectors map holding typography entries only:

"selectors": {
	"typography": { "letterSpacing": "…__toggle-title", "textDecoration": "…__toggle-title" }
}

wp_get_block_css_selector() and getBlockSelector() consult __experimentalSelector only when a block declares no selectors map at all, so the spacing selector was never read. theme.json padding was emitted against the wrapper:

:root :where(.wp-block-accordion-heading){padding-top: 0.25rem;padding-bottom: 0.25rem;}

while the block's own default sits on the toggle:

.wp-block-accordion-heading__toggle{padding: var(--wp--preset--spacing--20, 1em) 0;}

Two different elements, so a theme can add padding around the toggle but never lower the toggle's own. Asking for 0.25rem grew the heading box from 45px to 53px. The css escape hatch was the only way out, which is what #79662 reports.

Padding set per block is unaffected either way — save.js writes it inline on the button through getSpacingClassesAndStyles(), because spacing also sets __experimentalSkipSerialization.

How?

One line: adds "spacing": ".wp-block-accordion-heading .wp-block-accordion-heading__toggle" to selectors, which is the value wp_get_block_css_selector() would have produced by scoping the legacy selector under the block root.

supports.spacing.__experimentalSelector is left in place. It is unreachable now, but removing it is a separate cleanup and this way the change is purely additive.

Colour, border and shadow keep resolving to the block root, matching where save.js serializes them.

Follow-up to #73454 and #72776, which fixed the specificity of these defaults but not which element the theme's value lands on.

Backward compatibility

Saved markup is untouched — save() does not read the selector, and the current plus v1/v2/v3 core__accordion-heading fixtures all still parse, validate and serialize unchanged.

Padding set on an individual block still wins, and so does the css escape hatch that #79662 gives as the workaround, so themes already working around this are unaffected. No bundled theme sets core/accordion-heading spacing. Colour, border and shadow are unaffected — the block has no selectors.root and no root-level __experimentalSelector, so the root selector resolves exactly as before. The support is padding-only, so nothing else moves.

The intended change: a theme or a user's Global Styles that sets padding for this block now applies it to the toggle rather than stacking it outside one that never shrank, so a value tuned against the old behaviour will render differently. That is the bug. :hover and @mobile padding follow the same selector now, matching the base styles.

Testing Instructions

1. In a block theme's theme.json, set styles.blocks.core/accordion-heading.spacing.padding to something smaller than --wp--preset--spacing--20, e.g. 0.25rem.
2. Add an Accordion with a couple of items and view the page.
3. The toggle takes the theme's padding. Before this change it kept the Core default and the heading grew instead.
4. Set padding on a single Accordion Heading in the inspector — it still wins over the theme value.

npm run test:e2e -- test/e2e/specs/editor/blocks/accordion.spec.js --project=chromium

• Full PHP suite passes (2278 tests)
• accordion.spec.js passes (4 tests)
• Editor and front end agree — toggle 4px, heading box 33px in both

Screenshots or screencast

Before	After
theme.json 0.25rem lands on the h3; toggle keeps 10px; heading box 53px	same theme.json; toggle takes 4px; heading box 33px

Use of AI Tools

Authored with Claude Code under direction and review.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sanketio <sanketparmar@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: hanneslsm <hanneslsm@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @sanketio! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[t-hamano]

I'm not sure if it's worth adding unit tests just for this block. There are many blocks that use __experimentalSelector, and personally, I don't think unit tests are necessary.

[sanketio]

Agreed — removed in 4cfdc70. The two tests above it already cover both selector paths, and this one only asserted one block's block.json.

[t-hamano]

LGTM!