Skip to content

Conversation

@levinbaria
Copy link
Contributor

What?

Closes #71435

Fixes CSS selector affects the nested Accordion block icon.

Why?

The Accordion block can be nested, and in that some CSS selector affects the nested Accordion block icon.

How?

Made the CSS selector to apply only on the direct child only.

Testing Instructions

Insert an Accordion block.
Insert an additional Accordion block inside the Accordion panel.
Select the parent Accordion Content block.
Confirm that both toggle icons are rotated.

Testing Instructions for Keyboard

Screenshots or screencast

Before After

@github-actions
Copy link

github-actions bot commented Sep 1, 2025

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: levinbaria <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 1, 2025
@github-actions
Copy link

github-actions bot commented Sep 1, 2025

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @levinbaria! 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.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

For code readability, we can reuse the existing CSS selector. How about writing it like this?\

.wp-block-accordion-content.is-open {
	grid-template-rows: max-content 1fr;

	> .wp-block-accordion-header .accordion-content__toggle-icon.has-icon-plus {
		transform: rotate(45deg);
	}
}

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Block] Accordion Affects the Accordion Block labels Sep 2, 2025
@levinbaria
Copy link
Contributor Author

Yes, that a good catch @t-hamano, I will update the CSS accordingly

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@t-hamano t-hamano merged commit 0becbde into WordPress:trunk Sep 3, 2025
104 of 105 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.6 milestone Sep 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Accordion Affects the Accordion Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accordion Block: some CSS affects nested Accordion block

2 participants