Template Parts and path towards "library" management

[mtias]

Milestone 1

• Use two rhomboid icon symbol for template parts menu.

Milestone 2

• Explore combining patterns, template parts, reusable blocks, font management in a single menu called Library.
• Look at lifting Headers and Footers as its own sidebar items. (Consider emphasising Header + Footer in Site Editor navigation #50958)

[SaxonF]

Adding a potential pathway here.

We've put far more emphasis on patterns as of late and will continue to do so. The site editor currently doesn't reflect these efforts. This project aims to set the stage for block unification by introducing the concept of a library which is a dedicated space for all the building blocks of your site.

For this bit of work we can simply rename the Template Parts menu item to Library and introducing category grouping to the list page. This includes Headers, Footers, and any other template parts available.

This new "Library" space is a natural fit for when pattern management becomes a thing.

6.3-library.mp4

• The top level template parts menu item is renamed to library using rhomboid icon initially
• The library panel contains a menu listing all template part areas. Headers and Footers use their corresponding icon while General + others use template-part. Whether these need to drilldowns or just panel sections is worth considering.
• There is an additional "Reusable blocks" menu item that links off the existing re-usable blocks management screen in a new tab
• Much like the existing template parts screen the + button triggers the new template part modal
• Clicking an area/category takes you to a full list of template parts for that area
• Within each area, the + button automatically sets the template area on part creation
• Quick links section at the bottom contains "Manage all template parts" which opens the existing template parts page.

[jasmussen]

Noting #50028 as related to this one.

[jasmussen]

@SaxonF not urgent, but per recent designs (#50379 (comment) and #50392 (comment) come to mind), would you be able to update your video, or share screenshots instead, with the latest sidebar design? I think we can update this issue and mark it ready for dev with that.

[briceduclos]

Is there a Figma file of the UI available on the WordPress.org Team?

[annezazu]

Noting that as we explore this Library concept, it would be advantageous to explore how to show the relationship between template parts and templates: #42482

[jameskoster]

Agreed. It doesn't even need to be granular to begin with (though that would be nice). Just marking the items that are actively in use would be helpful. It probably requires a dedicated design effort though, to get the placement right.

Anyway here are some updates to Saxon's earlier visuals, taking into account the latest work around other panels:

Instead of drilldowns for each type, I lean slightly towards a single list for a couple of reasons:

• Sites do not generally have that many template parts, so clicks are reduced.
• It allows the reuse of the browse/manage toggle that has been proposed for Templates.
• Doesn't require any hefty modifications to the existing template part management view.
• It's pretty close to what we currently have on trunk, so involves a bit less work.

The drilldown pattern can be utilised in the future, once all patterns are displayed in the Library and scalability becomes a bigger issue. Of course if I've missed something and the intention is to have that as a part of 6.3, then we should probably use the drilldown straight-away – though it will require some modifications to the management view.

What do y'all think?

[jasmussen]

I like starting simple.

[jameskoster]

If font management is to live in a modal, it could easily be accessed from the Library panel, which feels conceptually appropriate.

We might use the same format as the theme button at the design root:

I also moved Reusable blocks outside of the main list, since they will not appear in the management view.

[mtias]

One last follow up here: #52042

Rest is considered accomplished.