How to Add Customizer Colors to Gutenberg Block Color Palettes

How to Add Customizer Colors to Gutenberg Block Color Palettes

Gutenberg, the upcoming block editor for WordPress, has a built-in color palette that lets users stylize content rather easily. While WordPress themes can override them and provide “themed” color palettes, I thought it would be interesting to load a custom color value from the WordPress Customizer within Gutenberg color palettes.

For example, folks would be able to select an accent color from the Customizer, then have that color available to use throughout the block editor, wherever ColorPalette components exist. Overall, this would make for a much more wholesome experience for folks who do not know how to programmatically customize the color palettes themselves.


1. Add a Customizer setting and control

First, we need to add a setting and control for a new accent color option within the WordPress Customizer. Below you’ll find an example of adding a simple accent_color option to a WordPress theme’s “Colors” panel within the Customizer.

If you need a refresher on the Customizer API, check out this section of the WordPress Theme Handbook. Using the setting and control from the gist above, we should see a new Gutenberg Accent color option available within the Colors panel of the Customizer window, as pictured below:

The accent color added to the Customizer panel

2. Add the new accent color option within the Gutenberg color palette

To add support for Gutenberg color palettes, a WordPress theme needs to add a call to add_theme_support, referencing the editor-color-palette feature. If you need a refresher, I wrote a primer on how to add support for Gutenberg color palettes to WordPress themes.

All we’re doing here is adding the name of the color, then setting the color value to the accent_color Customizer option that we created previously in step one.

Once added, you should see the accent color as a selectable option within the color palettes in Gutenberg, as pictured below:

The accent color added to the block editor’s color palette

3. Create a function to build the color classes

Now that themes are responsible for providing appropriate color classes in multiple contexts, we need to add a function that will build the appropriate color classes that we may use within the editor, as well as on the front end.

I wrote a post covering Gutenberg color classes, if you need a hand. 

While there are a number of ways to achieve this, I’ve found that creating one function to build the classes is the easiest way to deploy the color classes wherever needed.

All we’re doing here is grabbing the Customizer value from the accent_color setting, then building our color classes using the name of the color, as previously defined in add_theme_support ( 'editor-color-palette' ).


4. Enqueue the color classes into Gutenberg

Next, we’ll enqueue the custom color classes within Gutenberg using enqueue_block_editor_assets. As I already have a Gutenberg stylesheet to add styling to the block editor, I’ve simply appended the color classes function using wp_add_inline_style.

Let’s look at an example of enqueuing the inline custom colors:

If we dive back into the Gutenberg editor, your color classes should be added. Now, if you add a paragraph block and set the background color to the new accent color, the background color of the paragraph block should change to reflect the accent color.

Read my post on adding WordPress theme styles to Gutenberg if you’d like more insight on styling Gutenberg to match your WordPress theme.


5. Enqueue the color classes on the front end

Our color classes should be working fine within Gutenberg now, but we still need to enqueue those same accent color classes on the front end. 

We’ll use a similar method as in step four, but this time, we’ll append the wp_add_inline_style to our primary theme stylesheet:

The custom accent color and appropriate Gutenberg color classes should be loading properly on the front end now.

Live previewing of a Customizer color palette option within Gutenberg

Closing 

That’s it! If a user sets an accent color within the Customizer, the color will be available within Gutenberg’s color palettes.

And better yet, if the user later changes the accent color value, all instances of the accent color throughout the WordPress theme and within any Gutenberg blocks will adapt to use the new color.

I’m all about making things easy for folks! 💥

  1. Having the ability to sort through colors quickly makes it a lot easier to design and develop a website! I have been working on my new blog for a while now, and I have been tinkering back and forth with color choices for all of my content. When I really start getting into the text animation aspect of my site, I’ll be using the Gutenberg color palettes, so making decisions will be much simpler! Your code is fantastic!

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Up Next:

The Ultimate Guide to Gutenberg Color Palettes and Color Classes

The Ultimate Guide to Gutenberg Color Palettes and Color Classes