Tutorial: Register the Gutenberg color palette in the theme

With the upcoming Gutenberg editor, colors for paragraphs of text and certain content blocks can be specified for the first time. In this tutorial, I'll show you how to register your own Gutenberg color palette and define colors that match the theme.

Color settings in the new Gutenberg editor

The new Gutenberg blocks for paragraphs and buttons offer the option of freely choosing the text and background color. Custom blocks will also often use the Gutenberg components provided to implement similar color options.

Gutenberg color palette

By default, the Gutenberg editor presents a color palette with eleven defined colors and the option to select your own colors with a color picker. Theme developers can overwrite this predefined color palette and define an individual color palette that harmonizes with the colors of the theme. I'll show you how to do this now.

Define your own color palette for Gutenberg

Individual colors for the new Gutenberg editor can be registered with add_theme_support( 'editor-color-palette' ) . In addition to the feature 'editor-color-palette', an array with all colors is transferred to the add_theme_support () function. Each individual color consists of an associative array in which the name , slug and color value are specified.

The call can be added to the theme's setup function or it can be moved to a separate function for the after_setup_theme hook. Most WordPress developers should already be familiar with add_theme_support () , despite Gutenberg, little new happens here.

 /** * Registers support for Gutenberg features. */ function theme_slug_gutenberg_support() { // Add theme support for custom color palette. add_theme_support( 'editor-color-palette', array( array( 'name' => esc_html__( 'Primary', 'theme-slug' ), 'slug' => 'primary', 'color' => '#006699', ), array( 'name' => esc_html__( 'Accent', 'theme-slug' ), 'slug' => 'accent', 'color' => '#f4e08a', ), array( 'name' => esc_html__( 'Light Gray', 'theme-slug' ), 'slug' => 'light-gray', 'color' => '#e5e5e5', ), array( 'name' => esc_html__( 'Dark Gray', 'theme-slug' ), 'slug' => 'dark-gray', 'color' => '#5a5a5a', ), ) ); // Disable theme support for custom colors. add_theme_support( 'disable-custom-colors' ); } add_action( 'after_setup_theme', 'theme_slug_gutenberg_support' );

This code example creates a palette with four colors. The name is displayed as a tooltip in the editor and is therefore localized (translatable), the slug is used to generate CSS classes. With add_theme_support( 'disable-custom-colors' ) the color picker can be deactivated so that only defined colors can be used.

Colors registered in the theme are not added, but replace the standard Gutenberg color palette. As a result, we now see our new palette with four colors.

Individual Gutenberg color palette

It is advisable to pass semantically correct names and slugs for registered colors. Blue, red, and yellow make more sense than color one, color two, and color three. If users can change the colors in the theme options in the customizer, primary and accent colors are a good alternative because the exact color value is unknown.

Add CSS classes for Gutenberg color palette

User-defined colors via color pickers are always added as inline styles in the blocks. For our defined colors in the color palette, however, CSS classes are generated which follow the pattern has- $slug -color and has- $slug -background-color .

For this reason, it is not enough to just register the color palette in the backend. As a second step, we also have to add the colors with the corresponding CSS classes in the theme. For our color palette we can insert the following CSS code in the style.css of the theme .

 /* Gutenberg Text Colors */ .has-primary-color { color: #006699; } .has-accent-color { color: #f4e08a; } .has-light-gray-color { color: #e5e5e5; } .has-dark-gray-color { color: #5a5a5a; } /* Gutenberg Background Colors */ .has-primary-background-color { background-color: #006699; } .has-accent-background-color { background-color: #f4e08a; } .has-light-gray-background-color { background-color: #e5e5e5; } .has-dark-gray-background-color { background-color: #5a5a5a; }

Any color can be used in the block as a text or background color. We therefore define a CSS instruction for color and one for background-color for each background-color .

So that your own color palette is also displayed properly in the Gutenberg editor, the CSS code for the colors should also be added there. This is possible with the hook enqueue_block_editor_assets , with which stylesheets and scripts can be integrated in the new WordPress editor.

 /** * Enqueue styles for Gutenberg. */ function theme_slug_block_editor_assets() { wp_enqueue_style( 'theme-slug-editor-styles', get_theme_file_uri( '/assets/css/editor.css' ) ); } add_action( 'enqueue_block_editor_assets', 'theme_slug_block_editor_assets' );

and that's it. With the selection of a color in the editor, the CSS class should now be added with the corresponding slug in the block and displayed correctly styled by the theme.

Deactivate the Gutenberg color palette completely

If you want to completely deactivate the color options in Gutenberg for customers and editors, you can simply register an empty color palette without colors. The color picker must also be deactivated.

The source for this practical tip is the article Disable Gutenberg Colors by Rich Tabor.

 function theme_slug_disable_colors() { // Disable color palette. add_theme_support( 'editor-color-palette' ); // Disable color picker. add_theme_support( 'disable-custom-colors' ); } add_action( 'after_setup_theme', 'theme_slug_disable_colors' );

The color settings are completely hidden in the editor.