Visual template switching in the WordPress editor

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.

Posted on Jan 22, 2021
James Koster
Welcome to my design portfolio on Dribbble

More by James Koster

View profile