Color Palette Setup in Gutenberg

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).

// 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;
}
}
view raw _colors.scss hosted with ❤ by GitHub
<?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' );
view raw functions.php hosted with ❤ by GitHub

Gutenberg

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk