Improving the inline template part editing flow

[jameskoster]

The click-through overlay we added to the template part selection flow works well, but there are a couple of outstanding issues when it comes to editing that would be nice to address:

1. We never really solved how to indicate the template part boundaries once you begin editing the blocks within
2. The selection action feels a bit clumsy, because oftentimes immediately after selection you see outlines of child blocks appear... It's a bit disorienting (see the double-border in the gif below):

It would be interesting to try an iteration where clicking a template part selects it, but a further action is required to engage editing. Once edit mode is engaged we can use the 'spotlight' effect to dim blocks outside the template part, clearly indicating its boundary. Here's how that would look:

template.part.mp4

Note that after selecting the template part, subsequent clicks within its boundaries do nothing. Only after clicking the 'Edit' button in the toolbar am I able to interact with the child blocks.

Another benefit of this approach is that the added friction can help indicate that this block is different to others in a meaningful way. We may even consider it a part of #43598.

To connect a dot, we're currently discussing a similar interaction as a part of #43037 (comment), so there may be precedent to apply a similar effect in other areas.

cc @WordPress/gutenberg-design

[jasmussen]

Looks good!

My first instinct was: if there's an extra Edit button, why not just go to full isolated mode? But this makes sense:

To connect a dot, we're currently discussing a similar interaction as a part of #43037 (comment), so there may be precedent to apply a similar effect in other areas.

When inserting a pattern as a section as discussed there, you'll want to see it in context, not edit it purely in isolation mode. So in that sense, the spotlight (or "scrim everything else") makes sense to me 👍 — we mainly want to avoid introducing too many new elements in terms of borders or behaviors.

[jameskoster]

When inserting a pattern as a section as discussed there, you'll want to see it in context, not edit it purely in isolation mode.

Yeah this is the key point. To be clear I think we probably need to offer both – inline editing where you have context, and isolated view where you have absolute focus.

I suspect the inline version would feel more natural as the primary flow in this context. Access to isolated editing could perhaps live in the more tools menu.

[jasmussen]

Right. Just want to visually distinguish them, and generally reduce. We tried dotted borders in the past, that wasn't quite as succesful.

[mtias]

I'd also like to try some overlay text that says the name or type of the template part.

[mtias]

@pablohoneyhoney this might be similar to what we discussed for the navigation block.

[jameskoster]

I'd also like to try some overlay text that says the name or type of the template part.

Do you mean on hover?

[mtias]

Yes

[jameskoster]

I think we explored before having something like a tag attached to the overlay. Since template parts can be quite small, it may have to appear outside.

[jameskoster]

I think this is ready to try from a design perspective. Adding 'Needs Dev'.

[annezazu]

Added needs dev label back since dev work is underway and hasn't yet been completed.

[annezazu]

We've come a long way in the last two years since this was opened, showing purple outline in both list view and the canvas, for template parts:

Is this still something we want to iterate on? If so, we likely need a more up to date design or approach that aligns with today's interface.

[jameskoster]

The UX is different based on whether you're page editing or template editing

• Page editing: You can select the header / footer, but not directly edit. Clicking 'Edit' in the toolbar takes you to focus mode
• Template editing: You can directly manipulate the entire template part

It's not clear to me that this discrepancy is what we want long-term, so that would be good to discuss. The page editing flow works well imo.

[jameskoster]

I reckon this one is superseded by #65096.