Components: update color-related components — Tracking issue

[ciampo]

This is an overview issue to track all of the tasks necessary to refine the color-related components, especially in the context of using it in the updated Global Styles Sidebar.

Context

To visualize this, there are some good mockups in #34574 that illustrate the behavior above. Instead of duplicating all available color palettes for each a single item in a group is shown as a swatch plus a label:

Click an item in the group drills down to a dedicated subpanel showing all available color tools:

Here's an additional mockup that shows how the full flow for collapsible color swatches could work when used in editor inspector panels:

Please note that the precise visuals are subject to change per further work in #34574, so definitely defer to that ticket as the source of truth.

Essentially, multiple color properties are grouped together in an ItemGroup, as swatch+label.

• In global styles, clicking the swatch+label item slides the inspector and shows all palettes and color tools.
• In editor inspectors, clicking the swatch+label item opens a popover that shows all palettes and color tools. This popover has two states, showing the palette and then showing the color tool.

---

Next steps

Note: This issue should be considered a draft, and will eventually supersede #33820

ColorSwatch

For more context of the conversation leading to ColorSwatch & more, see #33820.

• Create ColorSwatch component
  • TBD: one component with isInteractive prop vs two separate components
  • Investigate a11y improvements (e.g. should it have a tooltip at all?)
• Rewrite ColorIndicator to use ColorSwatch internally
• Rewrite CircularOptionPicker.Option to use ColorSwatch internally

ColorPicker

Please refer to #34284 for the work related to the updated ColorPicker component

Higher-level color components

With the new ColorSwatch and ColorPicker components, we're going to be able to look at higher-level color components (currently ColorPalette, CircularOptionPicker...)

We will need to reassess the new needs that these components need to fulfil. For example, the custom color and clear/reset features of ColorPalette may be assumed by other components (like the newly introduced ToolsPanel). And rather than rendering a palette of color options directly in the sidebar, we’ll be moving toward using ItemGroup to group color attributes. In Global Styles, clicking an Item will drill down to another sheet displaying the available color options and related components. In block sidebars, this action will likely result in a popover with similar controls.

ColorPalette

• Color Palette: improve keyboard navigation #35292
• Color palette: Design updates #36543

Gradient Picker & related

• Update: Custom gradient picker design. #34712 (comment)
• Rewrite component to TypeScript
• Use Emotion and update folder structure

[glendaviesnz]

Has any consideration been given to the use of these components in a dropdown menu context along with the inspector panel?

I have been looking at #20837, but currently the color/gradient controls seem very coupled to the inspector panels.

[ciampo]

Has any consideration been given to the use of these components in a dropdown menu context along with the inspector panel?

I have been looking at #20837, but currently the color/gradient controls seem very coupled to the inspector panels.

@jasmussen and @mtias may be better suited to answer this question

[jasmussen]

Has any consideration been given to the use of these components in a dropdown menu context along with the inspector panel?

I imagine the primary benefit of having a flyout version of the color swatch picker is that the flyout itself can be invoked either by an Item in the ItemGroup, or a button in the Toolbar. Here's how it could look for the Cover:

Edit: I've updated the above mockup to include a segmented control for gradients, which I previously forgot about. Some of the details could still be massaged, but the puzzle pieces should be in place.

[javierarce]

I like your design, @jasmussen, but there's something I'm starting to get worried about with the increased use of segmented controls: if we end up adding more items, we'll probably need to switch to a dropdown since segmented controls won't scale equally well in every language.

Maybe it's just me optimizing prematurely and we won't have more than two or three options in that flyout, but I'd consider exploring an option with a dropdown.

[jasmussen]

There are definitely cases where the segmented control won't work, good call. I do think that might be a bridge we need to cross when we get there. At the moment, "Linear" and "Radial" are both properties of the gradient control itself, which would make "Image" fit if that ends up being an addition.

[ciampo]

I like your design, @jasmussen, but there's something I'm starting to get worried about with the increased use of segmented controls: if we end up adding more items, we'll probably need to switch to a dropdown since segmented controls won't scale equally well in every language.

Maybe it's just me optimizing prematurely and we won't have more than two or three options in that flyout, but I'd consider exploring an option with a dropdown.

I believe a similar pattern is being explored for Typography Tools (#34345), where we switch between a segmented control and a dropdown for the Font sizes (depending on the number of items to display)

[kellychoffman]

Would like to propose a few minor tweaks for 5.9 to make the current color panel more intuitive and if i may... palatable. (While we are waiting for some improvements to land post 5.9.) If we can't get most of these in, I would hesitate to include this. @jasmussen - what do you think?

• change “core” terminology to “default”
• reverse order so “theme” is on top of "default"
• more padding in between each grouping of color
• line separator between each section
• move big transparent rectangle to be small circle. (either keep transparent bg or add a more simple diagonal line thru it as pictured above)
• smaller circles (purely aesthetic, so not a need)

For reference - the current experience is quite overwhelming.

[jasmussen]

I really like the color card in Global styles. It's primarily the fact that in the post editor it will nearly always show the transparency, which when duplicated like it is without the ItemGroup collapsing makes it lose much of its intrinsic meaning.

In that vein, I took a stab at Kelly's suggestion above in #36243. It's a quite hacky PR, and if it can be unhackified, it might be a better solution than reverting the card.

[critterverse]

One more thing to add to @kellychoffman's notes above — I think one thing that's hurting the readability is that there's not a very clear visual hierarchy between the section headings. Squinting at this image, the all caps palette headings almost appear heavier than the regular title case label:

Setting the all caps labels in gray-800 would help those recede a bit.

[jasmussen]

Good call, that's another aspect. In the original context in which the card was designed, it's meant to be the entirety of the contents of the panel, meaning the sidebar header is the heading:

[shaunandrews]

Shared a few ideas over on the related PR: #36243 (comment)

[ciampo]

Hey @kellychoffman @critterverse @shaunandrews! Since this is a tracking issue, would you mind opening a separate issue specific to discuss the Color Panel changes, and link to it from here?

Thank you!

[kellychoffman]

Added a design issue here: #36543

[markhowellsmead]

Is there a reference anywhere for adding the new color picker component/s to a custom block? I’ve been using PanelColorSettings until now (which looks like this), but this omits the Standard color set and doesn't respect the settings in theme.json.

[ciampo]

Is there a reference anywhere for adding the new color picker component/s to a custom block? I’ve been using PanelColorSettings until now (which looks like this), but this omits the Standard color set and doesn't respect the settings in theme.json.

Maybe @aaroncampbell or @jasmussen can help you out here?

[jameskoster]

Possibly one for consideration here: #41868. And this one: #41866

[jasmussen]

Is there a reference anywhere for adding the new color picker component/s to a custom block? I’ve been using PanelColorSettings until now (which looks like this), but this omits the Standard color set and doesn't respect the settings in theme.json.

Perhaps @jorgefilipecosta?

[jorgefilipecosta]

Is there a reference anywhere for adding the new color picker component/s to a custom block? I’ve been using PanelColorSettings until now (which looks like this), but this omits the Standard color set and doesn't respect the settings in theme.json.

PanelColorSettings should automatically retrieve theme.json colors and settings if they are not passed. Using the ColorPalette from the block editor package should also automatically include colors and settings. What issues did you found if the color are not passed?