Custom Colour Palette To Block Editor

To add a custom colour palette to the Block Editor only requires a small function, a touch of styling and possibly adding an extra theme support item. If you are using the Stix Starter theme the custom colour palette is already there for you, just edit the colours.

Colour settings are editable in some blocks (e.g. the paragraph block). In these blocks the Block Editor shows a colour palette making it easy for you to select a background and foreground colour. By default this colour palette looks like this:

You might want to change the palette to show only the colours you specify. Once changed the palette looks like this:

The palette now shows only the colours you specified. Please note that the Editor also shows an extra colour picker to allow a user to select a colour you did not specify. You might want to remove this colour picker so that the user uses only the colours you added. If you do this the palette looks like this:

Okay, so how do we do all this?

functions.php

In your theme’s function.php file or whatever file your theme uses for functions you will need the following code:

if ( ! function_exists( 'your_domain_block_editor_color_palette' ) ) {
	/**
	 * Adds a custom color palette in the block editor.
	 */
	function your_domain_block_editor_color_palette() {
		add_theme_support(
			'editor-color-palette', array(
				array(
					'name'  => esc_html__( 'White', 'your_domain' ),
					'slug' => 'white',
					'color' => '#ffffff',
				),
				array(
					'name'  => esc_html__( 'Lightest Grey', 'your_domain' ),
					'slug' => 'lightest-grey',
					'color' => '#f5f5f5',
				),
				array(
					'name'  => esc_html__( 'Lighter Grey', 'your_domain' ),
					'slug' => 'lighter-grey',
					'color' => '#d1d1d1',
				),
				array(
					'name'  => esc_html__( 'Light Grey', 'your_domain' ),
					'slug' => 'light-grey',
					'color' => '#575757',
				),
				array(
					'name'  => esc_html__( 'Red', 'your_domain' ),
					'slug' => 'red',
					'color' => '#a30f1e',
				),
				array(
					'name'  => esc_html__( 'Blue', 'your_domain' ),
					'slug' => 'blue',
					'color' => '#15587e',
				),
				array(
					'name'  => esc_html__( 'Black', 'your_domain' ),
					'slug' => 'black',
					'color' => '#000000',
				),
			)
		);
	}
	add_action( 'after_setup_theme', 'your_domain_block_editor_color_palette' );
} // End if().

In this function you simply add all the colours you need to an array. You will have to change the code to meet your own requirements. Please remember to change all the references to your_domain in the code with your theme’s real domain.

That’s it for the back-end. A user will now be able to select all the colours he/she requires. At this stage the colours will not show on the front-end of your post/page. We do of course need a touch of styling for this.

style.css

Add the following to your style sheet:

.has-white-background-color {
  background-color: #ffffff;
}

.has-white-color {
  color: #ffffff;
}

.has-lightest-grey-background-color {
  background-color: #f5f5f5;
}

.has-lightest-grey-color {
  color: #f5f5f5;
}

.has-lighter-grey-background-color {
  background-color: #d1d1d1;
}

.has-lighter-grey-color {
  color: #d1d1d1;
}

.has-light-grey-background-color {
  background-color: #575757;
}

.has-light-grey-color {
  color: #575757;
}

.has-red-background-color {
  background-color: #a3041f;
}

.has-red-color {
  color: #a3041f;
}

.has-blue-background-color {
  background-color: #00538a;
}

.has-blue-color {
  color: #00538a;
}

.has-black-background-color {
  background-color: #000000;
}

.has-black-color {
  color: #000000;
}

Please note that the classes for the different colours match the names entered in the function you just added. You will of course be using your own colour names as well as hex codes.

All that remains now is to show you how to remove the colour picker from the custom colour palette.

functions.php

Personally I have not yet found a reason where I wanted to remove the colour picker but you might have such a reason. All you need to do is add a line of code in the file functions.php or whatever file your theme uses for this type of thing.

/**
 * Block Editor.
 * Removes color picker from color palette.
 */
add_theme_support( 'disable-custom-colors' );

Now you also know how to add a custom colour palette to the Block Editor.

Thanks for visiting.

Arnold.

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.