Add icon state classes to Accordion block#74257
Conversation
|
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. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @deepakpra! 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?
Closes #74254
Adds icon state CSS classes to the Accordion block wrapper in both the editor and saved markup.
When the icon is enabled, the block now outputs:
has-iconhas-icon-leftorhas-icon-right, based on the selected icon positionWhy?
The Accordion block already exposes icon visibility and position as attributes, but this state was not reflected in the rendered markup.
Exposing this state via CSS classes provides a consistent, attribute-driven styling hook and aligns the Accordion block with established Gutenberg patterns.
How?
Computes icon-related CSS classes from existing attributes (showIcon, iconPosition)
Applies the computed classes to:
edit.js for editor markup
save.js for frontend and serialized markup
Uses clsx with a descriptive variable name to keep the logic clear and maintainable
Does not introduce new attributes or change the block structure
Testing Instructions
has-iconis addedhas-icon-rightis addedhas-icon-leftis added