Site Editing: Visual template selection

[jameskoster]

Now that it is possible for custom templates to be created (#27778) we should explore ways in which the UI might provide a visually driven template selection experience than the dropdown menu of old.

[jameskoster]

I've been noodling on some ideas this week, here's where I'm at with this one...

In the gif above, all template navigation / selection is initiated through a single component in the Inspector:

The dropdown behaves similarly to the template selector we're all familiar with, providing a quick and easy way to select the template you need in situations where a visual preview is not required. It now also contains shortcuts to go and edit the template, or manage all templates.

The left / right arrows will cycle through all compatible templates, applying them to the content on the canvas. This provides a detailed view of how the content will sit inside the template while maintaining edit-ability.

Clicking the grid icon zooms out to reveal all compatible templates at once, an affordance that will more likely be useful for sites with lots of templates to choose from. Seeing all templates at once can enable a quicker template selection decision than scrolling through all templates one at a time.

Whether or not we need both of these visual template selection patterns is worth discussing. I see merits to both, but perhaps one is more important than the other?

As well as switching templates, I imagine this pattern also working well for switching template parts.

Naturally, the new components presented here need some refinement and pixel polishing.

[shaunandrews]

I feels like you're trying to shove a lot of functionality into a very small space, but I'm not entirely sure why. I think you have room to expand, or find another way to hide unrelated UI while browsing templates.

I like the idea of visually switching between templates, one-at-a-time, but I think the transition is too much. I think zooming out could help, and also show more of the document being previewed:

Template.Switching.mp4

I feel like you've shown something similar to this already, so maybe I'm just rehashing your work :)

[jameskoster]

Good feedback! The motivation for the one-at-time slideshow was to provide a high fidelity template selection option for sites with fewer templates, but I agree this is probably the weakest use case and the best candidate to leave out.

One thing that feels important is to offer folks who already know which template they want to select a quick way to do so. The dropdown achieves this most effectively.

For the zoomed out view, I tried retaining UI elements like the Inspector but in the end it just felt like an unnecessary distraction, and raised some tricky questions around how things like the block inserter, or the save flow behave if a user engages it midway through selecting a template. Hiding the distractions eliminates those problems and helps the user focus entirely on the task at hand. I expect that a more stripped-down view would shine on mobile too.

I do think it's worth trying a few variations on the layout of the zoomed out view though. Probably with different volumes of templates to choose from as a stress test. The carousel is a good option that would work well on small screens.

[jameskoster]

Played with this some more:

template.switch.mp4

• Removed the one-at-a-time slideshow
• Added a close/cancel button to the template selection view
• Adjusted template selection view dimensions to fit 3 templates, and added pagination

If there are more than 3 templates pagination could work like so:

pagination.mp4

And finally, mobile:

mobile.mp4

[shaunandrews]

There's a few things about this that feel off...

• The text in the dropdown select is blue. I haven't found other selects that use blue for the text. (Very minor)
• I'm not sure if this is a dropdown or a popover menu. We have a mix of OS-level dropdowns (like default style), custom dropdowns (like font-size), and now this popover-dropdown mix. I'm not sure how I feel about this... (Minor)
• I wonder how this UI adapts between 0 templates, 3 templates, and 30 templates.
• Having "Edit template" inside this dropdown feels strange. Everything else is about switching the template, but then there's one option to edit the existing template. I wouldn't think to look in this dropdown for a way to edit.
• The grid icon and "Manage all templates" feel kind of related, to the point where I wonder if they're the same thing?

--

Switching between templates feels... anticlimactic. I think there needs to be some sort of messaging (snackbar?) and there might be the need for a loading state, and maybe even an error state.

--

I like the transition to the template view. I think the currently selected template needs to be highlighted somehow, and there might need to be a more explicit cancel/done UI.

That pagination feels a little small and hidden, especially on mobile.

[jameskoster]

The template menu is a Dropdown, the trigger for which will likely be an icon button, so the styling for these elements will be informed by the components. I agree some tidying up needs to happen in the concepts as presented there though. I believe this component has built-in support for long lists – it scrolls when the menu is larger than the viewport.

The grid icon and "Manage all templates" feel kind of related, to the point where I wonder if they're the same thing?

I don't think they're quite the same thing, but I do wonder if it is necessary to offer a pathway to manage all templates from this particular UI area. It is probably something better accessed from the template editor itself.

Switching between templates feels... anticlimactic

I guess this depends on the templates in question. Switching between vastly different templates will likely feel more significant. I'm not sure we need to make more of this.

and maybe even an error state

What errors do you think we might encounter here? I suppose if the connection drops and the template cannot be loaded... A snackbar might be adequate to inform the user in that case.

I'm going to work on this some more tomorrow. Thanks again for the feedback!

[jameskoster]

Another update:

templates.mp4

Changes to post editing view:

• Updated the template selection UI components (dropdown / popover) to reflect what exists in the code and the new g2 work. It's not perfect, but probably doesn't need further refinement as a part of this work – the scope is large enough here!
• Removed "Manage all templates" link from the popover. I'm not 100% convinced on this, but it's easy to add back.
• Moved the "Edit template" link from the popover to beneath the dropdown. I feel like this might be too prominent so would like to hear more thoughts. I suspect that moving from editing a post to editing its template will be an infrequent flow for most users.
• Added a tooltip when hovering the grid icon. The label needs work.

Changes to template selection view:

• Swapped the X button for a "Cancel" button to be more explicit.
• Added a possible loading state for the templates. I'm assuming this is where the loading will take place, but would appreciate any technical clarification.
• Removed pagination on desktop... I'm thinking it would be just fine for the thumbnails to scroll vertically.

[paaljoachim]

Nice work! I quickly browsed through this issue.

Instead of going left/right in some way to see through the various templates. One could perhaps click an expand icon to get a modul screen showing the templates. The same method can be used for other viewable items such as Patterns, Reusable blocks etc. Here is an example I made for viewing and selecting Patterns: #26905 (comment)

Bottom line is having a similar method to select various types of layout items.

[jameskoster]

In this case I think it is ok to use slightly different patterns for selecting the template versus selecting a pattern, reusable block, or template part. Since the template governs the entire document, using the maximum amount of screen real estate to provide more detailed previews seems prudent. A modal places unnecessary constraints on the UI in that respect.

The zooming in/out animation also helps – I feel – to illustrate the relationship between document and template. Finally, modals do not work so well on mobile.

FWIW I do not think this view would be a one-off – the same view could also be used for the mosaic view (#20477).

[kellychoffman]

Nice iterations!

I love the interaction you designed that allows you to visually choose the templates. What I don't think is clear is the relationship/difference between the dropdown and that icon button: that we're telling the user you can either pick a template by using the text dropdown or a visual preview. What do you think?

I suspect that moving from editing a post to editing its template will be an infrequent flow for most users.

What about removing this altogether? Agree it feels too infrequent of a flow. Could also stick it (along with "Manage templates") behind a good ol ... icon button.

[paaljoachim]

Linking in this issue:
Move post/page title to the top bar.
#27093

[jameskoster]

I noticed that the publish and visibility links in this panel also open popovers, so we don't necessarily have to use a dropdown element for this.

One way to improve the relationship between the template dropdown and the grid view is to put the link to grid view in the popover:

Obviously that makes it an extra click away though... unsure if that is problematic. FWIW I still think the "Edit template" link could live in this menu as well.

---

Another option if we stick with the dropdown – the g2 select component has a "detail" affordance which could potentially be utilised as a link:

This saves a click, but might be pushing the limits of what this component is supposed to handle.

---

Or we could simply display explicit actions:

I am totally open to others ideas and suggestions :D

[jameskoster]

Here's a simpler design concept that considers in the idea of providing access to document attributes via the top bar (which is seemingly gaining some traction in #27093).

The visuals need polishing, (and I'm not sure if a modal might be better than a popover) but I particularly appreciate the scalability and reusability of this approach.

It's easy to see other document attributes migrating from the Inspector to this panel. The additional real estate allows us to create more elaborate designs where appropriate (IE template selection). Plugins like WooCommerce would also find this useful as a place to put non-visual product data inputs like SKU.

Finally, we may end up using a similar pattern for site attributes like the home / posts page, and site icon options, so there is reuse value there.

[jameskoster]

Closing in favor of #31591