-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Closed
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended
Description
Description
We've introduced a new mechanism to refer to a different style dynamically at #41696 which allows us to do things such as:
"styles": {
"color": {
"background": { "ref": "styles.color.text" },
"text": "yellow"
}
}In the example, the result would be that the text and background colors are the same (yellow).
While this works in the front-end it doesn't in the site editor:
- the styles box does not render the background
- the color tools do not render the background
- the site editor breaks if the user tries to edit the background color
| Styles | Color tools | Site editor |
|---|---|---|
![]() |
![]() |
![]() |
Step-by-step reproduction instructions
- Use TwentyTwentyTwo theme and update the styles.color values to be:
"background": { "ref": "styles.color.text" },
"text": "yellow"
- Go to the front-end and verify that it works as expected.
- Go to the site editor and open the Global Styles Toolbar. Click on Colors and then in the Backgound element. It'll throw an error.
Environment info
I can reproduce this is trunk.
Metadata
Metadata
Assignees
Labels
Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended



