Colorise template parts and reusable blocks in the UI

[jameskoster]

Other platforms successfully use colorisation to distinguish local / global entities within a document. We might explore doing the same for template parts and reusable blocks.

There's some backscroll in issue #26599 for context. That issue was closed as it touched on many other related (and now resolved) template-part-related concepts.

Colorisation considerations

• List view (resting, hover, and active states)
• Canvas (outlines / overlays in select mode and the Site Editor, Block Toolbar)
• Inspector (icon in the Block description)
• Inserter (block icon)

Purple could be a good option, but might clash a bit with the "Ectoplasm" color scheme. Speaking of which, this color(s) should probably be static and not change with the specified color scheme.

I've seen green suggested for Reusable Blocks in other issues.

Figma file here to explore :)

[jasmussen]

As an additional affordance to identifying block types, I think this can make a lot of sense. I don't think we should add too many new colors, though... 3 seems like a maximum. I look forward to fine tuning those colors to perfection as well 👌

[jasmussen]

Oh and don't think I didn't see that rainbow emoji as a Figma label 🌈

[samxmunoz]

I'd still really love to see this - it's so confusing not having any sort of color-coding, bolding, or other visual queue for reusable blocks (aside from the icon that is the same color as everything else).

Even just making the reusable blocks icon stand out a little more in list view (highlighting would be amazing) would be helpful.

Without knowing it clients are going to make changes on their sites and not realize it impacts everything, or multiple contributors to a website are going to accidentally make a change globally.

Thank you!

[annezazu]

After running a few different tests around the newer zoomed out view #41156, I wanted to note that colorization of template parts, patterns, etc will be advantageous in that view as well. Here's feedback from a coworker for example that helps underscore the benefit:

I think there might be value in thinking about how different “sections” are colored or represented. For example, maybe a pattern is a different color from a template part to distinguish which sections are going to be consistent across other templates and which are unique to the template you are presently editing. This might also help with conceptualizing the differences and how they interact with the design of your site.

As we think about this issue itself, I'd love for it to be thought of in the context of this new view too!

[annezazu]

@jameskoster would you list this as Needs Dev or Needs Design feedback right now? Want to ensure everything on the phase 2 issue has either label where possible.

[jameskoster]

Good question. I would say both :)

We need to settle on the final colors (cc @pablohoneyhoney), and precisely which elements get colorised, but these are things we can work out in the PR.

Making anything that is var(--wp-admin-theme-color) (outlines, overlays, active state in list view, etc) a different color would be a good start.

[carolinan]

I am curios about how a template part could be colored, if the blocks that fill it also have a background, or even if there is a body background that is not white.

[jameskoster]

This issue is about how the UI can better indicate when you're working with template parts rather than styling them for the frontend.

[glendaviesnz]

Going to take a look at how this can be implemented today.

[glendaviesnz]

Initial PR for this here