-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Global Styles: Add theme origin to getStyle #31267
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
Conversation
This aims to allow retrieval of a style value set by the theme itself. For example, when resetting a global style control.
|
Size Change: -82.4 kB (-6%) ✅ Total Size: 1.31 MB
ℹ️ View Unchanged
|
| return getValueFromVariable( mergedStyles, context, value ); | ||
|
|
||
| const styles = 'theme' === origin ? themeStyles : mergedStyles; | ||
| return getValueFromVariable( styles, context, value ); |
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 understand why we use both styleOrigin and styles. However, it's complex and I'm wondering how we can rewrite it so it's more straightforward for the reader. How about?
getStyle: ( context, propertyName, origin = 'merged' ) => {
if ( origin === 'theme' ) {
const value = get( themeStyles, path );
return getValueFromVariable( themeStyles, context, value );
}
if ( origin === 'user' ) {
const value = get( userStyles, path );
// We still need to use merged styles here because
// the presets used to resolve user variable may be defined
// a layer down (core, theme, or user).
return getValueFromVariable( mergedStyles, context, value );
}
const value = get( mergedStyles, path );
return getValueFromVariable( mergedStyles, context, value );
},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.
Good idea 👍
I've updated getStyle to the suggested structure. Thanks.
Description
Adds a
themeorigin to thegetStylefunction used to retrieve style values for Global Styles controls.The aim is to allow retrieval of a value set by the theme itself so Global Style controls can be reset to that theme value rather than simply unset completely.
How has this been tested?
Test Setup
edit-site/src/components/sidebar/spacing-panel.jsto set theresetValuesprop on the padding'sBoxControlTest Instructions
Screenshots
Types of changes
New feature.
Checklist:
*.native.jsfiles for terms that need renaming or removal).