Mosaic View of Theme Templates

[mtias]

It'd be interesting to explore how a mosaic view of templates could work in FSE — seeing small previews of all the templates.

It might also be really cool, when using global styles in edit-site, if we allowed switching to that view to see how global changes affect all templates (such as typography).

[dwolfe]

There are two pieces to this:

1. The mosaic view itself, meaning, the masonry layout of template previews in tile form; and
2. Where/how that view is invoked (ie. the second part of the issue description above references how to leverage this view in the context of Global Styles, which is presumably not its "native" location/use)

I think it makes more sense to talk about 2) first, because where and how the user enables this view will probably dictate the purpose and functionality of 1).

I'm assuming that a mosaic view of template tiles would "natively" live somewhere in the main navigation, maybe under "Appearance"? And I further imagine that it would be an alternate view to a normal list view. If those assumptions are correct, then I wonder what advantage a mosaic view would have over a normal grid layout like we have on the template selector today (when creating a new page), something like this:

And here's what a mosaic version might look like:

I think the order that the categorized grid view provides would better support what I assume the user goals would be in this context, ie. reviewing what templates are available for them to use, and/or selecting one to edit.

The mosaic view makes it hard to compare tiles - it becomes almost a mood board of sorts, which is perfect for the Global Styles use case, I just wonder if it would be less successful than the grid in a "list all templates because I want to think about templates" setting. Moving on...

Thinking about how this would work with Global Styles, I first thought of enabling it with a toggle at the top of the sidebar:

After looking at work posted on some other FSE issues, I wondered if it might be better as a dropdown in the top bar:

Something like this would allow us to add more ways to preview Global Styles changes later on - perhaps a "Site Style Guide" could be a sort of mood board that would reflect the feeling of several design choices? Who knows, but the ease of adding options to the dropdown is an advantage over a binary toggle.

To address a few of the elements you're seeing in this exploration:

• The thumbnail size slider (which already exists in the media library) would let the user choose their own balance between seeing more templates, or seeing larger previews.
• I think filtering of some kind is useful for curating the templates you want to focus on as you work on styles; and this execution also provides a bit of an overview about the total collection of templates available to you.
• For the Global Styles context, the only functionality I've imagined here for the tiles is that clicking on them brings up a larger preview of that template, which would then offer a link to edit (Note: that would probably require a "Save changes?" modal if the user hasn't saved).

Also, as I'm looking at this now, I realize I've left out the search field in these last screens. I think search will probably be important, that's an unintended omission.

So... questions:

• Is the mosaic view useful in the WP Admin context, as compared to a categorized grid view?
• I limited the functionality included in the Global Styles context to keep the focus on previewing style changes; but in the WP Admin context, each tile should probably include additional actions like edit, copy, and delete. Agree/disagree? Anything else?
• Is it useful to show a larger preview of a template at all? If it is, is it useful in both contexts?

Any other feedback welcome as well.

[mapk]

Thanks for working through these, @dwolfe!

I'm assuming that a mosaic view of template tiles would "natively" live somewhere in the main navigation, maybe under "Appearance"?

It seems reasonable that since there is an "All posts" and "All pages" in the wp-admin, it would be good to include an "All templates" there as well. Under "Appearance" feels like the right place.

I wonder what advantage a mosaic view would have over a normal grid layout

One advantage is that it shows the height of each template. I'm glad you explored a grid view as well, but the grid view makes everything the same height which can cut off longer templates. So in this case, the grid view feels less flexible here.

While I agree the current iteration of the mosaic that you have is a bit daunting, the Block Library and Pattern work may help inform the direction here. For example, we can still group the templates into sections like in the grid view, but show the templates as a mosaic under each section.

As for how one might access the "All templates" view, there are explorations around how to navigate between templates being explored in the Figma file. Can you see if that might help?

but in the WP Admin context, each tile should probably include additional actions like edit, copy, and delete. Agree/disagree? Anything else?

I wonder if the admin view could work like the Block Manager where the option is to "hide" or "unhide" the template from the "All templates" view. Although I would like to delete a template I created myself if I wanted to.

[dwolfe]

One advantage is that it shows the height of each template. I'm glad you explored a grid view as well, but the grid view makes everything the same height which can cut off longer templates. So in this case, the grid view feels less flexible here.

100% agree in the abstract, I was thinking more about fitness for purpose in the context of a user clicking on "All templates" under "Appearance". I think the default view in that case is probably a simple list, with visual previews being an alternate way to view the list. My assumption is that seeing the full length of each template is less valuable than being able to see more templates on the screen at once, and having the titles aligned to aid scannability. I say that because, when the user clicks to see a list of templates, they likely want to find a specific template, or get an overview of what templates are available to them. I didn't mean to suggest that the mosaic view doesn't have value, just that I think it's less successful at aiding the user in accomplishing those tasks.

we can still group the templates into sections like in the grid view, but show the templates as a mosaic under each section.

Good idea! I'll give this a shot.

As for how one might access the "All templates" view, there are explorations around how to navigate between templates being explored in the Figma file. Can you see if that might help?

I can definitely imagine a "See all templates" link in that dropdown.

I wonder if the admin view could work like the Block Manager where the option is to "hide" or "unhide" the template from the "All templates" view.

Can you say a bit more about this? What would the use case be for a list of all templates with some hidden? Do you mean this would work like a user-configurable filter?

[mapk]

Can you say a bit more about this? What would the use case be for a list of all templates with some hidden? Do you mean this would work like a user-configurable filter?

Basically like a filter, yes. I was thinking if there was an admin screen for this that wasn't the "All templates" view in Gutenberg, then that screen would offer the ability to hide certain templates from the "All templates" view. I think this is getting too meta though.

I'm assuming that if we have an "All templates" view in Gutenberg, then an admin screen for this isn't necessary. Is that right?

[johnstonphilip]

This look really nice! Just to clarify, what am I seeing here? Block Templates? Block Patterns? Page Templates? A combination of all?

[dwolfe]

I'm assuming that if we have an "All templates" view in Gutenberg, then an admin screen for this isn't necessary. Is that right?

I'm thinking of these as two different screens, because the use case is different. In Global Styles, the reason to have this view is to see how style changes will affect more than just the single page/post that's loaded in the editor - the mosaic view gets the most content onto the screen at one time, so it's perfect for that, but the main action is still "I want to work on Global Styles", not templates.

The admin view is where you'd work on templates, which has different goals. That's what I meant when I said that the grid view, where the title bars all align, is an advantage over the mosaic view, which becomes almost a mood board.

So yeah, my thought is that there are two different views, that probably have different functionality as well as different organization. That's just my current take, though, I still think it's an open question!

[mapk]

This look really nice! Just to clarify, what am I seeing here? Block Templates? Block Patterns? Page Templates? A combination of all?

@johnstonphilip I love all that terminology! 😆 Basically these are Block Templates (AKA Layouts, Page Templates ) NOT patterns.

[dwolfe]

This look really nice! Just to clarify, what am I seeing here? Block Templates? Block Patterns? Page Templates? A combination of all?

Thanks Philip! Thanks for bringing that up - someone else pointed out earlier that the issue description above says "theme templates", which might mean single.php, archive.php, etc. The work I've shared so far assumes that this view would include "page templates", which would include narrow-purpose templates like About page layouts, or Contact page layouts.

It's possible I may have misunderstood the request - @mtias, can you clarify?

[mtias]

The first group. This is a view for the dropdown in site editing. Page templates in use are also included, but not the ones you have above which seem to be layout variations with content.

[dwolfe]

Okay, thanks @mtias. Just to confirm, this is only for the Global Styles context, you're not interested in how/where it would work in WP Admin?

Also, should we include all page templates in the current theme? Meaning, in the case of Twenty Nineteen:

• 404.php
• archive.php
• page.php
• search.php
• single.php

Would you exclude any of those? I'm also assuming that we'd also include custom page templates provided by plugins (if they exist), is that correct?

[dwolfe]

To recap the output of a conversation I had with @mtias about this issue:

• We're ignoring the technical constraint for now to focus on the UX. We'll figure out how to build it once we have an experience we think is successful, and we'll backtrack then if need be.
• This mosaic view would be an option in the templates/template parts dropdown, so the list of templates to include is whatever would show in that dropdown.
• Each template preview would be (initially) populated with placeholder content as described here, which might sidestep the technical constraint around loading multiple dynamic previews at once.

[dwolfe]

Given that the method of invoking this mosaic view and the interaction with Global Styles are being handled elsewhere, I'm mostly excluding those elements (top bar and Global Styles sidebar) from this next iteration.

I'm also using FPO notes for the initial state of each preview tile, because I'm suggesting that, when the mosaic first loads, we show the placeholder states that are being designed in this issue. What those placeholders eventually become is TBD, of course, but I'm assuming those will be static HTML, and will therefore let us sidestep the technical limitations around loading multiple dynamic previews.

That said, here we go:

This is, once again, a standard masonry layout of the available templates provided by the current theme. I've used demo screenshots and the list of templates from the the Ambitious theme as a forward-looking example. Given that there will be far fewer tiles than I originally thought, I think we can get rid of the search and filtering controls, and probably the thumbnail size slider as well - we should be able to set some sensible, automagical defaults with CSS grid, and if testing shows us that users need finer-grained control, we can add the slider then. That leaves us with just the tiles to discuss.

Title bar

I've included the name of the template and a description in the title bar, which both map to the handbook definitions of common template files. We can iterate on the descriptions, of course, and I think some of these definitely need editing for length, but I think they're useful in this layout, in both an orientational and an educational sense.

Preview body

The template thumbnails need to be live previews, or they can't respond to the user's style changes. I'm indicating that these previews will default to whatever comes out of the placeholder issue discussion, but I would imagine that themes might provide demo content that would override the placeholder defaults, to better showcase their designs. The screenshots you see faded into the background above are from the Ambitious theme demo. And again, this would be static HTML content, and thus wouldn't run afoul of the dynamic preview limitation.

As far as the functionality/behavior of the tiles goes, I was thinking that clicking on a tile would load that template into the editor - the same action as if the user had selected that template from the template editor dropdown. Once the template is loaded into the editor, we can surface controls to load specific content (an individual page/post/etc.) into the current template, which works with the technical limitation of one dynamic preview at a time. Here's (a version of) the menu I'm talking about, which I'm borrowing from @shaunandrews' work on template editing:

So this is roughly what it would look like all together:

Thoughts, questions, suggestions?

[karmatosed]

It's great to follow the iterations in this. I agree that focusing in on the view itself helps narrow feedback and get this worked out. Whilst I see the titles, I do wonder if you can have an 'information' indicator or 'read more' link/reveal icon. I am not sure if the longer sentences help anyone if you can see the template. It feels like it adds a lot of visual complication. I would also caution against using italics for any sentences, that is hard for many to read.

It might be good as a next step once you've gathered feedback to work into a prototype to get those interactions worked out.

[dwolfe]

Thanks for the feedback, Tammie!

I am not sure if the longer sentences help anyone if you can see the template.

Without the descriptions, do you think new users will visually be able to distinguish between thumbnails of, say, Home and Archive, where the only difference is the "Archive Title" heading above the first post?

I thought of showing the descriptions by default because I really think experienced WordPress users are the only ones who will know what "Single" means, for example; as well as what the difference is between "Home" and "Front Page". But I could see making this toggle-able, I'll look into that.

It might be good as a next step once you've gathered feedback to work into a prototype to get those interactions worked out.

Part of scaling this down to the mosaic view only was accepting that this depends on work being developed in other issues, which are fluid at the moment. I'd like to see how this works in clickable form as well, but that might have to wait until a couple of other things have settled designs.

[karmatosed]

Without the descriptions, do you think new users will visually be able to distinguish between thumbnails of, say, Home and Archive, where the only difference is the "Archive Title" heading above the first post?

I'd probably flip this around and say do you think descriptions help or will get read? I think someone is going to go by what they look like, not words in this case. It's a great thing to test though as could go either way.

[mapk]

The more I look at this, the more I realize that the biggest benefit here is seeing global styles effect multiple templates at once. Including global styles is a plus here!

I've included the name of the template and a description in the title bar

While I agree not a whole lot of people are going to understand the template title, I don't think it's necessary to include the description. Maybe when they're in the Template edit view they can see a description?

Also, as @karmatosed mentioned above, a prototype would be great. Even if it's just clicking how one might enter into this view and exit. I think you've got some beginnings with that in the toolbar.

[karmatosed]

To bolster the prototype point, you can just show the inner section, a blocked sidebar. It would be great to see things like the transitions in that.

[mtias]

The more I look at this, the more I realize that the biggest benefit here is seeing global styles effect multiple templates at once. Including global styles is a plus here!

Yes! That seems to me the main advantage — changing a background color, typography, etc. All things considered, it's a relatively minor part of the experience, but could provide some delight and bird's eye view.

[dwolfe]

I'd probably flip this around and say do you think descriptions help or will get read?

Yes, without question. As per research insights on Pickers & Clickers, the users who most need help understanding these concepts will read every character on the screen before deciding what to do next. I can't see how the Clickers will be hampered by the presence of the descriptions, but the Pickers will benefit greatly.

I just copied the descriptions from the developer handbook for the comps above, but ideally the description text will both explain what each template is, and also convey its importance, which we might be able to do with sentence fragments like "Default for all pages on your site", "Default for all posts on your site", "Page not found error page", etc. I'll work on some copy suggestions and we can re-evaluate.

[dwolfe]

Here's a GIF of how the mosaic view could fit into template editing and Global Styles. (Caveat: I grabbed bits of other files for this prototype, so please consider everything except for the mosaic view FPO. Also, the transitions here are rough - Figma and all that.)

Things to note:

• I took a stab at short descriptions that describe what each template is (meaning, what content it affects). Together with the title, the description performs the first part of the task of communicating to the user how their style changes will affect their site.
• The second part is each template's relative importance. For example, a template that's available but not used is less important than both the Front Page template, and the Single template (obviously for different reasons, but you get what I mean). To communicate importance, I added a number at the right of the title bar that could indicate how many URLs use that template. So "Single" has 23 to the right to indicate that it's used for your 23 blog posts. "Front Page" has just one, etc.

As far as functionality goes, a click on a tile would load that template into the editor, as you'll see. Other functionality (copy, delete, etc.) would be handled by the individual edit template page - and again, that's strictly FPO in this work, this GIF is only to show where the mosaic fits in the flow.

[mtias]

Nice @dwolfe, this prototype conveys the idea I had in mind a lot better. My only thing is that I'd expect the mosaic to be invoked from the global styles panel, which is where you are interacting ("see how the changes look across all your pages"), even if it ends up being accessible from the templates dropdown as well.

[karmatosed]

Just from a placement view, I think this could go in the toolbar or by the 'reset'. I have reservations about it there but suggesting just incase. As iterations happen I can also see the new sidebar styling allowing it in the header of the sidebar (as a link).

In these examples, I just added the words to show, for me it could easily be part of multiple 'views' as they happen (might be drop down).

[mapk]

Looks really good! We've got a mosaic view of templates that can be edited from a global styles sidebar. Much of the interaction on how to move in and out of this view is about there. I think we can make further changes in the PR during development. 👍

[dwolfe]

My only concern with triggering the mosaic view from the Global Styles sidebar is that I don't think that should be the only place (edit: I meant primary place here) it can be invoked, and providing two paths to the same destination can be confusing.

Having said that, if the mosaic view itself is good enough for a first version, I agree, @mapk, I think we can work out the details in the PR.

[mtias]

Also related: https://github.com/WordPress/gutenberg/issues/21246

I think we should consider this more as a "theme overview", allowing to see the theme hierarchy in a visual way.

[jameskoster]

I think we should consider this more as a "theme overview", allowing to see the theme hierarchy in a visual way.

@mtias Do you think this should be restricted to the theme templates, or include any user-generated templates as well? I ask because it gets very tricky to illustrate the hierarchy when you factor in custom templates for specific content, and generic templates (like $custom.php).

[mtias]

It needs some exploring, but the user can add missing templates from the main hierarchy, or specific extensions category-dogs.php which are really part of the main hierarchy anyways. We should mark user templates (saved in wp_templates) differently from the ones coming from theme files. Right now we dod that with a blue dot that says "customized".

[jameskoster]

While working on designs for #27814 I found myself needing a simple mosaic view of templates to investigate how a user might navigate between different templates.

At the minute I don't have much more than a grid of template previews, but I figured it was worth sharing the work here any way in case it inspires any subsequent design.

[mtias]

Grid of templates looks nice. It might be worth exploring if a more tiled design could work to show pages that are longer vs always being confined to the top area (which, if you have a large header, is going to be the same in all the thumbnails).

[jameskoster]

I think that is definitely worth exploring for a grid-based view of content. IE if we ever implemented something like this on the post list screen.

It's tricky for templates because the dynamic areas could be populated with placeholders rather than actual content. So there may not always be huge value in seeing the entire thing.

Another option would be to include thumbnail scale and aspect ratio view options. Or perhaps make the individual thumbnails scrollable.

[jameskoster]

I finally got around to exploring something a little more concrete for this:

Below I'll outline the functionality I included, most of which I feel is justified in the long-term, but some can perhaps be left out initially.

Access to Styles

This is without doubt the most exciting affordance mosaic view provides us. Being able to see global style adjustments reflected across all my templates on a single screen seems like a very powerful idea:

https://user-images.githubusercontent.com/846565/110625131-f32fb680-8196-11eb-95a1-c41965f37824.mp4

Searching and adding templates

Searching will be a useful filter when there are many templates. The add-template flow is based on designs shared in #29558.

https://user-images.githubusercontent.com/846565/110628578-18262880-819b-11eb-955e-b5a36f085d31.mp4

Template actions

Several actions could potentially be applied to templates from this view:

• Theme templates that have been customised by the user (Single Post in the video below) can be reverted
• Non-theme-supplied templates that have been manually added by the user (404 in the video below) can be deleted
• Both of the above can be applied to multiple templates at once in a bulk action
• $custom templates (when we support them) could be renamed

https://user-images.githubusercontent.com/846565/110628943-8965db80-819b-11eb-98ed-af831c29ac14.mp4

View options and editing a template

It may be useful to allow users to customize the scale of the templates on display. The appropriate thumbnail size may be different based on subjective elements like the users eyesight, plus the contents of the templates themselves.

https://user-images.githubusercontent.com/846565/110629451-13ae3f80-819c-11eb-95cc-bd55a8cccc03.mp4

What do y'all think? Which of these feel like highest priority? Is anything missing?

Edit: It's also worth considering potential entry points to this view. Adding an "All templates" link to the bottom of the Sidebar menu makes sense:

We could also consider updating the Appearance > Templates menu item in the wp-admin navigation to point at Mosaic view as well.

[jameskoster]

In the interest of aligning the designs presented in my previous comment, with the latest concepts for other site editing features, I have a few small updates to share.

For now I think we can probably leave out the template search. The majority of sites will have only a few templates so we can revisit this separately when the need is more pressing.

The scale slider can also be omitted for now – there is some on-going exploration work around how that might serve as a pathway between mosaic, template, and isolated template part views, but it is still rough.

Instead of using the primary button to add templates, let's use an empty template "frame" on the canvas. See the updated visuals below.

One new feature to add is an indication of which template is used by the homepage, and which is used by the posts page (if one exists). We can use an icon to do this. That icon should serve as a pathway to the home/posts page settings, but that may not be required initially.

The Add Template and Edit Homepage Settings modals make use of the full-screen modal component, which is yet to be merged.

Figma here.

[jameskoster]

With the addition of the grid layout to the template management data view I believe we can now close this.