Assembler: Use variation partials and move styles.blocks.variations to styles.variations

[richtabor]

Follow up to WordPress/gutenberg#62712, which adjusts where block style variations are defined with in theme style variations, as well as better leveraging style variation partials.

To test, load up WordPress/gutenberg#62712, then change to alternate color palettes. It should work exactly as previously.

[richtabor]

Relies on WordPress/gutenberg#62712 merged, into Gutenberg and perhaps for WordPress 6.6.

[github-actions]

Preview changes

I've detected changes to the following themes in this PR: Assembler.

You can preview these changes by following the links below:

• Preview changes for Assembler

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

[glendaviesnz]

Tested well for me on Gutenberg trunk (18.7RC) and WP 6.5.5

[richtabor]

Went ahead and tweaked the form input styles to work better across all block style variations as well.

[richtabor]

@alaczek @miksansegundo Do you mind giving this another good look over? Much appreciated! 🙇

[miksansegundo]

I'm still reviewing this.

So far, I have found some issues with some variations:

• A low contrast between the background and text colors on the footer.
• Some colors in the variation card aren't applied in the preview.

[miksansegundo]

A low contrast between the background and text colors on the footer.

This issue is not in the variations but in the preview of the Dotcom theme details page. I'm debugging it.

Some colors in the variation card aren't applied in the preview.

This issue affects the editor and assembler and is in the JSON files of Auburn, Meadow, Fluorescent, Citron, Sunset, Blush, and Tangerine. Can we update the default colors for these?

I would expect those variations to use some of their most representative colors in their default section style variation, but they don't, and when choosing them in the editor or Assembler flow, they look black and white.

Here are the previews for Auburn, as an example:

[richtabor]

I would expect those variations to use some of their most representative colors in their default section style variation, but they don't, and when choosing them in the editor or Assembler flow, they look black and white.

This issue affects the editor and assembler and is in the JSON files of Auburn, Meadow, Fluorescent, Citron, Sunset, Blush, and Tangerine. Can we update the default colors for these?

I would expect those variations to use some of their most representative colors in their default section style variation, but they don't, and when choosing them in the editor or Assembler flow, they look black and white.

Here are the proper colors, as seen in the Assembler theme when viewing it locally. They are representative of their colors. Is the demo site using G 18.7+?

Meadow	Citron

[richtabor]

We should also update the demo site for Assembler to showcase more content (perhaps the second pattern could have a section style, but not the third—don't want to overdo it.

[miksansegundo]

Got it. It's working fine in the editor.

My confusion was that some of their colors, which look to me as the most representative, are used in the section style variations 1 to 3, not necessarily on the default variation. Therefore, those colors won't appear on the previews until we add their corresponding CSS classes to some patterns.

Let's follow up with any adjustments to make the dotCom previews look better in:

1. Theme showcase previews show the wrong color on the footer
2. Assembler highlights the default colors on the variation miniatures, and many of them look black and white