Dynamic references in theme.json are not resolved in the site editor

[oandregal]

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.

[oandregal]

A mechanism like this one should aim to expose the design links to the users. They need to understand where the value comes from so if they decide to "break" it it'll be a conscious decision. I ellaborated about this more at #39432 (comment)

Though a first step is just to render the proper value and make the site editor look like the front-end.

[oandregal]

cc @scruffian

[Gierand]

A similar problem with the rendering of colors in the site editor occurs when you add root padding support in the settings.

"settings": {
   "useRootPaddingAwareAlignments": true
}

No error is generated, but no change is made during editing.

[Mamaduka]

Oh hey, @oandregal 👋

I see that @scruffian has also created an issue for this bug - #42884. So let's close one of these.

[ndiego]

A similar problem with the rendering of colors in the site editor occurs when you add root padding support in the settings.

I was able to replicate @Gierand's comment and have created an issue: #43033