Display a document icon when using the site editor

[dsas]

What?

Displaying an icon next to the title when using the site editor.

Why?

Many users are confused when entering the Site Editor - not understanding the context that they are editing elements under (within templates). This often results in content which is intended for a single page being added as content to the template (amongst other things). The Site Editor header displays the current document's name, but not its type. This change gives an additional hint to users what is being edited.

How?

The useEditedEntityRecord hook now returns an icon for the entity being edited.
The DocumentActions component displays this icon in the document action title

Testing Instructions

1. Open the site editor and edit a template - you should now see a template icon
2. Open the site editor and edit a header template part - you should now see a header icon
3. Open the site editor and edit a template part that isn't a header or footer - you should now see a template-part icon

Testing Instructions for Keyboard

Keyboard navigation is unaffected.

Screenshots or screencast

Title	Before	After
Editing template
Editing header
Editing header as part of a template
Editing template part

[jameskoster]

I think something like this can help, but we might need a more nuanced solution, or at least some more design exploration to ensure this is the correct direction.

The truth is that while working on a single document in the site editor you can potentially end up editing several additional elements all at the same time. For example if you open the category-recipes template you could directly edit:

• Multiple posts and their associated meta data
• The 'Recipes' category data (title, description)
• Template Parts
• Reusable Blocks
• Site data (site title, logo, etc)
• Menus

We also need to think about how users interpret the 'document' in certain flows. For example if you navigate to Site Editor > Navigation > About > Edit – I think most people would feel like they're editing their About page primarily, rather than the page template.

All that considered, framing the session around a single document may be too blunt of an instrument. I wonder if there's a way we can make the title more dynamic so that it communicates the context for the selected block. We've explored this a little for template parts, can we take it further?

[dsas]

@jameskoster, sorry can I just get some more clarity on the next steps here?

I'm not sure that this PR changes the level of single document framing. This PR prefixes the top-level document name with an appropriate icon.

When editing a template-part while editing a template, the document name is currently already suffixed with the template-part icon and the name of the template part being edited. This is unchanged.

Are you saying you want to see this template-part behaviour (or something similar) for entities other than template parts as part of this PR?

What is a design exploration and how can I get one?

[jameskoster]

Apologies I may have gone into the weeds a bit there.

Would you mind rebasing and increasing the gap a bit between icon + title? Then we can get more reviews.

[dsas]

Cheers @jameskoster I've rebased and added spacing between a title and it's icon, and increased spacing between primary and secondary titles too to suit.

Getting the correct amounts of spacing between things is something I don't have much confidence in, so I'd love to hear some feedback. I've updated the after screenshots on the description so you can easily see what I've done.

[jameskoster]

Thanks for updating :)

Rather than using CSS you might be interested in the HStack component.

If you stick with css, let's use the $grid-unit variable for the values.

I think we can get broader feedback from @WordPress/gutenberg-design now.

[dsas]

Thanks for the help @jameskoster, I've used $grid-unit variables for values now.

No objection to moving to HStack in general, but perhaps that should happen to the DocumentActions component regardless of whether this PR lands?

[jasmussen]

This feels like a fine enough solution to me.

Template icons:

Btw should either or both of those use the Home icon? Not a blocker for this PR, in fact probably a rabbit hole. But mentioning it nevertheless.

Header template part:

Before we move too much further, I'd love a quick take by @SaxonF, as I know he's explored a different format for this top/center chip.

[jameskoster]

Btw should either or both of those use the Home icon?

It's a good question. To connect the dot, we currently use icons in the Add template menu:

It might be confusing to see different icons in these two locations, especially immediately after creating the template.

The icons in the add template menu are not canonical, and imo do not add much value. The most important distinction to make going forwards is whether you're editing content or a template, and in that respect fewer icons is probably better.

So with that said, I think the behavior in this PR is good, and as a follow-up we can remove the decorative icons in the add template menu.

[paaljoachim]

Brainstorming/rambling coming up.

It seems like a very good idea to include the icon beside the template name.

A before:

After:

Gradually from going from a yes this is a very good idea I began to become hesitant.
The sidebar icon on the right can be clicked to show the sidebar. It uses an icon instead of the text "Settings". One can choose to "Show button text labels" through Preferences.

The template title icon is not clickable. Title is not clickable. The chevron is clickable to open the drop down. I am trying to look at the clickable behavior here compared to the View - Save - Sidebar icon - Style - 3 dot menu as well as the clickable icons on the left side of the top area. The middle template title area just has a different behavior.

Clicking a template part we see this:

Icon page icon Header chevron.

I selected a longer template name. This one looks like this:

Going through I am hesitant in the need to add the template icon into the top bar as it almost feels a bit crowded as in too much having the icon Blog (Alternative) icon Header chevron.

As we are in the Site Editor template area as we have selected a template to view/edit. So it is obvious that we are viewing a template. Do we need the top bar template icon to give us the additional hint?
There is no icon beside View or Save buttons.

Btw
I just noticed this area:

Page icon will be seen in the Template sidebar area as well as in the top bar area. It feels a bit repetitive when the sidebar is open. But then again clicking the Template part we currently in Gutenberg see the same thing.

---

Continuing....
Looking at template parts.

Before:

After:

---

I believe the question I remain with is should we see the page icon - page when a part is selected.

Or should the page icon be hidden when a template part is selected? To bring greater focus to the template part.

Ok. I believe my rambling/brainstorming is finished.

[richtabor]

I believe the question I remain with is should we see the page icon - page when a part is selected.

I'm not sure it makes sense to hide it when a part is selected, other than just too much noise. But I'm still finding it difficult to justify it hiding.

And this brings me back to the caret breadcrumb mock-ups in the header. Missing the context it provides as a breadcrumb.

[jameskoster]

I noticed this is also included in #49980, which validates the idea, but since that PR includes additional functionality around this element perhaps it makes sense to concentrate on that one?

[dsas]

I noticed this is also included in #49980, which validates the idea, but since that PR includes additional functionality around this element perhaps it makes sense to concentrate on that one?

The functionality in #49980 looks specific to when editing a page. The functionality in this diff would still continue to work and be useful.

This part of the 49980 diff determines which header to use - the existing Stylebook header, the new to 49980 PageContentBreadcrumbs header or DocumentActions - the header I've modified in this diff.

We should align on using the same icon though - #49980 uses the sidebar icon rather than getting the icon from the template being edited.

[jameskoster]

Thanks for digging into that. Agree on making the icon usage consistent – I'd lean towards using layout for all templates.

[dsas]

@jameskoster this PR already does use layout for templates, and for template-parts the appropriate template-part icon.

Or rather, it gets the icon from the entities being edited, thus ensuring it remains consistent with everything else.

I've commented on #49980 about being consistent.

Can you help me out with next steps?

[jameskoster]

@dsas I think this is now superseded by #50369.

[dsas]

@jameskoster that looks exciting! I'll close this issue then. Thanks for your help, and thank you to everyone else for commenting too.