Site Editor: Specify the Current Document's Type

[Copons]

The user might not be aware of what kind of document is being edited — especially if unfamiliar with the Site Editor UI.

The Site Editor header displays the current document's name, but not its type.

We should specify the document's type in the header.

For example:

• "Home Template" instead of "Home".
• "Footer Template Part" instead of "Footer".

Note: this probably requires a Core change.

Originally requested in #68953

[dsas]

Saying "Index Template" isn't always exact. You could be editing the footer template part while editing the "Index Template"

Here's a screen grab of that, just displaying the type of the main entity being edited and the existing indicator that you're editing a footer

And here's one if I make it clear that the Footer is a template part

Note that the sidebar might not be displayed, and will not display stuff about template parts once you've selected a block inside that template part.

I think that the first one, while not technically completely accurate, is actually less confusing. It doesn't seem very useful to me but I'm willing to be guided by others.

---

It doesn't help when editing page content inside the site editor though, that would need more work, but probably WordPress/gutenberg#43608 is a better solution there.

[dsas]

WIP branch at https://github.com/dsas/gutenberg/tree/try/wayfinding-label-template in case anyone wants to experiment / try this. I'm not wholly sold on anything above as a significant improvement tbh, would appreciate some opinions @Automattic/t-rex

[mmtr]

I think this actually needs some design input. I'm not entirely convinced that just appending the type to the name (with the same font style) is a good idea – it looks more confusing to me?

Perhaps we can include these icons to re-inforce the design language used by Gutenberg?

Something like this:

Then, we could add the type as tooltips similar to other UI areas:

Alternatively, we could be explicit and avoid the tooltips:

[Copons]

I think this actually needs some design input.

Yes, absolutely!
And even more so if we are pushing changes to Core Gutenberg. 🙂

Something like this:

I like this a lot.
It reinforces the visual language used in the site editor's sidebar so that users would get acquainted with it gradually but surely.

The tooltip on the icon might be a good one too.
They are used on every icon in the top bar, and can (usually) be toggled between icon+tooltip and label, so we could have both @mmtr's suggestions! 😄

---

IMHO, we could just simply open a PR in Gutenberg showcasing one or two approaches, pinging @SaxonF for design review and see what happens. 🙂

[dsas]

I opened WordPress/gutenberg#48052 with the icon idea.

I haven't yet added tooltips (information is already accessible though). The obvious solution of just wrap the BlockIcon in a Tooltip didn't work.

[dsas]

Closing, upstream are looking to go in a different direction.