Assembler: Add support for upcoming section style variations

[richtabor]

Note that not every theme style variation has a "Dark 2" style (intentionally). Some themes are more minimal than others.

Testing

1. Activate the theme.
2. Add three patterns.
3. Add a different section style to each one.
4. Switch to different style variations in the site editor.
5. See changes.

Visuals

Blueberry:

Tangerine:

Mauve:

Linen:

Rose:

Pearl:

Lilac:

[github-actions[bot]]

Preview changes

I've detected changes to the following themes in this PR: Spearhead (Classic), Otis, Assembler, Erma.

You can preview these changes by following the links below:

• Preview changes for Spearhead (Classic) (child of seedlet)
• Preview changes for Otis
• Preview changes for Assembler
• Preview changes for Erma

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.

⚠️ Note: Child themes are dependent on their parent themes. You will have to install the parent theme as well for the preview to work correctly.

[richtabor]

You can preview these changes by following the links below:

• with the next version of Gutenberg.

[richtabor]

While running Gutenberg trunk (and with the next version of Gutenberg) you will see these block style variations on Group, Columns, and Column blocks.

[richtabor]

I've updated all the variations with section styles, added a few, removed a few.

I'm currently using light, dark, and light-2, etc. I'm thinking about just using something generic, like section-1 (resolving to is-style-section-1. As not every one has every type of section style (light, light 2, dark, dark 2, and bright).

[apeatling]

I think I prefer the section-N naming for classnames, although I don't have a strong feeling on it.

[richtabor]

The tricky part (and maybe it's ok) is that the UI will render "Section 1" rather than "Light". The titles for each variation do not get applied when color-only variations are selected.

Perhaps that can be tweaked on the Gutenberg side though.

[miksansegundo]

How are you testing these? I'll review this in-depth tomorrow.

I'm guessing we can test this on the editor, the Dotcom onboarding for themes without style variations, and Assembler flow.

[richtabor]

The tricky part (and maybe it's ok) is that the UI will render "Section 1" rather than "Light". The titles for each variation do not get applied when color-only variations are selected.

I'm leaning towards using more generic style names, like "is-style-section-1", etc.

It's a bit odd in the short term, while these are expressed as buttons with text labels, but in a near iteration we will depict these visually with the actual colors of the variations—so you see each one before you apply the style.

Also, it resolves the current clunkiness around primarily dark variations, where "is-style-dark" and "is-style-dark-2" can only be darker than the default (reducing the amount of design variance). To have as much variance as the primarily light variations, we need to use something more generic.

[richtabor]

How are you testing these? I'll review this in-depth tomorrow.

Activate the theme. Add three patterns. Add a different section style to each one. Switch to different style variations in the site editor. See changes.

[richtabor]

I was thinking of removing that footer color too, and assigning one of the section styles instead as a default.

[richtabor]

Looks good, let's merge.