Find out how to remove the color picker from the WordPress block editor to gain more control over the design in a Genesis child theme.
Gutenberg offers by default a color palette where you can choose the tone for text blocks, headers, or buttons.
With this tutorial you can add a defined color palette to your theme and limit this color palette, which helps you to maintain an aesthetic coherence and makes it easier for your client to use.
However, as you can see in the screenshot, you can still choose any other color through the color picker.
Do you want to disable this option to further restrict the visual style of the website?
You only need one line of code.
Snippet to remove the color picker in WordPress block editor
Add this fragment in functions.php:
To see this and another 919 code snippets of this website, login or subscribe here.
When you insert this small block, the color picker will no longer be available from the editor.
So, if you combine this snippet with the tutorial code to customize the palette with 3 colors (orange, black and white), the result would be as follows:
This example is a bit extreme.
If you decide to remove the color picker, it’s best to leave your client with a palette of colors with more variety.
The above code is not specific to Genesis, so you can use it for any child theme, in addition to your child themes.
Conclusions
Having a defined color palette accessible from the WordPress block editor helps you maintain the visual consistency of the site and makes it easier for your client to use.
Now you know how to go a step further to ensure the proper use of colors by disabling the color picker.
This is a good option if you have a fairly extensive color palette. But apply it only in cases where it’s really worth it.
If you do, I advise you to document this step so that your client understands it and doesn’t get frustrated when trying to change the color of some elements.
Any questions? Let me know in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
