Accordion Panel: Fixes block visibility when the panel is collapsed

[theminaldiwan]

What?

Closes #71806

Why?

When collapsed panel and we added already padding, border or box-shadow to panel then its appearance not looks proper.

How?

Using style hide the visibility of panel when it is collapsed.
or we can apply (Dimensions) and (Border & Shadow) inline styles to child element of wp-block-accordion-panel

Testing Instructions

• Insert an Accordion block
• Apply padding and border styles to the Accordion Header block.
• Open the front end.

Screencast

Screen.Recording.2025-09-23.at.6.34.55.PM.mov

[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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @minaldiwan.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: minaldiwan.

Co-authored-by: theminaldiwan <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: shail-mehta <[email protected]>

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

[t-hamano]

@theminaldiwan, I think this PR is the same as #71845, and I can see conflicts in this PR. You'll probably need to sync your local repository with the upstream branch before submitting a PR.

[theminaldiwan]

Yes @t-hamano
By mistake I closed #71845 this PR and unable to reopen it.
That's why create new PR.

[shail-mehta]

@theminaldiwan Thanks for the PR.

This PR also have Conflicts. Could you please resolve this Conflicts?

[t-hamano]

How about updating packages/block-library/src/accordion-panel/style.scss as follows?

.wp-block-accordion-panel {
	&[inert],
	&[aria-hidden="true"] {
		display: none;
		// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
		margin-block-start: 0;
	}
}

That is, remove overflow-hidden and add display:none. [inert] or [aria-hiddne="true"] is a selector used to apply styles when the panel is not visually visible.

[theminaldiwan]

Hi @t-hamano

How about updating packages/block-library/src/accordion-panel/style.scss as follows?

.wp-block-accordion-panel {
	&[inert],
	&[aria-hidden="true"] {
		display: none;
		// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
		margin-block-start: 0;
	}
}

That is, remove overflow-hidden and add display:none. [inert] or [aria-hiddne="true"] is a selector used to apply styles when the panel is not visually visible.

I update style in latest commit.

[t-hamano]

LGTM 👍