Details View → Template Part

[mtias]

Show relevant blocks if they are used on the template part.

• Site title & tagline
• Site logo element (the one we have in the inspector of the logo block).
• Details View → Template Part: display patterns as replacement options #52124
• Navigation menu (should already be expanded if it's a "light menu").

"Added by" section to appear when the template part was added by a plugin or user.

Ellipsis menu (next to Edit button)

• Delete
• Rename (for custom template parts)

[SaxonF]

6.3-detail-templatepart.mp4

Much like other detail panels, the template part panel needs work. If we take the same philosophy as the pages panel we should take an info first approach to this. It’s also a great space to give more attention to blocks that are structurally important to your site. The most basic example is the navigation block.

• Show created by date with author
• If theme created, show theme name instead
• If a template part contains any of the following blocks, they should be listed under template part details within an edit section. Site title, Site logo, Site Tagline, Navigation
• Each of these block menu items should open the editor with the block selected and inspector open
• In a details section we can initially show what area a template part belongs to. This ties into the broader library work so might not be ready for this particular issue.
• Secondary actions include “Delete” and “Duplicate” which can be found in DropdownMenu triggered via ellipsis next to edit

Connections
What do people need to learn about a template part? Template parts are just another type of building block for your site, so we can probably look at other tools that have similar library concepts for inspiration. Figma for example gives you an overview of how a component is being used across the team. This is also relevant for websites, perhaps more so because they are viewable by the public. If I edit this template part, what other parts of my site will be affected? In future, we should providing connections between blocks.

[jameskoster]

Here are some updated visuals based on Saxon's above, factoring in other designs that are coming into focus like meta actions.

First of all let's clarify the details that should appear based on the template part source.

• Theme-supplied template parts detail the assigned area
• User-generated template parts detail the assigned area and the author
• Plugin-supplied template parts detail the assigned area and the plugin that added it
• All template parts include information about who last made changes, with access to revisions.
• The area detail will be read-only to begin with.

---

It's common for headers and footers to contain blocks that display site data like the title, logo, and navigation menus. These can be included in the sidebar offering a quick way to edit without engaging the full screen editor:

• Site Title and Tagline can be edited via modal
• Site logo can be edited on click. This is essentially the same pattern as the Site Logo block's Media control in the Inspector.
• Navigation menus are listed with full edit-ability. When multiple menus are included they are stacked. This is to ensure visual context is always provided by the frame. This part is a bit intricate, so has a dedicated issue: Navigation on Browse Mode: Add navigation list view to the template part editor #50704

[jasmussen]

The spacing here seems a bit large:

And the alignment here might benefit from columns:

Other than that, this seems pretty solid to me.

[jameskoster]

Couple of updates here:

Basic template parts

Template parts containing navigation menus, and site settings

• Detail rows arranged over two equal columns with left-aligned values.
• Various settings brought into the panel (e.g. Title / Tagline inputs). These can use the modals from before if current componentry cannot achieve the design above.
• Updated colors.

There are on-going discussions in #50704 about how to handle multiple menus, so I left that out for now. When there's a single menu it seems fine to go ahead and display it.

[jasmussen]

Nice. Color updates look good, spacing updates look good.

One last question, and it migth be useful to see the frame on the right in a mockup to be sure. One thing I like about the current setup, is that there's no separator between site hub and sidebar content:

And the larger whitespace above the section title I quite appreciate as it gives emphasis and breathing room on the left. Has that been removed in these mockups? It may just be me, but I find that this spacing and the lack of the separator gave it a lot of character, and I'd hate to see that disappear. We can still reach the above if you need to scroll, through a sticky header, but the default state I'd keep the space.

I'd also keep the view site link hidden until hover. The current conversations around its behavior haven't been fully hashed out, and if we can't hide them, we'll need to find a different place for that link.

[jameskoster]

View site link is being worked on in #50420 👍

The spacing is a part of the other metrics we need to figure out. Title sizes, margins, back button, etc. I'm starting to think it might be worth opening a dedicated issue about that, as we've gone back and forth a lot.

For this particular issue, how do we feel about the panel contents? Ready to update the OP and mark as ready for dev?

[annezazu]

Where are we at with this, especially considering the work around consolidating patterns, including template parts, in the new library/pattern section? Seems like it's not clear if this is ready for dev. Doing a sweep as part of a phase 2 update and 6.3 core editor triage. cc @WordPress/gutenberg-design

[jameskoster]

@annezazu Navigation menus can be edited from the template part details panel now. Editing the Site title, tagline, and logo are missing, as are the revisions link. IMO these are all ready for dev.

Edit: I updated the OP to remove the Duplicate & Replace actions. They're worthy of extraction to dedicated issues.

[mtias]

The other thing I wanted to include is the ability to swap / cycle patterns on a template part.

[jameskoster]

Isn't that the "Replace" action? Or did you think it should be more prominent?

[jasmussen]

I vaguely recall us talking about showing thumbnails for alternate header/footer patterns, even showing which one was active denoted as such.

[mtias]

Yeah, more prominent showing related patterns for specific areas. Something to explore later. Also highly related to #44582

[jameskoster]

I'm not sure it's possible to mark an active one, as once a pattern is inserted it's disassociated with the source, unless it's synced. But yes it's an option to display patterns in the sidebar, it will make it very long accounting for all the other affordances though:

I don't know if it needs to be so prominent, replacing the entire design of a header probably isn't something you do all that often? 🤔

[jasmussen]

Can the thumbnails be in two colunns? Does that get too small?

[jameskoster]

It will likely depend on the template part in question. Let's spin up a separate issue to explore.