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 your InspectorControls to add a separate panel, like PanelBody, 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 in save() 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 from getColorClass() 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 function props.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' )
			)
		)
	);
},

You can find the complete code on my GitHub page

Tutorials from the Gutenberg series

• Create a Gutenberg Block
• Editable Gutenberg block
• Inspector Controls Tutorial

# Gutenberg

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

Follow me on Twitter