-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
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.