Site Editor: Distinguish Template Parts

[jameskoster]

One of the unique properties of template parts when compared to regular blocks is that they can be edited locally in the context of a document / template, and yet those edits will be applied globally, affecting other parts of a site.

It therefore seems reasonable to consider distinguishing them somehow in the UI, in order to establish a pattern that indicates that these blocks are 'different', and to provide familiarity when dealing with them.

If anyone has used Figma components, or Sketch symbols (similar concepts to Template Parts), you'll be familiar with how they use color to illustrate when you're working with one of these special items versus a regular layer, which works well. Figma uses purple:

Template parts not only behave differently to regular blocks, but different types of template parts will – eventually – be swappable based on their assigned type. As an example, a site may have multiple Header template parts, and a user should be able to quickly switch between those different iterations while editing a template. It may therefore be useful for the UI to indicate not only when a user is interacting with a template part, but also what type of template part it is.

As an initial exploration, I think we might be able to use the existing "Layout" icon to achieve this:

Putting all this together we might create something like:

Note that the Header template part is also outlined with a matching color, to further instill the notion that one is editing a template part.

I think there is a discussion to be had around which color to use for this. In the example above I'm using the primary color from the active color scheme. I'm also wondering if there is any additional treatment we might apply to the toolba, settings panel, and Inserter to strengthen the concept.

[mtias]

Great, thanks for starting this! In context, I really like highlighting template parts in the list view — it helps give a quick sense of structure. I think we should initially only treat header and footer differently. The generic template part feels a bit off, since it seems to imply "main" or "content" based on the icon. I think we can try using the default template icon with no specific area highlighted.

[jameskoster]

The generic template part feels a bit off, since it seems to imply "main" or "content" based on the icon.

Good point.

I think we can try using the default template icon with no specific area highlighted.

Yes that can probably work, as long as we don't list the template itself, alongside that same icon, and create confusion.

Just to spitball, another approach – similar to Figma – could be to use a more abstract collection of shapes. You lose the traditional 'layout' metaphor, but the generic TPs (which are likely to outnumber the specific ones) are perhaps less ambiguous?

[shaunandrews]

I think trying to tie the icon to some spacial placement of a template part is a nice idea, but breaks down in practice. We don't know if a "header" is at the top of the screen visually; A header could just as easily exist visually as a sidebar and serve the same purpose.

I like the idea of a more abstract icon, but I think the diamond pattern is still trying too hard to visually represent the placement of the template part.

My first thought would be to try and build something based on the existing Group block icon:

[jameskoster]

We don't know if a "header" is at the top of the screen visually; A header could just as easily exist visually as a sidebar and serve the same purpose.

In that case it would be a sidebar? :D Either way that's kind of why I like the abstract nature of the icons above. It hints at the location/purpose in a less prescriptive way than the layout icons.

I hear you on questioning the value in actually having separate icons though. If we deem that value inadequate then I would agree, something like the group block icon could work.

[mtias]

Mmm, I think I like the initial ones more. They are already an abstract representation but there's nothing performative about the icon, it just illustrates the most common layout. I don't mind something more abstract, but the template icon already achieves the goal of communicating the concept of a template and the concept of a template part fairly well.

[jameskoster]

No strong feelings here, both work for me. Happy to go with the layout icon(s).

[mtias]

Thinking about how to break this into steps:

• Define header, footer, sidebar terms as variations of template part. Hide the variations in the inserter.
• Apply specific icons to those variations.
• Color template parts and selection state in the block tree and icon in block description.
• List these template parts more prominently in the W sidebar.
• Include specific descriptions in the sidebar inspector and "current template dropdown" for header, footer, sidebar to give context.

[carolinan]

Just adding a note that color alone should not be used as identifiers.
I prefer the first icons, I think they are easier to understand.

😄 A header is called a header because it is usually the top-most part, where we humans have our head. Usually.

[Addison-Stavlo]

At this point with the different block variations and icons applied within the editor, I think we are good to close this issue? Obviously, feel free to reopen for further discussion if I am mistaken. 😁

[jameskoster]

Yup, we can continue refining Template Parts in #31750