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
|
gziolo
added
the
Global Styles
|
👋 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. |
jorgefilipecosta
force-pushed
the
update/use-theme-and-core-styles-as-defaults-on-global-styles
branch
from
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? |
jorgefilipecosta
force-pushed
the
update/use-theme-and-core-styles-as-defaults-on-global-styles
branch
from
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.
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.
oandregal
deleted the
update/use-theme-and-core-styles-as-defaults-on-global-styles
branch
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.