-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Section Styles: Resolve ref values in variations data #63172
Conversation
{ | ||
settings: mergedConfig?.settings ?? globalSettings, | ||
styles: mergedConfig?.styles ?? globalStyles, | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
|
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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
![image](https://private-user-images.githubusercontent.com/14988353/346434427-24eed2b7-7650-4923-b044-7d177d1c8635.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDg4NTgsIm5iZiI6MTcyNDEwODU1OCwicGF0aCI6Ii8xNDk4ODM1My8zNDY0MzQ0MjctMjRlZWQyYjctNzY1MC00OTIzLWIwNDQtN2QxNzdkMWM4NjM1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIzMDIzOFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIzYmVjMzJkYjM2YjQ2MmZhOGYxZGRjYTcwNmFmMTEzM2Q4YzI3MjdiYTAzMDg0ODA5NmYzNTk2MmJmZmJiN2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LmLkQv4BVDFYgzzJMicyowZn_Vf0sSOpXLVPuLZP5pA)
Thanks for all the inline comments and clear tests!
LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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" }
}
}
}
}
}
}
}
}
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>
I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: 98c134b |
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
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
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
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
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
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
This is fixed by preloading the styles. Fixes #61589. Fixes WordPress#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. git-svn-id: https://develop.svn.wordpress.org/trunk@58690 602fd350-edb4-49c9-b593-d223f7449a82
Fixes #61589. Fixes WordPress#6989. See WordPress/gutenberg#63172. Props aaronrobertshaw, andrewserong, ramonopoly. git-svn-id: https://develop.svn.wordpress.org/trunk@58691 602fd350-edb4-49c9-b593-d223f7449a82
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>
Fixes: #63159
What?
Retrieve reference values when generating styles for block style variations.
Why?
Without resolving
ref
values 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
Screenshots or screencast