Site Editor doesn't allow to edit or preview non-active block themes

[anton-vlasenko]

What problem does this address?

Site Editor only works with an active block theme.
It's not possible to edit non-active block themes with it.
E.g., it's not possible to Live Preview non-active block themes.

What is your proposed solution?

It's simple: we need to implement that feature.

[anton-vlasenko]

More context can be found here: https://core.trac.wordpress.org/ticket/54578

[annezazu]

In the latest exploration with theFSE Outreach Program, this idea came up:

Theme previews. Perhaps replace the Live Preview with the zoomed out view?

For context, this is referring to this view added to Gutenberg in specific situations, like when switching style variations: #41156 I think it could be interesting to consider as a pathway when it comes to live preview/theme switching in general so noting here for consideration when this work gets underway.

[scruffian]

Here are some suggestions:

Firstly of course we need to add a button to the Showcase:

This part should be trivial, the question is where that button should go. My suggestion is that we open Site Editor in browse mode like this:

There are a few important changes in this preview:

1. The title is changed to explain that this is a theme preview
2. The description makes it clear that you cannot edit because this is just a preview
3. The other editing options are removed from the sidebar
4. The preview cannot be clicked on or interacted with, aside from scrolling.

In future I think these restrictions could be removed, but for the first iteration I think it would a good idea to enforce some limits.

[annezazu]

I think this is a solid initial step, especially since it mimics the site editor experience in a way that might perhaps create some familiarity. It also might tie in nicely if theme preview and switching gets baked into the broader Site Editor experience, rather than having something that would have to be later unified. I do wonder if we could add an "Activate & Publish" button, similar to the Customizer preview.

Finally, I'd love to see how style variations could be incorporated as that's a big part of the future of theme switching to consider (mix and match + the ability to have "multiple themes" in a single theme in many ways). We already have a high level styles section in the same sidebar #49014 so I wonder what we can reuse here to really show off the power of block themes, especially since we show style variations in the Theme Directory.

Until we have a library setup for patterns, I'm not quite sure how we can best demo those pieces. Thinking super long term, perhaps a zoomed out mode could be invoked in the preview along folks to switch between patterns provided by the theme.

[annezazu]

Tagging in @WordPress/gutenberg-design for this issue!

[jasmussen]

Good issue. I would share Ben's instincts as far as the general flow, and add that there's an opportunity here to vastly improve the multi entity saving panel (maybe finally unify it on a modal). This is essentially where you "switch themes" in a block themes world, and furthermore it's a place where you can show checkboxes for what to keep from the old and new themes, whether patterns, templates, colors, fonts, etc.

Also want to connect the dots to these mockups by @critterverse that are still very relevant to this: https://make.wordpress.org/design/2021/10/08/adventures-in-block-theme-switching/