Visual template switching in the WordPress editor

Here’s an iteration on one of the flows shared last week – selecting a different template while editing a post or page.

Historically this has been a very lacklustre experience in WordPress, accessed through a select dropdown in the attributes meta box of the post / page edit screen.

It’s exciting to explore how we might make this exercise more visually engaging in Gutenberg.

A carousel of compatible templates dominates the view and encourages the user to study each one in detail thanks to the live preview which is populated with content from the referring post or page.

The selection dropdown provides a quick and accessible way of navigating directly to a known template which will be useful when a visual audition is not necessary. It should also be helpful for sites with large numbers of templates. Pathways from this screen to other template management exercises in the site editor reveal themselves in this menu too.

On handheld devices selecting a template will feel more delightful – you simply swipe through templates one at a time, until you find the one you like most.

The side-scrolling carousel pattern could potentially be re-used to provide a novel way to view posts and pages in the future.

This iteration is almost ready for scrutiny and will likely be shared on issue 27850 soon.

On-canvas editor context switching

A rough and early concept exploring how a user might toggle the visibility of the template for the post being edited, and navigate between content / template editing in the WordPress site editing experience.

Block tools that are governed by the template are disabled, but offer an on-canvas pathway to template editing. The visuals here need more work.

In template editing context, double-clicking on any content from the post takes the user right back to content editing.

Template interactions in full site editing

This week I’ve been playing around with some more template interactions in the Site Editor.

In the concept below I explored how one might toggle the visibility of the template which resolves for the current post – and once visible – how you might switch or edit that template.

This is still rough, and will be refined as we elaborate on the notion of zooming in and out to edit content, templates, and beyond.

Explorations in workflows around content and template editing in the WordPress Site Editor

Lately I’m spending a lot of time ideating on how users will manage their templates in WordPress’ Full Site Editing (FSE) project.

This post cobbles together a few rough concepts I’ve put together for some of the key flows and interactions.

Moving from editing a post to editing the Post template via the Inspector. There are several visual cues to distinguish one view from the other.

Moving from editing a post to editing the post template on-canvas to update the featured image.

Moving from editing a template to editing post content via double-click interaction.

Moving between editing a product and the product template in WooCommerce.

Loading content into a template when there is no contextual entity.

Toggling the template view while editing a post.

These are all very early concepts that will evolve over time. You can follow along on this github issue.