One of the cool things I picked up while working on my Gutenberg Development Course was how to set a default color palette for all blocks inside your theme.
Interestingly, as far as I can tell, defining custom color schemes is something only a theme should do and this cannot be set from within a custom block.
Block Color Palettes in Gutenberg
One of the features that blocks can have in WordPress is the ability change a color. For example, the core paragraph block has the ability to change the background and text color in the block inspector panel.
One of the cool things you can do as a theme developer, is set your own custom color palette for your theme. This can help users choose colors that match the design of the theme.
Setting Custom Color Palettes in Gutenberg
To set a custom color palette (or color scheme) you would simply add add_theme_support( ‘editor-color-palette’ ) to your functions.php file and then continue to pass in the hexadecimal values for colors you want.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function mytheme_setup_theme_supported_features() { | |
| add_theme_support( 'editor-color-palette', | |
| '#556270', | |
| '#4ECDC4', | |
| '#C7F464', | |
| '#FF6B6B', | |
| '#C44D58', | |
| ); | |
| } | |
| add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' ); |
You can add as many colors as you like (I think), but I would suggest limiting the selection to colors that work well with your theme.
You will then want to hook that add_theme_support() into ‘after_setup_theme’.
What This Looks Like in Action
Using the color combinations set above, the default color options for blocks would now look like this.
I think that if you have a theme with a specific color palette that you should definitely take the extra few minutes to set a default color scheme for the blocks.
Learn More About Developing with Gutenberg
To learn more about building custom blocks or customizing Gutenberg with your theme, please check out my course on Gutenberg Development Course.
WordPress Educator Zac Gordon 
Hello !
Since the fresh 2.8 release things have changed a little,
The second param is now an array with the name of the color as key, like this :
add_theme_support( ‘editor-color-palette’,
array(
‘blue’ => ‘#48ADD8’,
)
);
LikeLike
Oops I was wrong, it’s more something like this :
add_theme_support( 'editor-color-palette',
array( 'name' => 'blue', 'color' => '#48ADD8' ),
array( 'name' => 'pink', 'color' => '#FF2952' )
);
LikeLiked by 1 person
Also useful : add_theme_support( ‘disable-custom-colors’ ); to remove the custom color choice
LikeLike