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 Schemes in Gutenberg
To set a custom color scheme (or palette) you would simply add a ‘colors’ array to the ‘gutenberg’ add_theme_support function.
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.
NOTE: Gutenberg does have other add theme support settings, so you may have to add the colors settings in along with other settings. Here for example is colors along with full-width support.
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.