Color pallet filtering

[AlchemyUnited]

Is your feature request related to a problem? Please describe.
We need to be able to enforce the design rules defined in a style guide.

Note: I do know how to set the colors: for a particular control but there's no way to enforce brand-centric color combos.

Describe the solution you'd like

For example, let's say the brand's colors are A, B, X, Y and Z. What I need is to define / enforce rules such that: "If background color is X is picked, then font color (or border color, etc.) can only be Y or Z"

Describe alternatives you've considered
If I were a better JS / React dev :) ...

1. Develop some sort of custom control that would let me display a list of predefined color combos. Let's say each row is 2 to 4 colors - either square or round swatches. Each combo would have a slug, onChange that slug would be a classname, and with the classname the colors could be applied to the individual elements (background, font color, etc.)

The crappy quick fix would be a select: Red on Black, White on Red, Light Grey on Red, etc. but it would nice / ideal to show the colors as part of the selection process.

I've also considered trying to hack something together using a radio but have yet to explore this in much detail. The same can be said for using buttons.

[noisysocks]

Hi @AlchemyUnited! You can customise which colours show in the sidebar, and Gutenberg will warn the user if an inaccessible colour combination is chosen, but it is not currently possible to restrict the colour choice to a specific background/foreground combination.

This would require a new hook or filter to be added to Core.

This issue was mentioned in #core-editor as part of a triage meeting.

[AlchemyUnited]

@noisysocks - Thanks for the reply. However, I'm not concerned about color combos being inaccessible. My concern is brand style guide rules and how certain color combos are "allowed" (by the brand) and others are not.

Not to worry, I wrote my own component :) None the less, I believe it would be in Gutenberg's best interest if it worked towards being able to give the editors LESS control, not more. As it is, it's a free for all - which didn't work out well for MySpace :)

It's a good time to apply: "Just because you can doesn't mean you should."

But there are too few ways for the designer / developer to craft the editing UX in a less is more sorta way.

For example, I add a block today. I configure it (e.g., various Inspector settings). Then a month from now, I need the same block configured that exact same way. Yes, I suppose this is a case for a reusable block. But that means, I have to know about, remember to do it, remember that I did it, tell my assistant about it, etc. That's quite a bit of friction. Never trust the human element, right? :)

So with so much (read: various block settings) so tightly coupled to each block, I can't help but wonder how many sites are going to regret that in X months time. My initial impression was Gutenberg wanted to be (Adobe's) InDesign. That is, primarily are layout tool (that was better than the traditional editor). Instead it feels more like Photoshop/Illustrator - total "creative" freedom. That's great, until there are inconsistencies and/or the tight coupling strangles the possibility of a site redesign in the future.

The color combo issue is - for me - just one example of why - again for me - many blocks are dangerous.

[kadamwhite]

This may be a separate issue, but I found this thread while looking for a way to enforce another type of design guideline: use certain colors on certain blocks. We've had several requests to limit text colors to a certain set of options, but to make a wider array of colors available in blocks; this seems related to the kind of programmatic enforcement discussed here.

A filter that would let a theme limit the registered colors that display for a given block would solve my problem, though possibly not @AlchemyUnited's. Should I open that as a new feature request do you think, @noisysocks, or are these related enough to stay in-thread here?

[AlchemyUnited]

@kadamwhite - That would be a step in the right direction. As it is - without custom block dev - there's no way to enforce style guide rules.

[mtias]

@AlchemyUnited I'm confused, doesn't the ability to define your own color palette globally allow that control?

@kadamwhite it seems for that use case you should check the general styling milestone, more granular control over color palettes on specific contexts (template areas, blocks, etc) can be discussed more in that context.

[mtias]

I'm closing this given the lack of further feedback, but feel free to reopen or create a new issue if there's something to follow up with.