color-palette-panel - add possibility to "group" colors

[Chrico]

What problem does this address?

Right now the ColorPalettePanel groups colors via PaletteEdit into the hardcoded 2 groups "Theme" and "Default", but it is not possible to introduce custom grouping. This could become handy when having many custom colors and starting to group them by branding or usage.

Theme

Code: https://github.com/WordPress/gutenberg/blob/v15.0.1/packages/edit-site/src/components/global-styles/color-palette-panel.js#L49-L55

Those are comming from the theme.json via settings.color.palette in following format:

{
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "primary",
                    "color": "#7c027c",
                    "name": "Purple"
                }
            ]
        }
    }
}

Defaults

Code: https://github.com/WordPress/gutenberg/blob/v15.0.1/packages/edit-site/src/components/global-styles/color-palette-panel.js#L57-L67

Those are default colors which can also be deactivated via theme.json via settings.color.defaultPalette: false

What is your proposed solution?

We could simply extend the settings.color.palette by introducing a new "group"-key to the color settings. This way we were able to add some grouping on the ColorPalettePanel to have better seperation:

{
    "settings": {
        "color": {
            "palette": [
                {
                    "slug": "purple",
                    "color": "#7c027c",
                    "name": "Purple"
                    "group": "Product XYZ Branding"
                },
                {
                    "slug": "lavender",
                    "color": "#E6E6FA",
                    "name": "A different purple"
                    "group": "Product ABC Branding"
                },
                {
                    "slug": "fuchsia",
                    "color": "#FF00FF",
                    "name": "Default purpleish"
                }
            ]
        }
    }
}

The output would looks like following:

We have 3 groups: The 2 custom ones "Product XYZ Branding" and "Product ABC Branding" and additonally the 1 color which has no group defaults to "Theme":

[Chrico]

Any feedback? @kathrynwp 👀

[kathrynwp]

@Chrico I'm part of the triage team helping test bugs and label issues, but for enhancements we'll need to wait for a developer to provide some input. :)

[Chrico]

@bph or @ndiego maybe? 🙃

[karmatosed]

Hi @Chrico one thing this has me thinking is whether this is something to add or whether having styles where it's clearer the entire brand changes is easier. I say this because changing a styling is easy and has more of a visual component than a pallette. I, therefore, wonder when thinking of branding colors like your example if using style changes would be better than loading multiple palettes.

That said, if there are already two palettes, having more than those restrictions doesn't seem a huge issue. It does to me feel like over a certain point scaling of that interface would need some consideration. That's why I feel the styling/style book interface might be a better way to lead people to for branding.

[Chrico]

@karmatosed The "branding" was just an example for possible grouping of colors. 🙃 You could also choose "primary, secondary, the rest" or "grey, gray, another grey, blue" as groups. It doesn't matter, but it would allow more "clarity" for the color platette vs the current 2 groups "Default" and "Theme".

[bhubbard]

I love this idea, for the site I am working on now, we would have 3 "groups":

• Primary Brand Colors
• Brand Colors for a Sub Organization
• Brand ADA Colors for the Sub Organization

Without groups, some users would see the ADA colors next to the brand colors, not understanding which is for what. They could hover and see the name, but that is not as obvious to all users.

[jdamner]

Related: #34741

[jdamner]

I'm happy to take this on and produce a PR, but I guess the needs-discussion on this is around determining the best way to allow theme & plugin developers to define palette groupings.

In the interests of keeping this simple, I'd suggest that initially the best approach would be to allow the palettes returned by the settings api to be passed through a filter that returns as many palettes as necessary. It would make the feature initially only available via JS, but would pave the way for more robust colour-palette management.

At the moment it's somewhat achievable to modify the palette data using blockEditor.useSetting.before hook.

/* Assume these imports define colour-palettes in the right format */
import defaultPaletteOverride from './palette-default.json'
import themePaletteOverride from './palette-theme.json'

const replaceColorPalette = ( settings, key, clientId, blockName ) => {

	if ( key === 'color.palette.default' ) {
		return defaultPaletteOverride
	}

	if ( key === 'color.palette.theme' ) {
		return themePaletteOverride;
	}

	return settings;
};

The main issue I see here is that the main colour selection component is hard-coded to pull data from three palettes - default, theme and custom - the colour-component itself is actually very capable of rendering as many palettes as you like.

My initial instinct would be to add a filter around https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/colors/with-colors.js#L67 to allow plugin and theme developers to modify the palettes to include additional or modify/remove existing. If there's compatibility risks, we could also only allow additional palettes to be added this way, and the three existing palettes could remain untouched. See note below, this isn't a simple filter task.

The larger scope of work would be to allow theme.json to be defined with an array of palettes each with a unique name and label, somewhat like below. I'd suggest this format over the json format from @Chrico since the slug only does not provide a UI label. The existing colour component already differentiates between a single colour and a palette of colours based on if the object has a colors key vs a color key. Replicating this structure to the theme.json schema seems like the most sensible approach also:

{
    "settings": { 
        "color": {
            "palettes": [
                { "label": "Palette One", "slug": "palette-one", "colors": [ {} ] },
                { "label": "Palette Two", "slug": "palette-two", "colors": [ {} ] },
                { "label": "Palette Three", "slug": "palette-three", "colors": [ {} ] },
            ]
        }
    }
}

The colour objects would be the same as the existing colour definitions, but we would construct the class names to be .has-{palette.slug}--{color.slug}-color to avoid name conflicts.

---

If we can agree that the JS solution is a good first step I can do the work to get this running and tested. The filter solution feels like a much more manageable scope of work, for a feature that may be utilised only by advanced theme developers.

If we want to consider the larger effort to add support in the theme.json I can look to take this on also, just looking for guidance before starting.

[jdamner]

I see now why this has been on the back-burner for a while and why more discussion is needed! I was naïve to think this wouldn't be a particularly large task!

It seems to me that it would be truly beneficial for colour palettes to be refactored to a couple of single hooks used across all components that need them. Right now there's a few instances where hooks are used (useColorsPerOrigin and useGradientsPerOrigin), other instances where colour settings are retrieved directly using useSettings.

I think a good initial scope of work would be to aim to consolidate all areas where colour and gradient palettes are used to a single hook (or a few hooks). This will be a foundation of allowing further development allowing multiple palettes to be defined by theme and plugin authors.

[jdamner]

Further thoughts on this, the ability to edit the theme colour palette exists within the site editor, so any solution will require a suitable design to support this.

This may create an opportunity for plugin and theme developers to offer palettes to the user that are user controlled/managed, simplifying changes of colors used within plugins.

If I install a plugin that offers a colour palette that's used by all the components that plugin offers, it's currently difficult to achieve colour changes that are applied to all blocks through the colour picker in the block editor.

As an example, I might offer an ecommerce plugin with lots of blocks, but would like each block to follow a consistent them. Right now, each instance of that block would need its colour defined, and any server side code (such as an email template) would require separate configuration. Potentially if the plugin registered its colour palette the user could change it globally in the site editor for all blocks by the plugin vendor. I could see scenario where the plugin vendor may wish to opt-out of having the palettes modified though, such as where brand colours exist and shouldn't be changed.

A registered palette would have the CSS vars generated from the style engine, so overridable much like how the theme palette functions today, and a registered palette would have data persisted and available server side, or fallback to the plugin provided default.

This might tie in to the talks around colour ways/grouped palettes too.

[fabiankaegy]

@WordPress/gutenberg-design I'd love to get your thoughts on this. We discussed this in a recent Gutenberg Extensibility triage session and thought it would be something the design team would have thoughts/opinions about :)

[jasmussen]

Seems like this could work as a theme.json affordance 👍 👍

What design does it need? The initial instinct with subheadings seems like it could work. We might need to eventually consider a scrollbar for the flyout, and/or smaller swatches, for when a lot of colors are added. But that seems a separate issue that's valid for trunk as it exists today as well.

[aurooba]

I'd love to see some attention around this! In large and complicated sites, for example, you often have primary brand colours, secondary colours, neutrals, etc. Being able to group, categorize, and specify which groups are available to what blocks, would be awesome.

[ndiego]

@richtabor @bgardner @justintadlock Any thoughts on this one? I can see how this functionality would be extremely useful for those building sites for clients.

[bgardner]

I also like the idea, though trying to wrap my head around it relative to section styles (and also how/if there's any impact for how I currently have colors supplied in Powder). Myself and product aside, I do think this would be a step forward for folks who are building client sites, for many of the reasons mentioned above.

[richtabor]

This is just organizational, correct?

I'd also like to see more real world examples of how folks would organize colors, even perhaps default themes (if they would).

[ndiego]

This is just organizational, correct?

Yeah, that's my intuition. Just a way to customize and simplify the presentation of a color palette for users.

[richtabor]

Gotcha. Let's get a solid proposal, perhaps with alternates, on how to approach this. Best to lean on anything existing/related, if possible.

[ndiego]

Gotcha. Let's get a solid proposal, perhaps with alternates, on how to approach this. Best to lean on anything existing/related, if possible.

@Chrico is this something you would be up for?

[justintadlock]

Yes, this mostly looks organizational. I don't have any strong preference for this in my own theme, but I could explain how I'd use it.

My theme basically breaks colors down in this way:

• Defaults/Base: base and contrast (potentially also adding pure white and black)
• Primary: primary-50 through primary-950
• Secondary: secondary-50 through secondary-950
• Neutral: neutral-50 through neutral-950

By default, I can see where this could feel a bit overwhelming for the user:

I'd be in favor of having some type of use grouping system.

[richtabor]

I don't know that organizing by Primary, Secondary, Neutral will be super helpful understanding the color hierarchy much more. Perhaps I'm wrong though. Is that what you would do if this was supported?

[justintadlock]

I don't know that organizing by Primary, Secondary, Neutral will be super helpful understanding the color hierarchy much more. Perhaps I'm wrong though. Is that what you would do if this was supported?

Yes, I would try it if this was supported. But I don't know that it would be super helpful in understanding the hierarchy more either, which is why I said I didn't have a strong preference for it.

I think where it might be more helpful, for this case at least, is creating a less overwhelming feeling with so many choices.

But, if I'm being honest, I may just disable color options altogether in favor of section styles in 6.6, which I think is a more future-proof and cross-theme/variation way of handling color and styles.

[cbirdsong]

A client's color palette is organized by primary and secondary colors, as well as sets of accent colors related to specific product lines. It would be much cleaner if they could be organized in a way that reflects that.

[fabiankaegy]

A client's color palette is organized by primary and secondary colors, as well as sets of accent colors related to specific product lines. It would be much cleaner if they could be organized in a way that reflects that.

Yeah this is pretty much my experience also. Clients already have their design systems which divide colors up into separate semantic / product related sections. And the ask from them is to be able to match that organization.

[bgardner]

Another real-world example would be our brand refresh at WP Engine, where we clearly have a separation of colors, and this sort of functionality would serve as useful. See below:

[feroz39]

It will be highly appreciated.

[itsViney]

I'd just like to weigh in with another example of where this would be useful. I'm building a site for a client at the moment that has a primary palette of 6 colours (plus black and white). We then have shades of each colour (somewhat frustratingly, each colour has a different number of shades but that's not really relavant).

There's

• Beige
• Forest
• Red
• Ochre
• Lavender
• Teal

Then

• Forest 200
• Forest 300
• Forest 400
• Forest 600
• Red 600
• Ochre 50
• ... and so on

I can keep it somewhat organised by placing the primary palette first, and then all the shades after but I still foresee them picking a shade of a colour where they should use the primary. It would be really useful to be able to clearly seperate

• Primary
• Beige Shades
• Forest Shades
• Red Shades
• Ochre Shades
• ... and so on