Section Styles: Resolve ref values in variations data #63172
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
added
[Type] Bug
aaronrobertshaw
commented
Jul 5, 2024
aaronrobertshaw
commented
Jul 5, 2024
Comment on lines
+260
to
+263
| { | ||
| settings: mergedConfig?.settings ?? globalSettings, | ||
| styles: mergedConfig?.styles ?? globalStyles, | ||
| }, |
There was a problem hiding this comment.
Creating a "complete" theme.json object seemed the easiest approach to reason about when ref values could target any value within settings or styles etc.
|
Size Change: +140 B (+0.01%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
aaronrobertshaw
requested review from
spacedmonkey and
tellthemachines
as code owners
|
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. |
andrewserong
approved these changes
Jul 8, 2024
There was a problem hiding this comment.
This is testing nicely for me in the post and site editors, and on the site frontend. When I update the element's background color to another explicit color, e.g. red, the referenced values are also updated for variations, and the output is correct:
Thanks for all the inline comments and clear tests!
LGTM
ramonjd
approved these changes
Jul 8, 2024
There was a problem hiding this comment.
This is working as advertised for me. I can't seem to break it and the refs are resolved in theme.json and the variations as I'd expect.
Before, the variation refs were not being output at all in the styles, after they're resolved correctly
Here is my test JSON for the record
theme.json
{
"$schema": "../../schemas/json/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "840px",
"wideSize": "1100px"
},
"color": {
"palette": [
{
"name": "Accent",
"slug": "accent",
"color": "#0073aa"
},
{
"name": "Base",
"slug": "base",
"color": "#32373c"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--accent)"
},
"elements": {
"button": {
"border": {
"color": "transparent",
"radius": "0.25em",
"style": "solid",
"width": "1px"
},
"color": {
"background": { "ref": "styles.color.background" },
"text": "var(--wp--preset--color--base)"
},
"spacing": {
"padding": {
"bottom": "0.1111em",
"left": "1.25em",
"right": "1.25em",
"top": "0.32em"
}
}
}
},
"blocks": {
"core/button": {
"border": {
"color": { "ref": "styles.elements.button.border.color" },
"radius": { "ref": "styles.elements.button.border.radius" },
"style": { "ref": "styles.elements.button.border.style" },
"width": { "ref": "styles.elements.button.border.width" }
},
"color": {
"background": { "ref": "styles.elements.button.color.background" },
"text": { "ref": "styles.elements.button.color.text" }
},
"spacing": {
"padding": {
"bottom": { "ref": "styles.elements.button.spacing.padding.bottom" },
"left": { "ref": "styles.elements.button.spacing.padding.left" },
"right": { "ref": "styles.elements.button.spacing.padding.right" },
"top": { "ref": "styles.elements.button.spacing.padding.top" }
}
},
"variations": {
"outline": {
"border": {
"color": "currentColor",
"width": { "ref": "styles.elements.button.border.width" }
},
"color": {
"background": { "ref": "styles.elements.button.color.text" },
"text": { "ref": "styles.color.background" }
},
"spacing": {
"padding": {
"bottom": { "ref": "styles.elements.button.spacing.padding.bottom" },
"left": { "ref": "styles.elements.button.spacing.padding.left" },
"right": { "ref": "styles.elements.button.spacing.padding.right" },
"top": { "ref": "styles.elements.button.spacing.padding.top" }
}
}
}
}
}
}
}
}
github-actions
bot
removed
the
Backport to WP 6.6 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Jul 8, 2024
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: daviedR <daviedr@git.wordpress.org>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: 98c134b |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jul 9, 2024
This is fixed by preloading the styles. Fixes #61589. Fixes #6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. git-svn-id: https://develop.svn.wordpress.org/trunk@58690 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jul 9, 2024
This is fixed by preloading the styles. Fixes #61589. Fixes WordPress/wordpress-develop#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. Built from https://develop.svn.wordpress.org/trunk@58690 git-svn-id: http://core.svn.wordpress.org/trunk@58092 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Jul 9, 2024
This is fixed by preloading the styles. Fixes #61589. Fixes WordPress/wordpress-develop#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. Built from https://develop.svn.wordpress.org/trunk@58690 git-svn-id: https://core.svn.wordpress.org/trunk@58092 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jul 9, 2024
Fixes #61589. Fixes #6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. git-svn-id: https://develop.svn.wordpress.org/trunk@58691 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jul 9, 2024
Fixes #61589. Fixes WordPress/wordpress-develop#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. Built from https://develop.svn.wordpress.org/trunk@58691 git-svn-id: http://core.svn.wordpress.org/trunk@58093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Jul 9, 2024
Fixes #61589. Fixes WordPress/wordpress-develop#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. Built from https://develop.svn.wordpress.org/trunk@58691 git-svn-id: https://core.svn.wordpress.org/trunk@58093 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes: #63159
What?
Retrieve reference values when generating styles for block style variations.
Why?
Without resolving
refvalues some styles may not be generated.How?
When retrieving variation data, to generate styles from, also retrieve any referenced values.
Testing Instructions
Example theme.json snippet
{ "styles": { "elements": { "button": { "border": { "color": "transparent", "radius": "0.25em", "style": "solid", "width": "1px" }, "color": { "background": "var(--wp--preset--color--accent)", "text": "var(--wp--preset--color--base)" }, "spacing": { "padding": { "bottom": "0.5em", "left": "1.25em", "right": "1.25em", "top": "0.5em" } } } }, "blocks": { "core/button": { "border": { "color": { "ref": "styles.elements.button.border.color" }, "radius": { "ref": "styles.elements.button.border.radius" }, "style": { "ref": "styles.elements.button.border.style" }, "width": { "ref": "styles.elements.button.border.width" } }, "color": { "background": { "ref": "styles.elements.button.color.background" }, "text": { "ref": "styles.elements.button.color.text" } }, "spacing": { "padding": { "bottom": { "ref": "styles.elements.button.spacing.padding.bottom" }, "left": { "ref": "styles.elements.button.spacing.padding.left" }, "right": { "ref": "styles.elements.button.spacing.padding.right" }, "top": { "ref": "styles.elements.button.spacing.padding.top" } } }, "variations": { "outline": { "border": { "color": "currentColor", "width": { "ref": "styles.elements.button.border.width" } }, "color": { "text": { "ref": "styles.elements.button.color.background" } }, "spacing": { "padding": { "bottom": { "ref": "styles.elements.button.spacing.padding.bottom" }, "left": { "ref": "styles.elements.button.spacing.padding.left" }, "right": { "ref": "styles.elements.button.spacing.padding.right" }, "top": { "ref": "styles.elements.button.spacing.padding.top" }, } } } } } } } }Screenshots or screencast