Add theme.json support for style previews for theme authors

[bgardner]

What problem does this address?

Given https://github.com/WordPress/gutenberg/pull/59514 and the conversation in https://github.com/WordPress/gutenberg/issues/59444, I think we should allow theme authors to use theme.json to set specific colors that would be given priority over the fallbacks (text color) and (button color/link color). With the merged PR, my Powder theme will result in this, which is less than helpful.

What is your proposed solution?

Add support in theme.json for something like this:

{
    "settings": {
        "example": [
            {
                "colors": [ "#0a0a0a", "#6d28d9" ]
            }
        ]
    }
}

cc: @richtabor @justintadlock @spencerfinnell

[colorful-tones]

I like the idea of this being a fallback. Perhaps now is an ideal time to propose a new entry in the theme.json for meta info.

{
    "meta": {
        "preview": [
            {
                "colors": [ "#0a0a0a", "#6d28d9" ]
            }
        ]
    }
}

However, I hate to see this linger because of such a suggestion as I do think it is a critical piece to surfacing better theme previews.

[bgardner]

@colorful-tones Worth noting that my proposal is not meant to be a fallback, rather priority #1. If it does not exist, fall back to what was added in https://github.com/WordPress/gutenberg/pull/59514.

[spencerfinnell]

Indeed, I think these definitions need to be used first to gain the benefit.

I think a list of colors that can be used where a palette is needed seems like a good starting point -- but some typography options could also be beneficial.

[justintadlock]

➕ 💯

This has come up before a year or two ago on another ticket, so I'm happy to see it being resurfaced. My preview colors never look right without me rearranging my color scheme system in theme.json. While I'm in favor of #59514 as a slightly better fallback (for some use cases), giving us themers control over this is the ideal solution.

This also feels like some very low-hanging fruit that would improve the theme dev experience (and the user experience as a result).

[spencerfinnell]

This has come up before a year or two ago on another ticket

Previous discussions/attempt to automatically derive a palette in https://github.com/WordPress/gutenberg/issues/38918

[richtabor]

What about something like this?

It follows the existing format of color.palette and leaves room for future example keys, say for duotone, gradients, etc.

And it's similar to example in block.json.

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

Would be great if the palette values could reference slugs, or leverage variables; not hard-coded color values.

[bgardner]

@richtabor I would absolutely love this.

[bgardner]

Since https://github.com/WordPress/gutenberg/pull/59514 is now in Gutenberg, what are the chances someone can work on implementing this, per @richtabor, so we can start testing?

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

[mikachan]

It follows the existing format of color.palette and leaves room for future example keys, say for duotone, gradients, etc. And it's similar to example in block.json.

I wasn't too familiar with example from block.json, but now having read the docs, I think using settings.example.color.palette would work great, plus it's inline with an existing property.

[bgardner]

Wanted to follow up on this issue (given work done in https://github.com/WordPress/gutenberg/pull/61327 and otherwise):

Not as terrible as my original screenshots above:

And this screen only shows one as well:

It would still be helpful for theme designers to choose, though.

[ndiego]

...
"settings": {
    "example": {
        "color": {
            "palette": [
                "",
                ""
            ]
        }
    },
...

Yes, I completely agree with this approach. I was working on a custom theme over the weekend and was baffled by the color indicators. Providing theme authors a way to configure this manually would be a massive improvement.