How to Disable Custom Colors in the Gutenberg Block Editor

How to Disable Custom Colors in the Gutenberg Block Editor

Gutenberg, the soon-to-be block editor for WordPress, has a nifty color palette used throughout many blocks which allow users to set custom colors. While this sort of empowerment is quite useful, I can think of a few reasons why folks would want to limit the styling capabilities of Gutenberg.

For instance, if you give a client an array of paints to craft their shop’s front sign, would they stick only to colors relative to their brand? Or would they derive an assortment of “whatever looks good” to them?

Why would you hand a client more tools than they need in the first place?

Love my WordPress theme?

I'm using the Tabor WordPress theme. Add your email address below and I'll send you a $10 coupon for the theme. 🎉

You can look at the color palettes within Gutenberg with the same scrutiny. However, with defined guidelines and a structured approach to creativity and customization, clients will be equipped to create rich content.

So let’s take a look at disabling custom colors and color palettes within the WordPress Gutenberg editor.


Disabling the core WordPress Gutenberg custom color picker

By default, users are able to select a custom color from a color picker appended to the ColorPalette component within Gutenberg. Thankfully, disabling this particular functionality is rather easy.

Simply open up your theme’s functions.php file and a call to add_theme_support referencing the disable-custom-colors feature, then hook the function 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.

Here’s an example:

Adding this feature will ensure that users are only able to choose colors from either the default color picker within Gutenberg, or the editor-color-palette feature provided by the WordPress theme.

The custom color picker is now disabled. Woot!

I wrote a corresponding article, covering how to add support for Gutenberg color palettes and color classes in WordPress themes, if you’d like to replace the default color options with a pallet of your own choosing.

Additionally, I published a post on adding Customizer color values to the Gutenberg color palette — if you’re interested in that sort of functionality.


Disabling all colors

If you’d rather remove the Gutenberg color palettes entirely, that’s easy as well. Check out this function below, which would also be added to a theme’s functions.php file:

All we’re doing is disabling the custom color picker, then setting a theme color palette, which happens to be empty.

The trick here is that we’re not actually setting any values for the custom palette. This makes the ColorPalette component within Gutenberg disappear altogether, removing any custom color functionality within Gutenberg.

No more Gutenberg color palettes!

Closing

I’d say the agency/freelance and client relationship is where disabling color pickers in Gutenberg will be useful and likely common practice. However, disabling any type of WordPress functionality should not be taken lightly. 

I absolutely do not recommend disabling colors or even color pickers for any commercial WordPress themes or plugins. Instead, add a stylized color palette to your WordPress theme, leveraging the Gutenberg components to empower folks to create beautiful content. 

Leave a Reply

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

 

Up Next:

How to Add Customizer Colors to Gutenberg Block Color Palettes

How to Add Customizer Colors to Gutenberg Block Color Palettes