Global styles: Update generateGlobalStyles function to include variationStyles option #73535
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. |
ramonjd
added
[Type] Bug
| disableLayoutStyles, | ||
| disableRootPadding | ||
| disableRootPadding, | ||
| { variationStyles: true } |
There was a problem hiding this comment.
Are there cases where this need to be "false"?
There was a problem hiding this comment.
transformToStyles is setting it to false by default so presumably there are instances where it needs to be false. I'm not sure which ones they are though 😄
There was a problem hiding this comment.
According to the implementation PR, yes
As the new section styles feature requires styles generated per application of block style variations so they can be nested, there's superfluous CSS generated in the frontend theme.json stylesheet.
My change reinstates that duplication. I think maybe only the GlobalStylesUI needs to generate variations styles - they'll then be passed to the BlockEditorProvider wrapping the preview and other controls
cc @aaronrobertshaw for fact check
There was a problem hiding this comment.
I think maybe only the GlobalStylesUI needs to generate variations styles
The recent commit does that 0afbe6c
No more duplicates in the editor canvas 🚀
There was a problem hiding this comment.
Thanks for the quick turnaround addressing that.
Your read on things was correct. If every generation of global styles created the variation styles they'd include ones with the generic block type's selector. The latest update here restore the ability to skip variation style generation avoiding the effective duplicates as noted.
There was a problem hiding this comment.
Nice. Thanks for the reviews, everyone!
tellthemachines
left a comment
tellthemachines
left a comment
There was a problem hiding this comment.
Thanks for fixing this! The preview now works correctly for all block style variations.
…enerateGlobalStyles function in render.tsx and update GlobalStylesUI to utilize this new option.
aaronrobertshaw
left a comment
aaronrobertshaw
left a comment
There was a problem hiding this comment.
Bit slow to the party but this tests well for me also.
LGTM 🚀
What?
After #72464, block style variation previews stopped working.
This PR fixes that by passing in the required
variationStylesoption from<GlobalStylesUI />to informtransformToStylesthat it needs to generate variation styles.Props to @tellthemachines for spotting this one in #73533 (review)
Why?
So the variation styles work.
How?
Pass in the object, yo!
Testing Instructions
Activate TT5 or some other theme with block variations.
Head to /wp-admin/site-editor.php?p=%2Fstyles§ion=%2Fblocks%2Fcore%252Fgroup (using TT5, which has group variations)
Check that you can see the preview of your changes to each variation.
Screenshots or screencast
Before
Kapture.2025-11-25.at.17.44.26.mp4
After
Kapture.2025-11-25.at.17.42.00.mp4