Use Customizer Color Settings to Create a Gutenberg Color Palette

Most WordPress themes within the past few years have included helpful options in the WordPress customizer to help users quickly and easily modify how their theme behaves and looks. In fact, it is a requirement to list your theme on WordPress.org to only use the Customize API and not the Settings API.

With the new Gutenberg editor (soon to take over the role of just “the editor”) a new use-case for these custom colors has risen. Gutenberg offers the ability to define a custom color palette that can be used wherever blocks allow colors to be chosen. By default this includes paragraph text and background colors.

Color Palette

Without a custom color palette defined Gutenberg will simply offer the option to choose a color from a color wheel. While this is a great feature by itself, offering your users the ability to more easily match colors already used in their website is a big bonus.

Unfortunately setting up a palette will likely require some changes to existing code to allow for a palette to be build. Gutenberg associates a name with each color (when choosing from the defined palette) that it applies to blocks instead of using inline styles.

For example assigning a background color outputs:

<div class="... has-red-background-color">

instead of:

<div class="..." style="background-color: #ff0000">

This may seem a bit counterintuitive at first but it provides a great advantage when it comes to integrating with dynamic customizer colors. Because the class name will not change (but the underlying hexadecimal code can) changes made to the theme’s colors settings will properly be reflected through all previously published posts.

Creating a Palette

The first thing that needs to be done is to assign a name to each color control you have defined. Most likely customizer controls are already defined via a configuration array (or you should be!) so it’s just a matter of adding a plain-text descriptor:

Then simply tweak your $wp_customize->add_control() calls if necessary. 

Define Theme Support

Next theme support needs to be added so Gutenberg is aware that custom colors have been defined.

Some of the helper functions in that snippet have not been defined but can viewed here.

The ... is used to expand each item in the array since currently theme support is added via many arguments vs. a single array.

Simply loop through the color configuration array and generate a new array of associated names and colors. This is done instead of directly passing the configuration array so the current value of the color set in the customizer is used.

Create Color Classes

Now that a custom color can be chosen inside the editor it needs to be reflected in the CSS. 

The creation and implementation of these classes will vary based on the current setup and options presented to your users. BigBox allows the generated inline CSS to be disabled. Because of this the default color palette classes are added to the base stylesheet just in case — but this might not be necessary for all themes.

For the frontend it’s just a matter of looping through the color configuration array and building inline CSS for each control. For the editor you need to hook in to enqueue_block_editor_assets and output the dynamic styles inline inside the editor.

The important thing to remember is the class has-primary-background-color or has-primary-color will always remain the same but the underlying color code assigned will reflect the user’s customizer setting.

Conclusion

There are a decent amount of considerations but once implemented the dynamic color palette options that are produced create a very wide range of possibilities while remaining flexible.

  1. Add theme support using a list of defined color names and default color codes.
  2. Dynamically create has-{$name}-background-color and has-{$name}-color classes based on the current customizer options.
  3. Output those inline CSS definitions on the frontend of the theme.
  4. Output those inline CSS definitions inside the editor.
  5. Optionally output those inline CSS definitions in your base stylesheets (both frontend and editor).

Let BigBox Do It!

BigBox’s color flexibility allows instantaneous changes to match your brand. Every color output is customizable and can be used to create extremely unique websites.

Powering BigBox

Techniques like this and many more power the highly flexible and highly optimized BigBox WooCommerce theme.

Get BigBox Today →

Leave a Reply