Fix custom CSS output for block style variations

[isabel_brison]

Currently, custom CSS defined on the block itself is also used on its style variations, and any custom CSS added to the style variation is ignored.

​https://github.com/WordPress/gutenberg/pull/62526 fixes this issue by making sure any custom CSS attached to a block style variation is output correctly. The PHP changes require a core sync PR.

Trac ticket: https://core.trac.wordpress.org/ticket/61425

Syncs the changes from ​https://github.com/WordPress/gutenberg/pull/62526 to core.

While testing, I ran into an issue where custom CSS for a variation's inner block types isn't working on this branch. It works with Gutenberg trunk active.

<details>
<summary>Theme.json snippet added two TT4</summary>

{
        "styles": {
                "blocks": {
                        "variations": {
                                "Custom": {
                                        "blockTypes": [
                                                "core/group"
                                        ],
                                        "color": {
                                                "background": "skyblue"
                                        },
                                        "spacing": {
                                                "padding": {
                                                        "top": "1em",
                                                        "right": "1em",
                                                        "bottom": "1em",
                                                        "left": "1em"
                                                }
                                        },
                                        "blocks": {
                                                "core/group": {
                                                        "color": {
                                                                "background": "aliceblue"
                                                        },
                                                        "spacing": {
                                                                "padding": {
                                                                        "top": "1.5em",
                                                                        "right": "0.5em",
                                                                        "bottom": "1.5em",
                                                                        "left": "0.5em"
                                                                }
                                                        },
                                                        "css": "outline: 3px dashed red;"
                                                }
                                        }
                                }
                        },
                        "core/button": {
                                "variations": {
                                        "outline": {
                                                "spacing": {
                                                        "padding": {
                                                                "bottom": "calc(0.6rem - 1px)",
                                                                "left": "calc(1rem - 1px)",
                                                                "right": "calc(1rem - 1px)",
                                                                "top": "calc(0.6rem - 1px)"
                                                        }
                                                },
                                                "border": {
                                                        "width": "1px"
                                                },
                                                "css": "outline: 3px dashed ivory;"
                                        }
                                }
                        },
}

</details>

This Branch	With Gutenberg Active

| | |

Note on this branch alone, the custom css adding the red outline to inner Group blocks with the "Custom" block style variation is not getting applied.

Quickly dumping out some data and styles at different points, I could see the same variations data being given to the theme.json class in both Core and Gutenberg however the resulting CSS stylesheet for core omits the custom css for the variation's inner blocks.

I haven't had much success putting my finger on the cause just yet and need to switch onto some other tasks that need to make WP6.6 beta3. I'll try and help dig deeper tomorrow.

Some unit tests might also help debug and prevent some future regressions. What do you think?

P.S. We should also add a @since 6.6.0 note to get_styles_for_block flagging it as the release custom css for variations was added or "fixed".

Is it possible that Gutenberg is working due to the changes associated with ​https://github.com/WordPress/gutenberg/pull/62357?

Thanks for spotting that @aaronrobertshaw! I've fixed the issue now. It was due to one of the changes in Gutenberg, but I've managed to safely add part of that code here without affecting output for other custom CSS.

[isabel_brison]

In 58421:

Editor: fix custom CSS output for block style variations.

Adds custom CSS to the block style variation rules output by get_styles_for_block in class WP_Theme_JSON.

Props isabel_brison, aaronrobertshaw.
Fixes #61425.

Committed in r58421.