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 https://github.com/WordPress/gutenberg/issues/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 🌈

[jameskoster]

Lately @youknowriad has been taking stock of the different selection/hover states in the site editor UI:

• outline mode: Allows you to see borders for selected and hover blocks
• overlay: Enabled for template parts and reusable blocks, it allows this: the first click on template part to actually select the parent template part instead of selecting the child blocks (click through). It also applies a specific hover style that is different from the outline mode’s hover style.
• focus on “active template part”: clicking a template part grays out (opacity: 0.5) all the blocks that are outside the current template part.

I've opened #40646 to discuss removing the "focus on active template part" effect.

The overlay pattern has proven problematic to get right due to a browser bug in Safari (context).

I hypothesise that we can try using the ideas in this issue to essentially combine the aforementioned "overlay" and "outline" modes. That is to say, we remove overlay mode altogether, and update outline mode to support colorisation for blocks of special importance like Reusable's, Template Parts, and their children.

This can aid the ongoing 'Patterns as Sections' work (https://github.com/WordPress/gutenberg/issues/39281) too, since outline mode can work equally well in all edit views (site editor, template editor, focus mode, exploded view, etc).

[jameskoster]

I made a codepen to test the above hypothesis. It's difficult to truly interpret without proper context, but in lieu of the overlay, I think the colorisation does help clarify when you're working with a 'special' block type.

One small addition is the dotted outline on the root ancestor when a child is selected. This illustrates the boundaries of things like template parts and reusables which can often be useful, and builds on the existing reusable block implementation in the post editor.

[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 https://github.com/WordPress/gutenberg/pull/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