How to Custom Color Palette to Gutenberg Block in WordPress

Gutenberg team doing a great job of making the editor more flexible for user’s and developer’s points of view. We can extend it by creating custom blocks or extend the existing blocks. This article is focusing on adding a custom color palette to Gutenberg’s paragraph block.

Default Theme Color Palettes

Gutenberg comes with some random color palettes as you can see below screenshot. But if we think from a designer’s point of view then we don’t require these random color palettes to the WordPress site.

Every design must have some unique color palette set as per their design. For example, take a look at a custom color palette that we are going to use in the Gutenberg color settings section.

Gutenberg Custom Color Palettes

WordPress provides the theme support hook to set the editor color palette for your theme. Now, let’s attach our own color palette for the theme. Open the functions.php file from your active theme directory and add the following code.

// Adds support for editor color palette.
$color_palette = array(
  	array(
		'name'  => __( 'Blue', 'wpastra' ),
		'slug'  => 'monte-blue',
		'color'	=> '#406186',
	),
	array(
		'name'  => __( 'Pink', 'wpastra' ),
		'slug'  => 'monte-pink',
		'color' => '#df7c88',
	),
	array(
		'name'  => __( 'Yellow', 'wpastra' ),
		'slug'  => 'monte-yellow',
		'color' => '#ffc372',
       	),
       	array(
		'name'  => __( 'Purple', 'wpastra' ),
		'slug'  => 'monte-purple',
		'color' => '#b5aebe',
       	),
       	array(
		'name'  => __( 'Light Yellow', 'wpastra' ),
		'slug'  => 'monte-light-yellow',
		'color' => '#ffd49c',
       	),
       	array(
		'name'  => __( 'Light Pink', 'wpastra' ),
		'slug'  => 'monte-light-pink',
		'color' => '#e8a3ab',
       	),
       	array(
		'name'  => __( 'Grey', 'wpastra' ),
		'slug'  => 'monte-grey',
		'color' => '#393939',
       	),
       	array(
		'name'  => __( 'White', 'wpastra' ),
		'slug'  => 'monte-white',
		'color' => '#ffffff',
       	),
);
add_theme_support( 'editor-color-palette', $color_palette );

The editor-color-palette accepts a multi-dimensional array in name, slug and color format. Where the name key for the color name, slug key for the unique key, and the color key hold the color code.

array(
    'name'  => __( 'Blue', 'themeLangDomain' ),
    'slug'  => 'monte-blue',
    'color'	=> '#406186',
),

Now refresh the page and you can find the color palettes similar to the below screenshot.

Now when you select the color, the color settings section applies the has-{$color-slug}-color for text color and has-{$color-slug}-background-color class for the background color to an entire paragraph block. And it will work properly in the backend with Gutenberg editor but not in the front-end.

To make it working on the frontend, we need the add all the color slugs with color code to our style.css file that you can find under your active theme directory.

.has-monte-blue-color{color: #406186;}
.has-monte-pink-color{color: #df7c88;}
.has-monte-yellow-color{color: #ffc372;}
.has-monte-purple-color{color: #b5aebe;}
.has-monte-light-yellow-color{color: #ffd49c;}
.has-monte-light-pink-color{color: #e8a3ab;}
.has-monte-grey-color{color: #393939;}
.has-monte-white-color{color: #ffffff;}

.has-monte-blue-background-color{background-color: #406186;}
.has-monte-pink-background-color{background-color: #df7c88;}
.has-monte-yellow-background-color{background-color: #ffc372;}
.has-monte-purple-background-color{background-color: #b5aebe;}
.has-monte-light-yellow-background-color{background-color: #ffd49c;}
.has-monte-light-pink-background-color{background-color: #e8a3ab;}
.has-monte-grey-background-color{background-color: #393939;}
.has-monte-white-background-color{background-color: #ffffff;}

Support Inline Color Palettes

The above codes only work with the entire block or the background-color but if in case it won’t work with the inline-code then you have to add the has-{$color-slug}-color classes for the Gutenberg editor.

We can use the enqueue_block_editor_assets hook to add style for the Gutenberg editor. Let’s create a new file for editor and add the following style to it.

.has-monte-blue-color{color: #406186;}
.has-monte-pink-color{color: #df7c88;}
.has-monte-yellow-color{color: #ffc372;}
.has-monte-purple-color{color: #b5aebe;}
.has-monte-light-yellow-color{color: #ffd49c;}
.has-monte-light-pink-color{color: #e8a3ab;}
.has-monte-grey-color{color: #393939;}
.has-monte-white-color{color: #ffffff;}

Now, save the file and use the wp_enqueue_style() function with enqueue_block_editor_assets hook.

add_action( 'enqueue_block_editor_assets', 'wrg_guten_enqueue' );
function wrg_guten_enqueue() {
    wp_enqueue_style(
        'wrg_guten-style',
        get_stylesheet_directory_uri() . '/wrg-editor.css',
        null,
        '1.0.0'
    );
}

We hope this article will help you to learn the how to add custom color palette to the Gutenberg block. If you like it then please follow us on Facebook and Twitter.