Adventures in WordPress product design
A follow-up iteration on my a design concept I posted earlier this week:
This version makes it simpler to switch templates when you already know which one you want to switch to. No need to enter a dedicated view, just select from the dropdown.
I intend to explore how this same pattern might be applied to template parts. You can imagine it working well for switching between different headers.
This concept has also been shared here on github.
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.
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.
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.
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.
These are all very early concepts that will evolve over time. You can follow along on this github issue.