Block-Theme Switching MVP

I recently shared some blue sky ideas on the future of block-theme switching. This week, I wanted to come back down from the clouds to propose some more practical first steps towards enabling site designs that mix and match styles and layouts from different block themes. Out of the three directions shared previously, I focused on the first approach that’s closest to the current theme switching flow.

Live preview

When switching from one block theme to another, the Customizer Live Preview screen could be replaced with an alternate screen: a live preview of the site paired with a new “Activation” panel.

*Gutenberg snackbars can help give context while switching themes.*

Activation panel

Like the multi-entity saving panel, the Activation panel is a sidebar that sits in front of the top bar. It reuses some components and UI patterns from the Global Styles panel — for example, it’s made up of an overview panel and nested panels that are accessible through “drill-down” navigation.

*The “theme preview” thumbnail is paired with a toggle for switching between the Live preview and active theme.*

Gutenberg top bar

I also explored potential updates to the pages within the Appearance/Themes section, where a Gutenberg top bar could be added to the page while leaving the page content like theme tiles and notices mostly unchanged.

*The “Add themes” page is a bit of a rabbit hole — but ideally a consistent top bar could be used there as well* 😅

Other notes

*Easy pathways to the site editor can be added by replacing “Customize” buttons with “Edit site.”*

*Theme details can be shown as a separate page (rather than a modal) for more fluid transitions.*

Meta Questions

Why should the Appearance/Themes pages use Gutenberg components, wouldn’t that make this section look like a standalone editor?
If we want to tie the theme switching experience closely together with the site editing experience, it would help if the Themes section at least speaks the language of an editor. Ultimately, I’m hopeful that these changes can help create a pathway for weaving the different aspects of site design together more seamlessly in the future.

That being said, an actual MVP might look something like this — it’s a little more disjointed but still gets you from point A to point B:

The first iteration of a block-theme switching flow probably doesn’t need the Gutenberg top bar and other suggested changes to Appearance/Themes. Sounds minimally viable to me!

2 responses to “Block-Theme Switching MVP”

Show and Tell Oct 2021 Agenda – Make WordPress Design says:

October 19, 2021 at 6:47 pm

[…] BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.-Theme Switching (https://make.wordpress.org/design/2021/10/08/adventures-in-block-theme-switching/ and https://critterverse.blog/2021/10/19/block-theme-switching-mvp/) […]

Anne McCarthy says:

October 20, 2021 at 3:38 pm

Absolutely love seeing how your explorations are continuing and appreciate how smooth this is. I’d be curious to see what the next step will look like around what sort of confirmation message you see if you select a few layouts, colors, typography but not everything. Will there be a way to later go back and get the rest if you want for example?

>If we want to tie the theme switching experience closely together with the site editing experience, it would help if the Themes section at least speaks the language of an editor.

I’m torn on this but agree with your long term thinking. In the short term, I do think it’ll cause too much confusion for now.

Either way, keep up the great work!