The Ultimate Guide to Gutenberg Color Palettes and Color Classes

The Ultimate Guide to Gutenberg Color Palettes and Color Classes

While there is no shortage of articles published about adding general support for a theme’s color palette within the Gutenberg editor, I’m going to focus on the color class changes deployed in Gutenberg 2.8.

Gutenberg includes a default color palette component for blocks to utilize, although it’s relatively easy for a WordPress theme to provide a more suitable palette to empower users. So here’s how.

Add support for Gutenberg Color Palettes

To add support for Gutenberg color palettes, the first step is to add a call to add_theme_support in a WordPress theme’s functions.php file, referencing the editor-color-palette feature. Next, hook it in via after_theme_setup.

If you’re familiar with WordPress theme development, this is no different than any other opt-in feature that WordPress themes may support. Below you’ll find an example of how WordPress themes may add support for custom Gutenberg color palettes, and how I’ve deployed them within Tabor:

The two colors, black and gray, will be shown in the order they are added, as pictured in the screenshot below.

Adding a custom Gutenberg color palette, as seen in Tabor.

It’s also important to note that while there is no limit to how many colors can be defined, don’t go overboard. The point is to make a clear and cohesive color palette that will empower users, not confuse them.

If you’ve already updated your WordPress theme with a custom Gutenberg color palette, you’ve probably noticed a few slight differences in the example above from what you’ve deployed.

Here’s how WordPress theme developers previously added custom color palettes, prior to Gutenberg 2.8 — and consequently, what needs updating:

Gutenberg 2.8 introduces support for color classes, which allow colors to be assigned via classes, instead of inline styling. The new functionality makes total sense, albeit making custom palettes slightly more difficult to implement.

So let’s add support for our new color classes.

Add support for Gutenberg Color Classes

Adding the actual color palette is only the first step for WordPress themes to fully support custom color palettes.

Now that themes are responsible for establishing the styling associated with custom colors, developers are required to add all contextual style classes for each custom color added via the add_theme_support( 'editor-color-palette' ) function.

Referring back to the tabor_gutenberg_color_palette() example function above, I’ve added support for our two custom colors, black and gray. We’ll need to add appropriate color classes for those colors within the WordPress theme’s primary stylesheet and the theme’s Gutenberg stylesheet.

For reference, core blocks use color and background-color contexts, so we’ll do the same. The color class is defined with has appended to the color, followed by the color name using kebab case and ending with the context:

Again, these color classes should be added to your theme’s primary stylesheet, as well as within Gutenberg, so that color selections are established on the front end and previewed in real-time within the editor.

I recently published a primer, covering how to add WordPress theme styles to Gutenberg, if you need a refresher.

Now that we’ve added the custom colors to Gutenberg via add_theme_support( 'editor-color-palette' ), created color classes with appropriate contexts to reference our colors, and loaded those classes into Gutenberg, your theme’s custom color palettes should be good to go. 🎉

The .has-gray-background-color class applied to the paragraph block.

When a user selects the gray color for a text color option from Gutenberg’s color palette, the .has-gray-color class is added to the corresponding element, therefore setting the color attribute to #7a7a7a. And when the user views the page on the front end, the .has-gray-color color class is assigned to that element as well, instead of an inline style. 💥

Closing

I like where Gutenberg is headed, and I appreciate the forward-thinking approach of using utility classes instead of forcing inline styling everywhere. Sure, it’s a bit more comprehensive for WordPress theme developers and Gutenberg block developers, though at the end of the day, color classes are much more sustainable — and cleaner.

I have a few more posts lined up to cover different aspects of the Gutenberg ColorPalette component. Subscribe below so you don’t miss out!

  1. This is great thank you. What about setting color palettes inside blocks? How could this be set up inside of a block? I’m having trouble finding this solution.

      1. Thank you for your help, but I meant setting preset colors inside of the block. Like so:

        How could I make this work? I would like different preset colors for different components declared inside the block.
        Thank you so much for your help.

        1. Are you saying that you’d like separate default colors for different blocks? You can set them defaults via the actual component, though not specifically for multiple core blocks – at least not that I know of. That’s not something I’ve played around with, though it’s an interesting idea.

          1. Sorry, it seems the code I wanted to include in my previous comment didn’t output. I’ll try again here and I’m also including a link to the idea. This used to work before but doesn’t seem to work with the latest Gutenberg version.

  2. The first example breaks in later versions of Gutenberg (~3.4.0) – in order to fix it you need to wrap the custom color arrays into a main array like so:

    add_theme_support(
    ‘editor-color-palette’, array(
    array(
    ‘name’ => esc_html__( ‘Black’, ‘@@textdomain’ ),
    ‘slug’ => ‘black’,
    ‘color’ => ‘#2a2a2a’,
    ),
    array(
    ‘name’ => esc_html__( ‘Gray’, ‘@@textdomain’ ),
    ‘slug’ => ‘gray’,
    ‘color’ => ‘#727477’,
    ),
    )
    );

Leave a Reply

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

 

Up Next:

Explore the future of WordPress themes with Gutenberg and Tabor

Explore the future of WordPress themes with Gutenberg and Tabor