Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Components: update color-related components — Tracking issue #35093

Open
3 of 10 tasks
ciampo opened this issue Sep 23, 2021 · 18 comments
Open
3 of 10 tasks

Components: update color-related components — Tracking issue #35093

ciampo opened this issue Sep 23, 2021 · 18 comments
Labels
[Feature] Component System WordPress component system [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.

Comments

@ciampo
Copy link
Contributor

ciampo commented Sep 23, 2021

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:

step1

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

step2

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

Color ItemGroup Flow i5

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

Gradient Picker & related

@ciampo ciampo added [Status] In Progress Tracking issues with work in progress [Package] Components /packages/components [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues. [Feature] Component System WordPress component system labels Sep 23, 2021
@glendaviesnz
Copy link
Contributor

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
Copy link
Contributor Author

ciampo commented Sep 28, 2021

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
Copy link
Contributor

jasmussen commented Sep 28, 2021

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:

Toolbar ItemGroup

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
Copy link
Contributor

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.

image

@jasmussen
Copy link
Contributor

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
Copy link
Contributor Author

ciampo commented Oct 5, 2021

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.

image

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
Copy link
Contributor

kellychoffman commented Nov 4, 2021

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?

Screen Shot 2021-11-04 at 4 30 51 PM

  • 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.
color-overwhelming

@jasmussen
Copy link
Contributor

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
Copy link
Contributor

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:

color-section-heading-hierarchy

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

@jasmussen
Copy link
Contributor

jasmussen commented Nov 5, 2021

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:

Screenshot 2021-11-05 at 14 19 07

@shaunandrews
Copy link
Contributor

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

@ciampo
Copy link
Contributor Author

ciampo commented Nov 10, 2021

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
Copy link
Contributor

kellychoffman commented Nov 16, 2021

Added a design issue here: #36543

@markhowellsmead
Copy link

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

@ciampo
Copy link
Contributor Author

ciampo commented Feb 2, 2022

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
Copy link
Contributor

jameskoster commented Aug 25, 2022

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

@jasmussen
Copy link
Contributor

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
Copy link
Member

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

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Component System WordPress component system [Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Tracking Issue Tactical breakdown of efforts across the codebase and/or tied to Overview issues.
Projects
None yet
Development

No branches or pull requests

10 participants