Add a shortcut for template browsing

[jameskoster]

The template list screen we've been working on for #36597 will serve well as a centralised management screen with searching, bulk actions, and other such features in the future.

It serves less effectively as a navigational tool. Moving from one template to another is quite a tedious workflow. You must:

1. Click the W button
2. Select "Templates"
3. Find and click the template you want to edit

This is a ~15second operation:

select-template.mp4

We can make this much smoother by adding a shortcut for template browsing. It was suggested in #36667 that we might do this initially with a combination of a dedicated side panel and the introduction of a new "tool" in the top bar.

Here's a quick demo of how that could work:

template-shortcut.mp4

[annezazu]

In the eleventh call for testing for the FSE outreach program, feedback came up around how "menu crazy" the current experience felt with list view, styles, block toolbar, W menu, etc. To quote the person "I like having the List View, that's a neat way to think about the content but having so many menus that obfuscate each other is kind of difficult to think about." I do worry about how adding on more item might only make this feeling more intense, unless we find ways to intelligently consolidate.

[jameskoster]

That's great feedback, and I totally agree, a more holistic solution would be better. We touched on that a bit already in #36667, the idea being that global navigational elements and functionality (styles, templates, navigation menus, site settings, maybe even reusable blocks) are visually grouped in a way that distinguishes them from the editor toolbar + canvas. But that is likely a much bigger change than what is proposed here.

It may be that we need to execute on all of that together, I don't know. What this issue explores is how we might take one part of that larger idea and begin putting the pieces in place sooner rather than later.

[SaxonF]

+1 to @annezazu feedback. I love the goal of wanting to move quickly but I really do think WordPress/Gutenberg editor is at risk of becoming too fragmented partly due to features being worked on/released in isolation.

But that is likely a much bigger change than what is proposed here.

You already know what I think about this @jameskoster :) The left sidebar is one space we need to think about more holistically (like you've done in the other issue) ahead of time so that features like the templates list have a more natural place to live. This will also help velocity imo.

[jameskoster]

With one eye on 6.0, I noodled a little more on this yesterday.

I'm increasingly drawn to the idea of a persistent 'navigation rail' or 'application dock' on the left-hand side of the editor canvas which provides one-click access to all key site management areas. In the context of this issue, switching templates becomes a two-click process rather than a three-click.

The other nice thing is that it enables the W button to behave in the Site Editor as it does in the Post Editor, IE exit the editor and return to wp-admin.

default.mp4

It looks a little empty with only two links, but there is certainly scope for this to expand as the site editor matures in 6.0. In #36667 we're exploring navigation management. Styles and other visual settings could live here too, and management of content like posts, pages, reusable blocks, etc will be essential in fulfilling the FSE promise.

Initially I was a little wary of the impact a persistent vertical bar might have on the overall editing experience, so I put a very rough concept together in a branch to test it more thoroughly. Happily I found the impact to be minimal, the dark coloring really helps it blend in to the background. I can publish this branch if anyone thinks it might be helpful.

I'm not sure how it would be best to treat this on mobile, but perhaps the navigation bar simply moves to the bottom of the screen, building on the idea of making all key areas quicker/easier to access:

mobile.mp4

[annezazu]

In the fifteenth call for testing for the FSE Outreach Program, more feedback came in that's relevant to this exploration:

In the template editor, I was expecting the center-top dropdown (which said home initially) to allow me to easily switch to different templates. To me, the ability to click on the header/footer doesn’t seem valuable. I can already easily do this from the list view (unless there’s something I’m missing).

In this case, one has to open that drown down, then select "browse all templates", and then pick the template of choice so there definitely seems to be an appetite for more quick options!

[jameskoster]

In the template editor, I was expecting the center-top dropdown (which said home initially) to allow me to easily switch to different templates.

This continues to trip me up a bit even today. I think it's because the UI kind of hints at a select/dropdown behaviour. IE my eye sees this:

And my experience of interacting with the web over the years tells me it'll behave like one of these:

It's separate to this issue, but might be something to explore.

[jameskoster]

If we were to make content editing possible in the site editor (#44461), then template editing may be slightly de-emphasised in the Site Editor. IE instead of immediately being dropped into template editing, users would consciously navigate to edit a specific template. Consequently when editing a template we can make the W button behave the same way it does when editing a post or page – return you to the template list. Here's a demo:

template.mp4

[jasmussen]

What feedback is missing at this point? The latest looks pretty good to me, and should be feasible to implement as a followup to #44770

[jameskoster]

Nothing missing per se, but the outcome of 44770 will affect whether we can close this or not. Specifically the W button behaviour.

[jasmussen]

It seems like the merger of an initial version of browse mode might afford a new interface for his, with shortcuts in the top left. I know you've been pushing this, Jay — do you think this might be the spark that starts it? That is, Navigation, Styles, and Templates shortcuts next to the W, which take you out of editing and into each major section in the site editor?

[jameskoster]

Yes I think so. It also means we can clarify the W button behaviour – it always takes you back to the Design panel. Here's how it would work for templates (and close this issue):

templates.mp4

Like you mentioned the same pattern can be applied to other areas like Navigation, Styles, and Content.

[annezazu]

Can the "Needs dev" label be added at this point @jasmussen? Want to be sure we have the statuses right so we can have folks step in asap. From the convo above, seems like that's the case but don't want to jump ahead.

[jasmussen]

Current status with browse mode is this:

That is, somewhat similar to what the original issue was about:

• The revamped site editor starts you with a template loaded on the right, and a templates option on the left.
• You can go straight to edit, or you can choose a template
• If you're already editing, you can go back and choose another.

Even as is, this feels testable and a reasonably fast way to browse templates compared to before. So to an extent, we can consider this issue mostly completed.

However there's still some conversations about an additional shortcut from the edit mode, so you can save a single click. Something along the lines of what was explored in #36667 (comment). I think that's still valid, though as noted, less urgent. However that design isn't quite there and I know that @jameskoster has an idea that he's likely able to share some time next week, that addresses that issue specifically. So hopefully we can add the tag then. What do you think?

[annezazu]

Thanks for the detailed reply. I agree with your assessment! Let's leave as is for now and, worst case, we can always add the needs dev label for the initial iteration if we are short on time and follow up afterwards with Jay's idea.

[jameskoster]

One idea that has come up during all the browse mode work (#36667) is a widget at the top of the navigator which morphs to display contextual actions as you navigate around. As you move from browsing to editing it could collapse down, and expand on hover to reveal shortcuts to panels like Styles, Navigation, and Templates:

shortcuts.mp4

This would eliminate the extraneous click to go from editing to managing templates.

[jasmussen]

I think we can probably keep the site icon a small round-rect inside the fullscreen editor, but I like the widget, since it adds literal boundaries to an element that is global, but can still be contextual to the particular screen.

[jasmussen]

Per #37001 (comment) I honestly think the new browse view might just go ahead and handle this. I'm going to close this one for now to direct the energy in that direction, as it seems like a good place to solve it, but we can always revisit!

[jameskoster]

It depends whether the current W button behavior persists long term.

At the moment, if you're editing a template then clicking the W button opens the navigation to the Templates panel and that works well as a shortcut. But this behavior has issues we'll need to address in the future. Specifically: it's not always easy to determine which panel to open, e.g. if you open a URL that takes you to the edit view of your About page + page-about template, then which panel should be opened? You can make good arguments for both; Content or Templates.

[jasmussen]

Absolutely, and that might beckon reopening this issue, or creating a new one. Both seem fine.