Gutenberg: Edit Site: Isolate template parts for editing

[mtias]

In the new edit-site context, it'd be good to explore a view mode that allows focusing only on a template part while editing.

Example (Header):

I imagine it could be added here as a section (Template Parts):

[jasmussen]

In https://github.com/WordPress/gutenberg/pull/19082#issuecomment-567508590 I shared a mockup that embraces the same "View" dropdown, for starters just showing the responsive breakpoints. The dropdown interface scales well in an area that is already crowded, especially with the "Top Toolbar" option, and I could well see it scale to fit templates, perhaps in a pattern similar to what's shown in #19252.

[epiqueras]

That's similar to how I implemented it for now: https://github.com/WordPress/gutenberg/issues/19252#issuecomment-567913179.

[MichaelArestad]

Can you provide an example situation where editing a template part in isolation would be necessary/useful?

[epiqueras]

Whenever you want to focus on a very reused part, like a header.

[mtias]

Also for a complex site (a large magazine) it might be reassuring to focus on a specific area (featured content, widget area, etc) knowing you won't affect the rest of the site by mistake.

[jasmussen]

A tangentially related use case is to have something more akin to a "template editor", where you might have a list of templates in a theme-package as a list where you can click to edit each. Having this overview of all the ingredients that make up your site is likely going to be crucial for editing templates that are otherwise not easy to navigate to organically, such as 404.

[mtias]

That is meant to be covered by https://github.com/WordPress/gutenberg/issues/19252 or were you thinking about something else?

[jasmussen]

Nope, I had forgotten about that one. That covers the 404 case. _As you were!_

[mtias]

The bulk of this already works, but should be updated to use the same visual treatment as the device preview:

Template Part focused:

Device preview:

[mapk]

Along the path of @MichaelArestad's and @shaunandrews' recent explorations, I fixed up a prototype of how this could work when isolating template parts.

Prototype

Figma
https://www.figma.com/file/TR15iRvk7toGHnKb68QN1K/Full-Site-Editing?node-id=1405%3A2

[MichaelArestad]

@mapk I think this is a solid direction. My only feedback is super minor so I'll save that for the PR. Let's move forward with this concept for now.

[MichaelArestad]

Very minor update:

Figma link to the frame

[MichaelArestad]

It seems like this already works pretty close to the designs. Closing for now.

[mtias]

Reopening since it's not possible to focus just on one element from the toolbar anymore:

cc @shaunandrews @jameskoster

[jameskoster]

I feel like I'm missing something super obvious, but if I’m editing a template and can see the "Header" Template Part, why would I need to visually isolate it? Why not just click in and edit as normal? The top bar indicates that I'm editing a Template Part, what more information is required?

I understand the need perhaps for a 'mosaic' style view of _all_ Template Parts, with management functions (trash). And from there I might enter an an isolated view to edit a specific Template Part. But I’m not sure we need a shortcut to that view from regular template editing.

[mtias]

Being able to isolate template parts is a crucial part of the flow to me. It can be a great way to collaborate without running into each other. It can give a good sense of focus. It can help reach specific parts that might be hard to get to when in their final place (edges). It can allow editing templates that might not be immediately visible (a fixed header that slides in, for example) in a much more organized context. Etc.

[jameskoster]

I suppose we'll need the isolated view regardless, so it can't hurt to have a shortcut to that from template editing 👍

[noahtallen]

@matias this is actually still possible by selecting a template part from the nav sidebar.

I’ve heard different approaches re the template part text in the header:

1. Clicking it does nothing because it could be confusing for accessibility
2. Clicking it selects the template part
3. Clicking it “zooms in” to the template part

[mtias]

@noahtallen yes, sorry, I mean accessing from within the editor interface itself.

[jameskoster]

Here's an idea for Template part isolation:

The back arrow / link would only appear on occasions where a user enters Template Part Isolation directly from another document.

Upon isolation the Template Part will appear slightly offset on the Canvas, with a border to indicate its boundaries.