Taking control over the Gutenberg Color Palette

written by: Jeff McNear

---

Taking control over the Gutenberg Color Palette

For many of the block elements in Gutenberg there are color settings for text and/or background colors

The default color selections are less than perfect in my opinion – thankfully they can be over-written by taking a few steps in your theme.

First in your functions.php file you need to declare your custom color names, associated styles and color definitions:

// Adds support for editor color palette - https://www.billerickson.net/code/color-palette-setup-in-gutenberg/

add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'Red', 'pdog' ),
		'slug'  => 'pdog-red',
		'color'	=> '#b12328',
	),
	array(
		'name'  => __( 'Yellow', 'pdog' ),
		'slug'  => 'pdog-yellow',
		'color' => '#ffcc00',
       ),
	array(
		'name'  => __( 'Blue', 'pdog' ),
		'slug'  => 'pdog-blue',
		'color' => '#006699',
	),	
	array(
		'name'  => __( 'Orange','pdog' ),
		'slug'  => 'pdog-orange',
		'color' => '#ff8400',
	),	
	array(
		'name'  => __( 'Light Grey','pdog' ),
		'slug'  => 'pdog-light-grey',
		'color' => '#e5e5e5',
	),		
	array(
		'name'  => __( 'Grey','pdog' ),
		'slug'  => 'pdog-grey',
		'color' => '#898787',
	),	
	array(
		'name'  => __( 'Dark Grey','pdog' ),
		'slug'  => 'pdog-dark-grey',
		'color' => '#333333',
	),	
	array(
		'name'  => __( 'Light Blue','pdog' ),
		'slug'  => 'pdog-light-blue',
		'color' => '#05b9fc',
	),	
	array(
		'name'  => __( 'Dark Green','pdog' ),
		'slug'  => 'pdog-dark-green',
		'color' => '#405b24',
	),		
	array(
		'name'  => __( 'Light Green','pdog' ),
		'slug'  => 'pdog-light-green',
		'color' => '#05c3af',
	),	
	array(
		'name'  => __( 'Black','pdog' ),
		'slug'  => 'pdog-black',
		'color' => '#000000',
	),		
	array(
		'name'  => __( 'White','pdog' ),
		'slug'  => 'pdog-white',
		'color' => '#ffffff',
	),			
) );

Then you need to define the referenced classes in your CSS file for both the text color and the background color. This means that if your color class is “pdog-red” then you will need to define both “has-pdog-red-color” and “has-pdog-red-background-color”

/*--- THESE ARE THE COLORS FOR THE CUSTOM BLOCK COLOR OPTIONS REFERENCED IN THE FUNCTIONS FILE ----*/
.has-pdog-red-color { color: #b12328; }
.has-pdog-red-background-color { background-color: #b12328; }

.has-pdog-yellow-color { color: #ffcc00; }
.has-pdog-yellow-background-color { background-color: #ffcc00; }

.has-pdog-blue-color { color: #006699; }
.has-pdog-blue-background-color { background-color: #006699; }

.has-pdog-orange-color { color: #ff8400; }
.has-pdog-orange-background-color { background-color: #ff8400; }

.has-pdog-light-grey-color { color: #e5e5e5; }
.has-pdog-light-grey-background-color { background-color: #e5e5e5; }

.has-pdog-grey-color { color: #898787; }
.has-pdog-grey-background-color { background-color: #898787; }

.has-pdog-dark-grey-color { color: #333333; }
.has-pdog-dark-grey-background-color { background-color: #333333; }

.has-pdog-light-blue-color { color: #05b9fc; }
.has-pdog-light-blue-background-color { background-color: #05b9fc; }

.has-pdog-dark-green-color { color: #405b24; }
.has-pdog-dark-green-background-color { background-color: #405b24; }

.has-pdog-light-green-color { color: #05c3af; }
.has-pdog-light-green-background-color { background-color: #05c3af; }

.has-pdog-black-color { color: #000000; }
.has-pdog-black-background-color { background-color: #000000; }

.has-pdog-white-color { color: #ffffff; }
.has-pdog-white-background-color { background-color: #ffffff; }

Now the color palette will reflect your defined default colors

If you want to deny the editor the option of using custom colors change this:

add_theme_support( 'editor-color-palette', array(

to this

add_theme_support( 'disable-custom-colors' );
add_theme_support( 'editor-color-palette', array(

However the more an editor grows accustomed to the flexibility of options in Gutenberg, the less they are bound to accept having their options limited.