Gutenberg: 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".