Repository navigation
Accordion Panel: Padding is also shown in accordion with closed panels #80776
Description
Description
When a accordion panel has a padding in the theme.json applied, this padding is also shown even when the accordion is closed.
I think the panel and the panels spacing should only show, when the accordion is open. Otherwise the panels paddings effects the spacing between the accordion headings and items.
Step-by-step reproduction instructions
- Create a accordion with multiple items
- Make sure that there is no spacing between the accordion items
- Add padding to the accordion panel
- Watch the spacing of the items change, even though the panel should be hidden
Screenshots, screen recording, code snippet
Environment info
- WP 7.1
- GB 23.6.0
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
Activity
iamtakashi commentedon Jul 30, 2026
Root cause: the server never renders the closed state. The button gets
aria-expanded="false", but the panel'sdata-wp-bind--hidden="state.isHidden"isn't evaluated server side (derived state in the view module, nothing seeded viawp_interactivity_state()), so closed panels render open until hydration. Theme-side mitigations can't fully compensate: the padding is an inline style, so stylesheet overrides lose without!important.Workaround: use a spacer inside the panel (with
blockGap: 0) instead of panel padding; content is hidden when closed, padding isn't.Fix direction: seed the state so hidden is in the SSR output, which also fixes the flash of open panels on load.
andrewkathart commentedon Aug 25, 2026
What's the status of this, anyone know?
It's happened to pretty much all my sites using the native accordion block, after updating WordPress to version 7.1. It's not critical, but would be nice to not have to update each site individually.
Use spacers instead of padding in FAQ accordion panels
Use spacers instead of padding in FAQ accordion panels
Use spacers instead of padding in FAQ accordion panels
Use spacers instead of padding in FAQ accordion panels (woocommerce/w…
Use spacers instead of padding in FAQ accordion panels (woocommerce/w…
Use spacers instead of padding in FAQ accordion panels (woocommerce/w…
Use spacers instead of padding in FAQ accordion panels (woocommerce/w…
youknowriad commentedon Oct 19, 2026
Thanks for the report, @hanneslsm! I tested on WordPress 7.1.2 with Gutenberg trunk (built 2026-10-16). With 40px padding on the Accordion Panel, closed panels now render with 0 padding and 0 height on the front end, and the padding comes back only when a panel opens. The fix is #81782, which resets padding, borders and shadows on
.wp-block-accordion-panel[hidden]. The separate issue of panels rendering open before hydration is tracked in #81869. Closing this, but please reopen with steps if you still see the gap.