-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Update: Use theme and core styles as defaults on the global styles #26786
Update: Use theme and core styles as defaults on the global styles #26786
Conversation
Size Change: +531 B (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
👋 I've done some testing of this PR and this is what I see. How it works in the master branchThe UI controls only reflect user choices but not base styles (theme+core), hence the controls show the default value when the user hasn't chosen any: How it works in this branch (using preset values)Updated the theme.json of TwentyTwentyOne blocks theme to look like this: "core/post-date": {
"styles": {
"typography": {
"fontSize": "var(--wp--preset--font-size--extra-small)",
"lineHeight": "var(--wp--custom--line-height--body)"
},
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--green)"
}
}
}, When I add the block to the editor I see it correctly styled, but the UI controls behave weirdly:
How it works in this branch (using raw values)Updated the theme.json of TwentyTwentyOne blocks theme to use the corresponding raw values for the presets above: "core/post-date": {
"styles": {
"typography": {
"fontSize": "16px",
"lineHeight": "1.7"
},
"color": {
"background": "#000000",
"text": "#D1E4DD"
}
}
}, The editor is correctly styled and the UI controls do reflect properly the values: |
Based on my testing above, my first instinct is to think that we want it to work when using presets, otherwise it produces confusing results. It's highly likely that theme authors use presets to set the values of the style properties most of the time ― TwentyTwentyOne does and so the other themes I've checked. |
7fc85d3
to
651526d
Compare
Hi @nosolosw, Thank you for the review. We now handle the case where variable references are used. |
I think we could do with some tightening up of the API, so it doesn't see an explosion for each degree of freedom we want to give the consumer. I think we should optimize for the main use case:
The question is how do we allow to retrieve the specific user values if there's one. There are a few options:
// Main use case: get merged value.
const color = getStyleProperty( 'core/paragraph', 'color' );
// Use case: get both values.
const { user, merged } = getStyleProperty( 'core/paragraph', 'color', true );
// Main use case: get merged value.
const color = getStyleProperty( 'core/paragraph', 'color' );
// Use case: get both values.
const color = getStyleProperty( 'core/paragraph', 'color' );
const userColor = getStyleProperty( 'core/paragraph', 'color', 'user' );
// Main use case: get merged value.
const color = getStyleProperty( 'core/paragraph', 'color' );
// Use case: get both values.
const color = getStyleProperty( 'core/paragraph', 'color' );
const userColor = getStylePropertyFromUserOrigin( 'core/paragraph', 'color' ); I listed them in order of personal preference. I'd rather not do 3, though. What do you think? |
651526d
to
db78beb
Compare
Hi @nosolosw thank you for the suggestions. I updated the code to use option 2. |
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.
I submitted a fix to prevent some bad data input, other than that this works so can 🚢
As a potential iteration on this code, I'd like getValueFromVariable
and getPresetVariable
hidden from the UI panels. They shouldn't have to know these internal things, rather this should be getStyleProperty
/ setStyleProperty
responsibility to do.
Currently, the themes can set styles using theme.json but on the global styles editing UI even if the theme sets some styles, things appear empty, making it hard for the user the make small adjustments.
This PR makes sure the editing UI of global styles reflects the styles set by the theme and core.
How has this been tested?
I added the following config to theme.json of 2021 blocks theme:
I opened the site editor, and on the global styles sidebar, Post Date panel I verified the UI reflected the styles configured by the theme.