The `ref` values doesn't work on `theme.json` block style variations since Gutenberg 18.7.0

[daviedR]

Description

After updating to Gutenberg 18.7.0 or Gutenberg 18.7.1, the ref values feature doesn't work on block style variations on theme.json. This works on the previous version Gutenberg 18.6.1.

** This issue also happens on WordPress 6.6 RC versions (without Gutenberg installed)

Step-by-step reproduction instructions

Copy this snippet to the theme.json.
We define the button element styling.
The normal core/button styling is inherited from the button element using ref values.
And then we want to change the outline button text color to use the button element's background color.

{
    "styles": {
        "elements": {
            "button": {
                "border": {
                    "color": "transparent",
                    "radius": "0.25em",
                    "style": "solid",
                    "width": "1px"
                },
                "color": {
                    "background": "var(--wp--preset--color--accent)",
                    "text": "var(--wp--preset--color--base)"
                },
                "spacing": {
                    "padding": {
                        "bottom": "0.5em",
                        "left": "1.25em",
                        "right": "1.25em",
                        "top": "0.5em"
                    }
                }
            }
        },
        "blocks": {
            "core/button": {
                "border": {
                    "color": { "ref": "styles.elements.button.border.color" },
                    "radius": { "ref": "styles.elements.button.border.radius" },
                    "style": { "ref": "styles.elements.button.border.style" },
                    "width": { "ref": "styles.elements.button.border.width" }
                },
                "color": {
                    "background": { "ref": "styles.elements.button.color.background" },
                    "text": { "ref": "styles.elements.button.color.text" }
                },
                "spacing": {
                    "padding": {
                        "bottom": { "ref": "styles.elements.button.spacing.padding.bottom" },
                        "left": { "ref": "styles.elements.button.spacing.padding.left" },
                        "right": { "ref": "styles.elements.button.spacing.padding.right" },
                        "top": { "ref": "styles.elements.button.spacing.padding.top" }
                    }
                },
                "variations": {
                    "outline": {
                        "border": {
                            "color": "currentColor",
                            "width": { "ref": "styles.elements.button.border.width" }
                        },
                        "color": {
                            "text": { "ref": "styles.elements.button.color.background" }
                        },
                        "spacing": {
                            "padding": {
                                "bottom": { "ref": "styles.elements.button.spacing.padding.bottom" },
                                "left": { "ref": "styles.elements.button.spacing.padding.left" },
                                "right": { "ref": "styles.elements.button.spacing.padding.right" },
                                "top": { "ref": "styles.elements.button.spacing.padding.top" },
                            }
                        }
                    }
                }
            }
        }
    }
}

Screenshots, screen recording, code snippet

Expected result:

Result of Gutenberg 18.7, the outline button has the same text color as the normal button. This means, the ref value on the outline style variation doesn't work.

Environment info

WordPress 6.5.5 + Gutenberg 18.7.1
or
WordPress 6.6 RC

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[aaronrobertshaw]

Thank you for taking the time to write up this detailed issue @daviedR 🙇

I'm still investigating the root cause and potential solutions but early findings indicate this issue has been affecting variations for a couple of Gutenberg releases. Depending on how the variations were defined, the problem might have been masked by some duplicate styles that weren't removed until #62465 which landed in 18.7 and was backported to 6.6.

These "duplicate" styles though would have contained the correct values as they were generated with the full context of all the other styles in theme.json. For variation styles to be applied on a per-application or instance basis, to support nesting, they are currently generated as if they are their own mini-theme.json partial. Unfortunately, this partial set of data currently doesn't contain all the potential referenced style values.

I'll continue to look into this one and will update when I know more.