Change the color palette of the Gutenberg Blocks editor in WordPress

Share

1. Using a plugin

This is a convinient method that enables you to update the default color palette within the WordPress admin. We have found that a light weight plugin that does the job well is ‘Block Editor Colors’. Simply download it from within the plugin page and you will be able to update the colors under ‘Settings -> Editor Colors‘.

---

2. Add with code

Updating the color palette using code in your theme (or plugin) is a two step process.

1. Add your custom color classes to functions.php.
2. Add your colors to these classes in your stylesheet.

1. Add your colors in functions.php

<?php
/**
 * Add custom color palette in Block editor.
 */
function wpblockz_gutenberg_color_palette() {
	add_theme_support(
		'editor-color-palette', array(
			array(
				'name'  => esc_html__( 'Green', '@@textdomain' ),
				'slug' => 'green',
				'color' => '#b1ead4',
			),
			array(
				'name'  => esc_html__( 'Yellow', '@@textdomain' ),
				'slug' => 'yellow',
				'color' => '#fee95c',
			)
		)
	);
}
add_action( 'after_setup_theme', 'wpblockz_gutenberg_color_palette' );

---

2. Add colors to classes in your themes stylesheet

In your stylesheet (css/scss) you need to add matching classes to your custom colors. If you pick a background-color to a block, it will add a class called ‘has-{your-custom-color}-background-color’. You will have to add this class to your stylesheet and and the color to it, like below:

.has-green-background-color {
     background-color: #b1ead4;
 }
.has-green-color {
     color: #b1ead4;
}
.has-yellow-background-color {
     background-color: #fee95c;
}
.has-yellow-color {
     color: #fee95c;
}

Once this is setup you will not have to think about picking the correct color again! Adding it with code will minimize your plugin count & keep these settings in your code instead of in your database. If your are a web developer, this is the way to go.

---

---