When choosing a color from Palette, use CSS Classes from Gutenberg Color Palette

[santicros]

When using a custom Color Palette on Gutenberg, we register in functions.php something like:

add_action( 'after_setup_theme', function() {
  add_theme_support( 'disable-custom-colors' );
  add_theme_support( 'editor-color-palette', array(
    array(
      'name' => __( 'Red', 'themeLangDomain' ),
      'slug' => 'red',
      'color' => '#f4302f',
    ),

and then on CSS we can use CSS Vars if this color is used on custom css, like:

:root {
  --main-color: #f4302f;
}
.has-red-background-color {
	background-color: var(--main-color);
}
.has-red-color {
	color: var(--main-color);
}

If we later change the color everything is updated.

The problem is that in GenerateBlocks, colors from color Palette are asigned on user select, and are not referenced as general colors. If later the colors change, it must be changed item by item. Could you make it use the same classes that Gutenberg apply (.has-___-background-color,...)? Or use directly CSS vars so it's always updated.

Thanks for your great effort!

[tomusborne]

Thanks for the feedback here!

Working on this, but I see one major issue. What about :hover?

Those utility classes work fine for simple elements (the Container block), but they lose their effectiveness as soon as you start working with any other state.

I wonder if it would be better here to allow var(--main-color) as the actual value of the color picker.