Color Palette Setup in Gutenberg

For more information, see Gutenberg color palette and button styling.

Gutenberg allows you to define a custom color palette for your theme. There are two aspects to setting it up:

1. Register the color palette options in functions.php
2. Add css for each color option in your stylesheet

The styles for a “grey” color option (#555) would be:

.has-grey-color { color: #555; }
.has-grey-background-color { background-color: #555; }

We can use SASS partials to auto-generate this using an array of color options. This is how I implement it in my two base themes (EA Genesis Child and EA Starter).

_colors.scss

// Gutenberg color options
// -- see editor-color-palette in functions.php
$colors: ( blue, #59BACC ),
	( green, #58AD69 ),
	( orange, #FFBC49 ),
	( red, #E2574C );


/* Color Options
--------------------------------------------- */

@each $name, $color in $colors {

	.has-#{$name}-color {
		color: $color;
	}

	.has-#{$name}-background-color {
		background-color: $color;
	}
}

functions.php

/**
 * Theme Setup 
 *
 */
function ea_setup() {
	// Disable Custom Colors
	add_theme_support( 'disable-custom-colors' );
  
	// Editor Color Palette
	add_theme_support( 'editor-color-palette', array(
		array(
			'name'  => __( 'Blue', 'ea-starter' ),
			'slug'  => 'blue',
			'color'	=> '#59BACC',
		),
		array(
			'name'  => __( 'Green', 'ea-starter' ),
			'slug'  => 'green',
			'color' => '#58AD69',
		),
		array(
			'name'  => __( 'Orange', 'ea-starter' ),
			'slug'  => 'orange',
			'color' => '#FFBC49',
		),
		array(
			'name'	=> __( 'Red', 'ea-starter' ),
			'slug'	=> 'red',
			'color'	=> '#E2574C',
		),
	) );
}
add_action( 'after_setup_theme', 'ea_setup' );