Repository navigation
Accordion: fix padding/border showing on closed panels - #80777
vedant-ere wants to merge 2 commits into
Conversation
Closed accordion panels get hidden="until-found", which browsers render as content-visibility: hidden. That only collapses the panel's content, not its own padding or border, so panels with padding or a border (e.g. via theme.json) still show a visible gap while closed. Zero out padding and border-width on [hidden] panels alongside the existing margin reset, so closed panels always collapse fully.
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
github-actions
Bot
added
[Package] Block library
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vedant-ere! 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. |
What?
Fixes closed Accordion panels showing extra space when the panel has padding or a border set (for example through
theme.jsonspacing).Why?
Closes #80776
When an accordion item is closed, the panel gets
hidden="until-found". Browsers turn this intocontent-visibility: hidden, which hides and collapses the panel's content, but not the panel's own padding or border. So if the panel has padding or a border applied, that space stays visible even while the panel is closed, pushing the accordion items apart.The panel's stylesheet already reset
margin-block-startfor this exact reason, but never accounted for padding or border causing the same problem.How?
Extended the existing
[hidden]rule inpackages/block-library/src/accordion-panel/style.scssto also zero outpaddingandborder-widthwhen the panel is hidden, so a closed panel always collapses fully no matter what spacing or border settings are applied to it.Testing Instructions