Theme preview: After selecting a pattern, there is no way to go back to the main theme

[ndiego]

After selecting a pattern in the theme previewer, there is no way to go back to the main theme. Also, the pattern does not remain visually selected in the UI when you change the style variation while the pattern is selected.

I think we need a way to "reset patterns" and go back to the main theme and also indicate a pattern is selected while the user is testing out other style variations. The video walkthrough articulates this better.

theme-previewer-reset-patterns.mp4

[ndiego]

cc @WordPress/meta-design for thoughts.

[jasmussen]

Outside of adding a selected state to patterns and style variations, should we make it so that selecting any style variation resets to the theme? That would mean that to preview a pattern in a different color style, you'd have to first select the varation.

Otherwise the quick fix would be to add a "Clear" or "Reset" button to the right of the "Patterns" heading, one that contextually fades out/disables if you haven't selected a pattern first.

A larger undertaking would be to do what the site editor does, add drilldowns.

The behavior is this: the default preview is the site. Click "Patterns" and the left sidebar drills down into a list of patterns you can choose from. Pick any of them to edit. Clicking "Back" loads the main homepage in the preview again.

The translation to this interface wouldn't be 1:1, but the idea would be that we'd need patterns to live in a drilldown menu, picking either would replace the preview, and then clicking "Back" to exit the drilldown would reset the preview to the homepage again.

A reset button is probably the simplest for now.

[fcoveram]

The drilldown flow is interesting and pushes the previewer further, but the rest button sounds easier.

Unselecting the pattern and the style variation seems like the ideal solution to keep the previewer clean without extra actions. I don't know how much effort that would take, but selecting either a pattern or a style variation and then unselecting any of them to reset it follows clear logic.

The first state would be no style and no pattern selected. Then, selecting a pattern and or a style works in conjunction. If I select a pattern, and then a style variation, the pattern changes its style on the right area. But then, unselecting that pattern, the right area goes back to the theme with the style variation that remains selected.

I hope I explained myself correctly. Happy to jump in in a call to elaborate more.

[ryelle]

A larger undertaking would be to do what the site editor does, add drilldowns.

This would, as you say, be a large undertaking, and I'm not sure it's worth it for one category of options. Perhaps something we can revisit when we get to the larger redesign, if necessary.

Unselecting the pattern and the style variation seems like the ideal solution to keep the previewer clean without extra actions.

That would require changing the underlying semantics of this, but that it would be an improvement for keyboard & screen reader users.

To unselect a pattern/clear the selection, you would just click the currently-selected pattern again?

I'll need design help to create what that "selected" state should look like. For reference, here's the current default, hover, and focus states for the previewer ("selected" items will also need hover and focus states).

State	Screenshot (bottom right)
Default
Hover
Focus

[fcoveram]

…Perhaps something we can revisit when we get to the larger redesign, if necessary.

I like this idea. Saving it in my notes to go back to this once we define room for it.

To unselect a pattern/clear the selection, you would just click the currently-selected pattern again?

Yes

I'll need design help to create what that "selected" state should look like

I can provide a design during the first days of next week.

[fcoveram]

Here is a recording of a prototype showing the interactions with the thumbnail.

Preview.-.Current.behavior.mp4

---

While designing the interaction shown above, I had the following idea

Preview.-.Style.active.mp4

Since there is always a style applied to the content on the right, the preview begins with the default style selected (first element in the list) and users can change it, but never set the theme without a style. In other words, it is not possible to unselect the style but only change between them.

On the other hand, changing the style refreshes the pattern thumbnails and once one is selected, the content on the right reflects the selection. In this section, it is possible to leave the preview without one selected, and in that case, the content on the right goes back to the theme homepage.

If this idea introduces more complex cases that expand the scope, please let me know. In that case, the first prototype should address the changes previously discussed.

[ryelle]

In other words, it is not possible to unselect the style but only change between them.

Correct, there's already the default variation, so we don't have this issue there. Only on patterns.

On the other hand, changing the style refreshes the pattern thumbnails and once one is selected, the content on the right reflects the selection

This wouldn't really work in practice— it looks nice in your mockup because you don't show the loading state. We would need to re-request mshots screeshots for every style variation, so flipping the variation would cause all the images to disappear, load, and then reappear. Also, currently the screenshot block isn't really set up to do that.

the first prototype should address the changes previously discussed.

I'm not sure if the slight zoom on the image is enough of a different state for hover, it's also pretty different than the hover on the non-preview view. I know we've been trying for consistency, so I just want to check that this divergence is intentional.

Can you also provide a focus state?

[fcoveram]

…It looks nice in your mockup because you don't show the loading state. We would need to re-request mshots screeshots for every style variation, so flipping the variation would cause all the images to disappear, load, and then reappear. Also, currently the screenshot block isn't really set up to do that.

I was thinking about the loading time and how much it could take in themes with several patterns. But if the screenshots don't support this idea, then version one is the best option.

Can you also provide a focus state?

Yes! Sorry for not adding it before.

Here are the Figma components and below the new flow. Let me know if the Figma's dev mode view is helpful.

Preview.current.behavior.2.mp4

Both hover and focus styles have an outward ring of 1.5px in blueberry-2 and an inward ring of 3px in charcoal-1 to make it look thicker. I don't recall if a thick ring exists; if so, I can try it quickly in the theme preview.

[ryelle]

I'm not totally sure if I follow the figma file, so I've laid it out how I understand it. Let me know if this is wrong.

State	Unselected	Selected
Default
Hover
Focus

If I've got this right, it needs a little updating— the focus and hover for selected items should be visually different from unselected, otherwise you won't know as you're tabbing through whether an item is selected or just focused (ideally it's a 3:1 contrast between previous + focus states). It's less important for hover, but I'd still recommend having it be a least slightly different.

[fcoveram]

The table above is correct. I was following the styles used in Style variations thumbnails in the Theme details page, as shown in the video below.

CleanShot.2024-06-11.at.16.28.01.mp4

Does the above also need to be fixed? If so, I can work on that once solving this.

the focus and hover for selected items should be visually different from unselected, otherwise you won't know as you're tabbing through whether an item is selected or just focused (ideally it's a 3:1 contrast between previous + focus states)

I was trying to meet sufficient contrast in hover and focus for selected and unselected items with shape by scaling up the thumbnail content. Before building the flow v2, the components made for the first version were these.

First row is unselected, second row is selected. For columns, left is resting, middle is hover, right is focus. Perhaps we can go back to this, but with tweaks over the "selected + focus" style as blueberry-2 and white rings side by side doesn't seem to work.

[ryelle]

The table above is correct. I was following the styles used in Style variations thumbnails in the Theme details page, as shown in the video below.

There is no selected state on this component— the blue outline is a focus state, and black outline is hover. Click away and you'll see the blue outline goes away. We could introduce a selected state here (probably a good idea), but it would have the same issue, it would need different hover/focus states.

First row is unselected, second row is selected. For columns, left is resting, middle is hover, right is focus. Perhaps we can go back to this,

If you can figure out a way to make the hover state more obvious at a glance, it would be better, but this does work if you can't.

[fcoveram]

I tried different ideas, but the scale-up version is the cleanest. Here is a recording showing how the final interaction would look like.

Thumbnail.interaction.scale.up.version.mp4

In hover, the thumbnail content scales up like this:

• Style: From 100% to 115%
• Pattern: From full-width/full-height minus 10px, to full-width/full-height minus 6px

[fcoveram]

I missed an important link, the dev mode of designs.