Allow overwrite of colors for PanelColor component

[florianbrinkmann]

Is your feature request related to a problem? Please describe.

I have a project that needs two different color palettes for text and background colors. I got this working for my own block with

• recreating the PanelColor component (the result can be seen here https://gist.github.com/florianbrinkmann/e070d731ad11177e34969cd6fbb1a83e).
• setting the super set of colors via the add_theme_support( 'editor-color-palette' ) call.
• Defining the sub sets of colors for the text and background color via the colors param of the ColorPalette component.

But now I have a new problem with that: I want to modify the text color palette of paragraph blocks, so it only shows the wanted colors. I wanted to create a similar solution fopr that like for my own block via the editor.BlockEdit filter, but that was not really successful.

Describe the solution you'd like

Being able to define colors for the PanelColor component, like it was done for ColorPalette, would be really nice :)

[jorgefilipecosta]

Hi @florianbrinkmann,
Thank you for sharing your use case 👍

Is passing a colors array by default with add_theme_support( 'editor-color-palette' ) that is used by the core blocks (paragraph etc...) and using different arrays on your own blocks an option?

From your description, It seems currently you define all the colors with add_theme_support( 'editor-color-palette' ) and on your blocks, you use subsets of this colors. And you wanted to use a different subset on paragraph. Maybe the solution passes by using non-subsets on the colors of your blocks. The downside is that you may lose access to some of our abstractions on blocks not using editor colors like the withColors.

[florianbrinkmann]

Hi @jorgefilipecosta,

thanks for your comment!

Is passing a colors array by default with add_theme_support( 'editor-color-palette' ) that is used by the core blocks (paragraph etc...) and using different arrays on your own blocks an option?

Hm, not really, because that would mean that the background color controls provided by the core blocks would have the same colors as the text color controls of the core. And I want them to be different :)

In short: I want to be able to define the colors X, Y, and Z and use them for all text controls, and use the colros A, B, and C for all background color controls. Regardless if that are controls of custom blocks or core blocks.

And I could get this working if I would be able to define custom color overwrites for the PanelColor component (I would then add my own inspector controls to the core blocks and hide the core controls).

Hope that makes it clearer :)

Thanks,
Florian

[fishstix81]

👍 On this ask. Currently, we are creating tons of custom modules that may not be needed if we have the ability to use block nesting with simple core/paragraph and core/heading features. This would shave off some development time for us and be able to enforce brand standards across all of our marketing pages. Instead, we have had to create our own blocks to help enforce those standards and disable the core blocks found inside of Gutenberg.

[mrwweb]

This isn't quite what @florianbrinkmann may be asking for, but it would be really nice to simply be able to define separate color palettes for background and text. I think his use case seems quite reasonable, and I found this ticket because I was hoping to do the same thing.

In terms of the PHP API, this might look like this:

1. Palette for both:

add_theme_support( 'editor-color-palette', array(
    array(
        // define your first color
    ),
    array(
        // define your second color
    )
) );

2. Separate palettes:

add_theme_support( 'editor-color-palette', array(
    'color' => array(
	    array(
	        // define your first color
	    ),
	    array(
	        // define your second color
	    )
    ),
    'background-color' => array(
	    array(
	        // define your first color
	    ),
	    array(
	        // define your second color
	    )
    )
) );

[gziolo]

It makes me wonder whether the proposal from @youknowriad https://make.wordpress.org/core/2020/01/23/controlling-the-block-editor/ and filed under #20588 doesn't share the same characteristics. In general, it also overlaps with the Global Styles project (https://github.com/WordPress/gutenberg/projects/40).

@talldan - isn't it duplicate of #6941?

[talldan]

@gziolo It's pretty similar, though I think this is about defining colors through code, while I think #6941 is about a user being able to add/remove custom colors through the UI.