Template part: Area selection UI

[jameskoster]

When #29159 is merged it will be possible to update the area of the selected Template Part:

Since we have dedicated icons for these areas that will be surfaced to users in the Toolbar, List View, and the Inspector, it may be worth exploring designs that incorporate them into this selection flow in order to establish holistic continuity in the UI.

One option might be to use a segmented control instead of a dropdown:

Another option would be to stick with the select but enrich the dropdown:

Whichever solution we go with, we should be aware that this element will likely exist in other environments, e.g. #29222.

[mtias]

That last one seem like a lot. I can see it being useful when creating a new one from scratch, but to reassign it seems it should be simpler and assume context already (it's in "advanced" in the end).

[jameskoster]

I don't have strong feelings either way. I suppose the main thing to decide upon is whether we need to display the descriptions here.

If so, maybe there is a middle ground?

[jameskoster]

Let's try the segmented control / icon approach. We can see how adding the description as a tooltip feels:

[annezazu]

This "Advanced" section came up as part of feedback from @paaljoachim for the third FSE call for testing. For context, part of this test includes creating a custom template part for the 404 page header:

How do I give it a name. I looked into the Template Part block but could not see a way to rename it there.Ahh I had to open the Advanced panel. That is a weird place to put it. There I can rename it. Title, area and HTML element could be in an unique panel. The Advanced panel could be similar to what is seen in the Post Editor.

Right now, it does feel odd to have this living under Advanced settings when setting a name for the template part is likely the first action we should nudge a user to take so they can later tell the difference between template parts.

[paaljoachim]

Thanks for the ping @annezazu

Tooltips I am seeing that James it mentioning a kind of tooltip. I actually also mentioned this in the feedback I had for this third call for testing outreach. Having a ? in a circle or another method where one can hover a small icon to receive additional information will very much help. As there are options in the panels that are difficult to understand without any extra information.

Naming. Here is an example from Reusable blocks.

The question comes up. Should we have naming in an easier place to locate? As right now it seems like one is just adding on to the Advanced panel. Here is a suggestion.

[mtias]

Right now, it does feel odd to have this living under Advanced settings when setting a name for the template part is likely the first action we should nudge a user to take so they can later tell the difference between template parts.

@annezazu that would be as part of creating a new template part, which has its own flow in a modal and a very prominent "name" field. Editing an existing name should not be as prominent.

[annezazu]

Makes sense for an existing template part but do want to point out that the current new template experience doesn't make it clear or easy to figure out where one can edit the name:

https://user-images.githubusercontent.com/26996883/111723817-c4b27b00-8829-11eb-927b-4a75d11d0118.mov

I'll add this feedback to this issue for now: https://github.com/WordPress/gutenberg/issues/29950

[creativecoder]

@jameskoster Here's a draft PR using the segmented control / icon approach suggested above.

It's roughed in for now, but gives a feel for using icon buttons with tooltips.

How can I find the icon for the General template option?

[jameskoster]

@annezazu I think that's a separate issue warranting dedicated exploration. It could be as simple as displaying a modal when the user elects to create a new template part. Or maybe even not allowing new template part creation via the block – that has always felt like a weird flow to me.

[jameskoster]

How can I find the icon for the General template option?

It's this one from the icons package :)

[jameskoster]

We can potentially consider reusing the popover pattern recently implemented for the document summary panel here. E.g.

https://user-images.githubusercontent.com/846565/177760933-30f8be28-4eff-44d8-a5ad-c7076b065e90.mp4

[paaljoachim]

That sounds like a good idea @jameskoster

[creativecoder]

I've made another attempt at this in https://github.com/WordPress/gutenberg/pull/45764 -- reviews welcome!

[jordesign]

Checkin in WP6.3 I'm now seeing the icon indicating the Template Area in the sidebar. @jameskoster @paaljoachim do you feel like that is sufficient resolution, or should we leave this open for further refinement?

[jameskoster]

@jordesign this issue is about the appearance of the area selection UI. I reckon the UI might benefit from an update to bring it more inline with the add-template modal which was updated recently:

Create template part

Create template