How to Disable Custom Colors in Gutenberg

When editing a content with Gutenberg — be it a post or page — you can set the color of elements like text and button. You can find the color setting on the Block tab on the settings panel of Gutenberg. There are several predefined/default colors you can find here. These colors are defined by the theme developer so you will find different default colors on each WordPress theme. If none of these default colors suit you, you can use a different color by selecting a custom color.

While custom color is great when it comes to color selection (as you can pick any color you like), you might doesn’t need it for a multi-user site. Instead, you might want all users on your website to use the colors you have defined for the sake of maintaining your brand identity. If this is the case, you can disable custom color so that users on your website can’t pick a color other than the default colors.

How to Disable Custom Colors in Gutenberg

Custom color is a WordPress feature that is enabled by default in most WordPress themes. If you don’t need it this feature, you can disable it by editing the functions.php file of your theme. First, login to your WordPress dashboard and go to Appearance -> Theme File Editor. Make sure the active theme is selected, then select the functions.php file on the right panel to edit it.

Add the following snippet to the functions.php file content


You can place the snippet above right after the last line of the functions.php content. Here is the example of the placement.

Make sure to click the Update File button after adding the snippet above.

If everything goes well, you should not see the custom color picker anymore on Gutenberg.

The Bottom Line

In Gutenberg, you have options to set the color or text, button, block background, and several other elements. The default color options are varied on each theme as the default colors are defined by theme developer. Instead of giving your users a freedom to choose their own colors via custom color picker, you can force them to use the predefined colors to maintain your brand identity. You can disable the custom color picker by editing the functions.php file of your theme as we have covered above.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Aliko Sunawang

Aliko Sunawang

Aliko is a WordPress expert and lead blogger at WPPagebuilders. He has been blogging with WordPress since 2012. He is responsible of all content published on this website.
Want to save yearly expense up to $219? why not?

Leave a Comment