Theme Preview experiment: Can't see how Style variations affect my existing page

[bph]

Description

When I explored the Theme Preview for the first time, I got lost as I was going from preview to template editing and/or page editing on my existing site.
And example:

I used Preview > Style variations and because the theme only showed me the home page, I tried to see if those style variations would change anything on my Sample Page. When I clicked the live link Sample Page, I didn't see who my page would look but entered the Site Editor and was completely outside the Preview process.

My expectation was that I would be able to review parts of my current site with the potential new theme by clicking on various links on my site. I might have been spoiled by the Live Preview of classic themes: I browse the front end of my site with the theme to be previewed.

I was also unable to see the boundaries of the preview feature, to see what works and what wouldn't. It got mixed up in the Template Editor or Site Editor.

This is also in answer to @scruffian comment: "It would be great to get some feedback from users to determine whether the experience is easy enough to understand" in #50030

Step-by-step reproduction instructions

• Enable the Gutenberg Experiement: Block Theme Previews
• Appearance > Themes > Install a new block theme
• After install, clock on the Live Preview
• Click on Style Variations
• Click a page in the navigation

Screenshots, screen recording, code snippet

A video recording my stumbling around the feature.

testing-theme-previews.mp4

Environment info

WordPress 6.2.1
Gutenberg 15.8 RC 1
Google Chrome 113.0.5672.92
MacOS Ventura 13.3.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[okmttdhr]

I used Preview > Style variations and because the theme only showed me the home page, I tried to see if those style variations would change anything on my Sample Page. When I clicked the live link Sample Page, I didn't see who my page would look but entered the Site Editor and was completely outside the Preview process.

I looked into this and the style variation was actually applied on the Sample Page also, but it did not appear to be applied.
For instance, we can see the variation Red is applied correctly for the Sample Page from the global style setting, when previewing Frost.

Screen.Recording.2023-05-26.at.11.57.08.2.480.mov

This is because Frost is using base and contrast for their text and background color.
https://github.com/wpengine/frost/blob/881c696/theme.json#L504-L507

On another theme (e.g. Twenty Twenty-Two), we can see it appears to be applied since it's using background and foreground for their text and background color.

Screen.Recording.2023-05-26.at.12.50.30.mov

CC: @scruffian

[bph]

Thanks for the comments: @okmttdhr

Hmm, I see where I wasn't clear in my description.

There are multiple links to click on while previewing a theme on your own site.
So when I got through the sidebar links on the right, I can preview the pages with the themes
Also when I look at Style variations.

When I however use links on the actual page like the Single Page link from the Menu, I am taking out of the browse mode and right into the edit mode of the template and ergo can't see the page in the Style variation. What was unexpected was that i was taken out of the preview into the edit the template modus.

Hope this is clearer now. When you look at the video in my original post again, it's at time stamp 1:05 or so. I click on the Sample Page link on the right top and I land in the template part editing screen.

[scruffian]

Thanks for the report @bph, I think I grasp the problem, though I am not 100% confident I have. I thought the experience of being able to move into edit mode while you are still previewing is a useful one, although I can see why it is also confusing. I think there are a few different options we could consider:

1. Add a more prominent notice, to make it clear that you are previewing, even when you are in edit mode.
2. Don't allow users to move into edit mode.

What do you think?

[bph]

You are welcome @sruffian
My expectation was that when I preview a theme it would work mostly like the preview in the Customizer.

When in preview mode, a click on a navigational link, brings me to a preview of the page visited. So, when I clicked on the "Sample Page" link in the menu on the top, I expected to view the page in preview mode as well and not be taken out of preview mode into edit mode.

Personally, I like clear pathways, so I would not want to switch into edit mode while previewing a theme, unless there is a clear indication that

• I leave the preview mode and
• I am editing my existing page with the current theme.

Those are many ifs. A clean solution would be no edits in preview mode.

[scruffian]

I think there is a benefit of allowing users to enter edit mode when previewing a theme, because once you switch themes the change is live immediately. If I can enter edit mode and make all my required edits before putting the change live then it makes for a lot more powerful workflows.

[bph]

Mmm I agree that preview and edit is quite powerful. When I was testing this, I wasn't in the midset that I already had decided on changing the theme and making adjustments for a later swamp, though.

The edit before go live would need to be a two step process.
I still need to see how style variations change how my page looks, before I can decide on changes. In my above testing I could see the changes from.the style.variation.because I entered the edit space of my existing page.

Sounds confusing.. that because I am.