Theme Variant "Other" Styles UI Proposal

[richtabor]

Currently, each style variation is "styled" to resemble the actual theme.json variants.

As I've explored theme variants more, a common issue I'm seeing is that the style variation components can look quite similar to each other — especially if the background color hasn't changed. And I'd say it's very likely that this will be the case.

What we have today

Below is an example of the current styles interface, with four different styles, of which three have very different color palettes, although the background and foreground colors are the same. We don't have labels to name each style, but even if we did, this UI is confusing as three of the four options look exactly the same.

Proposal: Bringing color palettes into the variant UI

By design, these variants can be as bold and creative as the designer intends (to the point where each variant is completely different), or as simple as a different color palette. You would never know in the current UI pictured above that each of the four styles have very different color palettes to set the tone of the style.

So let's consider adding a color palette to a style variant's selector (perhaps with a max of five, like we do in the Global Styles > Colors panel) so that more of the actual style of the variant is depicted in the UI. I've made a few other changes design-wise to accommodate, but the original concept is still the same.

Those same four styles above, would come across like this:

And here is a screenshot that would resemble some of the variants explored with Twenty Twenty Two added (to show more simple variants like above, with more stylistic variants like we're exploring in TT2:

Wrapping up

Overall, having more clarity with style variants will help folks understand what they are changing and applying to their site.

I have a quick prototype here to see it first hand.

Let me know what you think :)

[piermario]

I think it's a great idea.

[bgardner]

Even though my favorite colors are—shocker—black and white, I am in full support of this color idea. So good.⚡️

[0aveRyan]

The color palette used this way definitely surfaces something that felt hidden until clicked at present.

If a variant had say 12 colors, how would the UI show, just the first 6? Would showing the background, text, link colors only be less overwhelming? I love the idea of showing colors, but showing each color equitably when it's used sparingly in application is something I think about here a bit differently than the color picker control.

Separate but related is exposing type treatments - the two characters really don't do much, despite taking up a decent amount of the UI. I think they have a wonderful aesthetic, but limited utility. I'd be curious to see the Block Preview system used with these variants akin to the Block Inserter.

I'd love to see a sort of intermediary preview, that shows a heading and paragraph, set in the variant's colors, perhaps shows the full color palette if a more limited set is shown on the card, all on hover/focus.

If a theme has 2-3 dozen style variations, clicking each one to browse feels like a lot of labor. With a preview, it might be easier to decide on 3-5 to click and preview before making a final selection.

[carolinan]

There are style variations that don't rely on changing the color palette too, like having a boxed layout by adding spacing to the body and changing content width.

The style variations also need to have an accessible name, this can be visible (preferred) or visually hidden.

[richtabor]

There are style variations that don't rely on changing the color palette too, like having a boxed layout by adding spacing to the body and changing content width.

I suppose visual labels would help in these cases, though better color palette visuals wouldn’t hurt here either.

[richtabor]

If a variant had say 12 colors, how would the UI show, just the first 6? Would showing the background, text, link colors only be less overwhelming?

I was thinking a five color max, just like we already have for the Styles > Colors UI.

A preview could be interesting, but I wonder what real value it would add that could get the point across better then clicking and seeing the whole page change. May be interesting to try though.

[0aveRyan]

A preview could be interesting, but I wonder what real value it would add that could get the point across better then clicking and seeing the whole page change. May be interesting to try though.

Yep no more than 5 sounds good. I think the value of the preview is to show font sizes, appearance and case treatments, block spacing and eventually font family.

If three variants all share the same colors, a hover preview is a faster discovery than applying the styles. Hover with a preview feels more like a sample than a commitment that then requires reversal.

Also, if a palette is largely tame -- off-white blue and navy but then a neon blue accent -- by showing the colors in circles of the same size and color, it presents the colors equally, where the neon would be something you likely sprinkle in sparingly in design. Having a preview just showing the foreground and background, perhaps a primary accent color applied to the heading, presents a real world demo. For a user inexperienced at looking at color swatches and seeing how they might apply, I think a preview could help for color and the other previously mentioned factors.

[mtias]

Thanks for sharing! The current previews are definitely quite rough still. One of the main challenges is that they aim to represent how much a site would change upon switching styles — hence representing background, text, and link at the very least in the original scope. Including the color palette might seem appealing at first but I'd challenge how useful it is in practice. If the different colors are not actually used for important elements (background, text, links, etc) the user might not get to realize any effect and it might even confuse them regarding whether something has changed at all.

I still think it's worth refining the heuristics and thinking whether some of these things could be shown in addition to the main Elements represented.

[justintadlock]

More important than anything is a text label.

I like the idea of adding some palette colors here (five, as mentioned above, would be a good max). However, this could also be problematic if it is auto-pulled from the first five in a palette. For example, that would pull just black, white, and neutral grays from mine, which are likely to be the same or similar across variations. I'd like some control over which colors are shown if we went this route.

[richtabor]

One of the main challenges is that they aim to represent how much a site would change upon switching styles — hence representing background, text, and link at the very least in the original scope. Including the color palette might seem appealing at first but I'd challenge how useful it is in practice.

I think the real benefit in this proposal is that you can see a visual difference between different styles that may be similar in nature. And I suppose seeing what’s available within the style (color palette for example) helps me decide which I’d enjoy using, even if those colors are not immediately visible.

With today’s experience (using the theme/screenshot from above as an example), you can’t tell a stylistic difference between three of the four styles, unless the color palette colors happened to be used on the index template.

I do think that perhaps a preview would be interesting in addition here, with a “style guide” maybe. As a confirmation of what kind of changes you’d expect.

[pablohoneyhoney]

It is wonderful to see provocations like this, caring to making Styles clearer.

I'm a bit on the fence about this proposal at this moment, given Styles hasn't completely matured yet. Left some notes on its current state of the main panel, for example. #38934

I'm not sure we've widely stressed the current Styles preview representation (how the chief elements get visualized in the two swatches, typography color, or the background). Too many swatches can also be confusing for users as similar secondary/tertiary colors might be used, limiting the discerning factor. This is even more pronounced for users with alternative color capacities.

In this particular example, I'm not sure the added swatches provide much value, and the simpler preview can deliver the intended difference (if the background is affected correctly).

It is also true that the mere interaction with the styles changing the site can surface more contextually the nuances you raise. We should consider the importance of the canvas as well.

Furthermore, originally there was an additional interface via the icon that triggered a whole stylesheet-like view so all theme objects would be visualized at once, affording to see more granularly or expansively styles switching or elements modifications –since the contextual page might miss some. While this feature hasn't been prioritized yet, it could also resolve some of the aspects raised.

I'd also note that I'd personally avoid the roundness of the styles previews proposed above, as it seems foreign to the rest of the language of the editor. And based on what's noted above, labels could be useful.

[richtabor]

In this particular example, I'm not sure the added swatches provide much value, and the simpler preview can deliver the intended difference (if the background is affected correctly).

I agree — I'd say its much more valuable when the background/foreground colors of a style are not varying, like this:

Otherwise the options are visually the same (what we have today):

I'd also note that I'd personally avoid the roundness of the styles previews proposed above, as it seems foreign to the rest of the language of the editor.

Good point ✅

Furthermore, originally there was an additional interface via the icon that triggered a whole stylesheet-like view so all theme objects would be visualized at once, affording to see more granularly or expansively styles switching or elements modifications –since the contextual page might miss some. While this feature hasn't been prioritized yet, it could also resolve some of the aspects raised.

I also think this is an interesting idea to explore, though I'm not yet convinced that the proper flow would be to select a style, then view the "style guide" to see what components are changed (instead of having a better idea before selecting the style). That particular idea seems more of a granular style "builder", instead of a source of a particular style's attributes — though like you said, it could operate additionally that way.

An alternative approach would be perhaps to let style variants declare the two color swatches we are using in the style preview — to better differentiate the styles (instead of automating the style selection of those components, which will likely result in like-styles.

[aurooba]

I like the original idea, conceptually, however, seeing those colour palettes in that tiny space really stressed me out. Instead I would prefer to see the following:

1. Text labels, please – names are highly effective tools to communicate the difference between styles. I can also see potential for replacing the two letters 'Aa' with the name of the variant itself (and perhaps also making the variants single column, giving each variant some breathing room).

2. I love the alternative approach @richtabor suggested: being able to choose which two colours get highlighted.

3. Previews on hover! Having to select and apply a variant just to get a clearer sense of what it will change feels like too much of a commitment.

[alexstine]

Text labels would be a must for this. At minimum, accessibility only labels.

[critterverse]

👋 Hey all, sharing a design here for how we could use text labels (similar to the labels used in the inserter) to add some clarity around the style switcher UI, which many folks in this thread are saying would be a big improvement to the current experience.

On hover, the text label could change to match the hovered outline color.

Figma file

[spencerfinnell]

When I used to offer style variations via the Customizer I also attempted to show the variations through the color palette as well but ultimately ran in to similar issues as described above. In the end I found using a screenshot to be the most representative.

A theme has screenshot.png. Would it be possible to use a screenshot-stylename.png image if one is available in the theme?