Add section styles

[carolinan]

This is a suggestion for adding section styles, block style variations that can be applied to, in this case, the group block.

Each style would use an accessible combination of two or more colors from the palette, and each style needs to continue to work when the user changes the color palette preset.

The purpose is to make it easy for users to change the style of a part of their content, pattern, or templates.

Section styles are .JSON files placed in the styles folder or a subfolder to styles. Each file needs to include: schema, version, title, slug, one ore more block types, and the styles.

Section styles can not include settings. For example, it can set a font size, but not add new font size options to the typography control.

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "title": "Base",
    "slug": "section-1",
    "blockTypes": [ "core/group" ],
    "styles": {}
}

Each the section style would include:

• Background color and text color. Link color, if different from text color.
• Spacing
• Styles for elements:
  • Buttons
  • Headings

The CSS for these style variations are often repeated multiple times on the same page, which is why I recommend limiting the styles.

[richtabor]

Here's an example I've found pretty solid (we'd replace colors, make sure we do what's suitable for each):

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "slug": "section-3",
    "title": "Style 3",
    "blockTypes": [
        "core/group",
        "core/columns",
        "core/column"
    ],
    "styles": {
        "color": {
            "background": "var(--wp--preset--color--theme-5)",
            "text": "var(--wp--preset--color--theme-1)"
        },
        "blocks": {
            "core/separator": {
                "color": {
                    "text": "color-mix(in srgb, currentColor 25%, transparent)"
                }
            }
        },
        "elements": {
            "button": {
                "color": {
                    "background": "var(--wp--preset--color--theme-1)",
                    "text": "var(--wp--preset--color--theme-5)"
                },
                ":hover": {
                    "color": {
                        "background": "color-mix(in srgb, var(--wp--preset--color--theme-1) 85%, #000)",
                        "text": "var(--wp--preset--color--theme-5)"
                    }
                }
            }
        }
    }
}

[richtabor]

Worth nothing that each color variation should define its own as well, like this: https://github.com/Automattic/themes/blob/trunk/assembler/styles/colors/01-blueberry.json#L155-L202

[jasmussen]

Thanks for the code samples Rich! I tried my hand at a starting point for this effort in #151.

[jasmussen]

What remains on this one?

[carolinan]

It is starting to bug me a little bit that the pink one is style-1, when pink is not the first color in the palette 😆 But maybe that is just me.

[jasmussen]

I'm happy to spin up a PR to change the order. Any preferred order?

[carolinan]

I would prefer if the order matched the default palette. So style-1 would be contrast

But this would cause conflicts with new PR's, perhaps it needs to be done later.

[jasmussen]

Good heuristic. We'll keep this issue open as something to come back to for that purpose.