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:
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:
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
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.
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.
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! 💥