Theme showcase preview bug: section style variation CSS class in Assembler footer

[miksansegundo]

What

Testing link for Auburn: https://public-api.wordpress.com/wpcom/v2/block-previews/site?stylesheet=pub%2Fassembler&language=en&viewport_height=1040&viewport_unit_to_px=true&calypso_token=assembler&style_variation=auburn

API result	Theme preview

There seems to be a bug on the UI side because the variation CSS class gets the color variables of a different variation with different colors. Maybe is in the component https://github.com/Automattic/wp-calypso/blob/edaa0b48f93406895b2f3822cbcd00d17c368697/client/my-sites/theme/main.jsx#L859 or the device switcher.

More context in p1720151785157939/1720044540.691809-slack-CRWCHQGUB

Why

The expectation is to see the section style colors on the patterns with CSS classes is-style-section-1 ... 4 of the style variation selected on the preview of the theme details page.

This preview must work well for adding section-style classes to patterns in the dotCom pattern library.

How

This bug seems caused by the class is-style-section-1 that we added in the Assembler theme demo site assemblerdemo.wordpress.com

[miksansegundo]

We have found that the same issue exists in the editor. See p1720515113194199/1720488176.889969-slack-CRWCHQGUB

The issue is solved using WP 6.5.5 and GB v18.7.1.

Dotcom Atomic sites are using WP 6.5.5 but not yet GB 18.7.1, so I have installed v18.7.1 manually to confirm the issue is gone.

Dotcom Simple sites seem to be using WP 6.6-RC1, and even with GB v18.7.1 updated in my sandbox, the issue is still there. This means this issue is reproducible with WP 6.5.4 and WP 6.6-RC1 with GB v18.7.0 and v18.7.1.

[miksansegundo]

This issue remains after the editor's issue was fixed.

I have found that the API works fine. See https://public-api.wordpress.com/wpcom/v2/block-previews/site?stylesheet=pub%2Fassembler&language=en&viewport_height=1040&viewport_unit_to_px=true&calypso_token=assembler&style_variation=meadow

The issue seems to be in the UI because it works when I pass the param style_variation= to the preview (iframe URL)

Current	With param style_variation=

I'll debug the UI and fix it this afternoon!

cc: @arthur791004 FYI

[miksansegundo]

I found that the issue is not in the UI but in the inline_css returned by the endpoint /rest/v1.2/themes/assembler because we inject those styles in the preview to avoid reloading the iframe.

The missing styles are inlined in the HTML document of the preview endpoint response and change for each color style variation (color palette). See https://public-api.wordpress.com/wpcom/v2/block-previews/site?stylesheet=pub%2Fassembler&style_variation=meadow

The styles in block-style-variation-styles-inline-css include the CSS class for the section style and its color presets. As an example, here the color and background colors for the section style variation section-1 using the color style variation Meadow

:root :where(.wp-block-group.is-style-section-1--c6720a44e04837f3aa0c39927f7a930c){
    background-color: var(--wp--preset--color--theme-4);
    color: var(--wp--preset--color--theme-5);
}

A solution is to generate those styles for each color variation in Assembler and add them to the prop inline_css of each variation in the response of the API /rest/v1.2/themes/assembler

[miksansegundo]

A fix is in D155048-code