Theme showcase: better distinguish style variation options

[annezazu]

Quick summary

style.variations.1.mov

Steps to reproduce

Go to the WordPress.com Theme Showcase and select between different style variations for block themes. Notice they look too similar.

What you expected to happen

Style variations should be distinct and reflect the colors changing properly.

What actually happened

The style variations all look the same.

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

No response

[richtabor]

Well, that particular theme is styling that content strangely—and not accounting for the color change in the alternate style variations.

[richtabor]

I actually propose removing them from this grid view.

You're not deciding in this moment if you're going to use the theme, and this UI looks nothing like the same function on the single theme view—which is more in line with core's.

[annezazu]

Hmm I don't know about removing them. I would want to see in the grid if a theme came with variations at a glance along with patterns. If anything, I feel like we should better surface the themes with more power to them.

[richtabor]

I would want to see in the grid if a theme came with variations at a glance along with patterns.

I'd like if all block themes came with the same set of X color palettes. It doesn't have to be the full ~50 that Big Sky leverages, but perhaps the best 16 of those. And we can rotate them as trends change, etc.

The default styles/colors for each theme will still be super unique, but a standard set of palettes that work across could make the decision a bit less chaotic—i.e. "I like this theme, but these colors".

That way the decision is less "I like this theme because of the colors" and more of "I can use any of these colors with any of these."

[dsas]

That particular theme (stage) is due to be retired and replaced with Outnow. IIRC the oddness has been fixed there.

---

Intrigued by the idea of sharing the style variations. We tried something similar before with blockbase and child themes. We got very mixed results, we had to come up with a per theme way of opting out of some of the variations.

The problems included

• the variations not being different enough because it had five colours and the theme only made use of the first 2 or 3
• Themes hard coding extra colours outside of the palette in various places

Automattic/themes#6996 (comment) was the jumping off point but we found more issues at a later point.

We'd probably have to limit it to certain themes, and align on palette slugs 🤔

[annezazu]

Intrigued by the idea of sharing the style variations. We tried something similar before with blockbase and child themes. We got very mixed results, we had to come up with a per theme way of opting out of some of the variations.

This is definitely something also being examined in Core too with themes sharing style varations (aka being able to take a style variation from one theme and use it in another): WordPress/gutenberg#55595

That particular theme (stage) is due to be retired and replaced with Outnow. IIRC the oddness has been fixed there.

Great to hear :) Are any other themes impacted by this? If not, we can potentially rename it to be about sharing style variations or close out.

[dsas]

I think that's probably the most egregious brokenness, but there are definitely more themes where the tiny two tone style variation disc isn't very helpful

The first two Bedrock circles look nearly identical (these videos are bigger than it appears on screen).

Screen.Recording.2024-08-23.at.14.03.10.mov

The three strand variations, and none of them look accurate

Screen.Recording.2024-08-23.at.14.04.28.mov

[richtabor]

I actually propose removing them from this grid view.

You're not deciding in this moment if you're going to use the theme, and this UI looks nothing like the same function on the single theme view—which is more in line with core's.

Made an issue to discuss this: #93931

[fditrapani]

hey folks, just want to surface this again. I agree with @richtabor that we should remove these. In addition to the quirks mentioned already, the swatches clutter up an already busy layout and take up valuable real estate which can be better used to present the theme tier rather than bumping it down to another line.

I shared a proposal for an updated layout to the card here: #95471 (comment)