Using Gutenberg Color Palette for a Custom Block
In the previous tutorial I explained how to create settings panels for your custom Gutenberg block, now let’s dive more into it and look how to create custom block color settings with the help of PanelColorSettings
.

Some of the steps should be familiar for you. First of all we have to include certain components.
const { withColors, PanelColorSettings, getColorClassName } = editor;
PanelColorSettings
– you can use it inside yourInspectorControls
to add a separate panel, likePanelBody
, but with only color settings,withColors
– something new here. It is a Higher-Order Component (HOC). It is described below,getColorClassName
– we will need it insave()
function. But not necessary by the way, because it is easy to understand how class names are generated:has-{SLUG}-color-name
. Please note, that this function has been renamed fromgetColorClass()
in Gutenberg 3.9.0;
Understanding withColors HOC
The long story short, withColors
plays a role of a wrapping function for the regular edit()
function, as a result, in the edit()
function we have access to props.ColorName
object and props.setColorName
function.
withColors
itself can receive multiple arguments, each of them is a color name we are going to use.
edit: withColors( 'colorName1', 'colorName2', ... )( function( props ) {
// These props are added by withColors HOC
var colorName1 = props.ColorName1;
var colorName2 = props.ColorName2;
// onChange functions are also added by withColors
var setColorName1 = props.setColorName1;
var setColorName2 = props.setColorName2;
// edit() function goes here...
} ),
How to Use PanelColorSettings
We already made a detailed look at Gutenberg Inspector Controls in the previous tutorial, the color settings panel PanelColorSettings
is something similar. And we also have to use it inside InspectorControls
.
el( PanelColorSettings, {
title: 'Awesome Color Options',
colorSettings: [
// Color 1
{
colors: colorSamples, // here you can pass custom colors
value: colorName1.color,
label: 'Form color',
onChange: setColorName1,
},
// Color 2
{
value: colorName2.color,
label: 'Text color',
onChange: setColorName2,
},
// Color 3 etc ...
]
}),
Let’s look at line 7, what is colorSamples
? Let’s say that you’re unhappy with default theme colors added with add_theme_support()
(a lot of tutorials are over there, but if you have no idea what I mean – ask in comments). So your block’s colors should be different from theme colors, in this case you can set them directly in JavaScript like this:
const colorSamples = [
{
name: 'Coral',
slug: 'coral',
color: '#FF7F50'
},
{
name: 'Lavender',
slug: 'lavender',
color: '#E6E6FA'
},
{
name: 'White',
slug: 'white',
color: '#ffffff'
}
];
Below is the result:

Example of Using Color Palette for a Custom Block
I already mentioned in the beginning of the tutorial that we need withColors
, PanelColorSettings
and getColorClassName
components. And do not forget about InspectorControls
.
That line of code can look like this:
const { InspectorControls, withColors, PanelColorSettings, getColorClassName } = editor;
Attributes
Here we have to decide how to name our color, it can be backgroundColor, textColor, anythingColor. I use it for a newsletter form, so for me it will be formColor.
Once you decide, you have to create two attributes – colorName
and customColorName
, example:
attributes: {
formColor: { // something
type: 'string',
},
customFormColor: { // customSomething
type: 'string',
},
},
If you’re using more than one color, create two attributes for each of them.
edit()
Here we are going to deal with withColors
we talked before in this tutorial.
edit: withColors( 'formColor' )( function( props ) {
// is it a predefined in a theme color?
var formClasses = (( props.formColor.class || '' ) + ' ' + props.className ).trim();
// form background color
var formStyles = {
backgroundColor: props.formColor.class ? undefined : props.attributes.customFormColor,
};
// as you can see the form button must change its color too
var buttonStyles = {
color: props.formColor.class ? undefined : props.attributes.customFormColor,
};
return (
el( Fragment, {},
// Color Settings
el( InspectorControls, {},
el( PanelColorSettings,
{
title: 'Awesome Color Options',
colorSettings: [
{
colors: colorSamples,
value: props.formColor.color,
label: 'Form Color',
onChange: props.setFormColor,
}
]
},
),
),
// Block markup
el( 'div', { className: formClasses, style: formStyles },
el( 'div', { className: 'misha-subscription-block-form-wrap' },
el( 'div', {},
'Enter your email...'
),
el( 'div', { style: buttonStyles },
'Subscribe'
)
)
)
)
);
} ),
- Ok, first things first, I used withColors on line 1 and added just one custom color name –
formColor
. - Since I did it, I gained the access to
props.formColor.class
,props.formColor.color
and functionprops.setFormColor
. - I made this code ready for both predefined in a theme colors and custom ones. So, if a selected color is a predefined one, we use only classes and do not add inline CSS to HTML elements.
- On line 26 I’m still using custom colors which I added as a constant here.
Everything else should be clear, but anyway if you have a question, welcome to comments section.
save()
Everything should be pretty clear here except one thing – how to deal with getColorClassName
function.
You have to understand just one thing – how color class names are generated.
So, color class names are created from slugs and color names like this has-{SLUG}-{COLOR NAME}
. Easy, but… Color names must be transformed to lowercase and hyphens must be added. Example: backgroundColor will be transformed to background-color, my formColor will be transformed to form-color.
save: function( props ) {
// color name "formColor" is transformed to "form-color"
var formClass = getColorClassName( 'form-color', props.attributes.formColor );
// if exists, otherwise empty string
var formClasses = formClass || '';
var formStyles = {
backgroundColor: formClass ? undefined : props.attributes.customFormColor,
};
// do not forget about button styles too
var buttonStyles = {
color: formClass ? undefined : props.attributes.customFormColor,
};
return (
el( 'div', { className: formClasses, style: formStyles },
el( 'form', { className: 'misha-subscription-block-form-wrap' },
el( 'input', { 'type': 'email', 'placeholder' : 'Enter your email address' } ),
el( 'button', { style: buttonStyles }, 'Subscribe' )
)
)
);
},

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Hi Misha,
Great article!
Sorry I am not familiar with react so I have a stupid question.
How to edit props for more than one color setting?
only shows how to continue with one color.
What if I had set say had formTxtColor also how would I add formTxtColor to this argument?
Would this be correct?
Sorry as i said I am only starting to play with react.
Hey Adrian,
There is an answer in the article:
Is there a JSX version? I’m working with JSX in my code and I’m having a hard time translating the code in the post to use JSX.