Skip to content

Site Editor: Distinguish Template Parts #26599

@jameskoster

Description

@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:

Screenshot 2020-10-30 at 11 28 10

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:

Screenshot 2020-10-30 at 12 11 52

Putting all this together we might create something like:

Screenshot 2020-10-30 at 12 23 30

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Type] DiscussionFor issues that are high-level and not yet ready to implement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions