Short of cool Gutenberg blocks? Don’t lose your chance to download Getwid – Gutenberg Blocks – a free collection of 40+ all-around WordPress blocks and ready-made design patterns.
How to Change Colors in WordPress with the Block Editor Colors Plugin?
Getting Started
- Upload or clone the plugin to the /wp-content/plugins/ directory.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Navigate to Settings > Editor Colors.
Custom Block Editor Colors: Change WordPress Colors in Gutenberg
In the Block Editor Colors plugin settings, change the color scheme of your theme by adding colors in the “Custom Colors” section. For this, Name, Slug, and Color must be added.
- The name is displayed on hover in the color theme palette of all blocks.
- Slug is used for generating CSS classes.
- Color is a Hex color code.
Note: Slug can’t be updated later!
You can also disable custom colors. Here is a short guide:
- Disabled colors won’t be displayed in the color palette editor.
- CSS classes are not generated for disabled colors.
- Disabled colors can be either deleted or restored (find them at the bottom of the plugin settings).
- Disabled colors can’t be edited.
Default Colors: Update Default Colors in the Color Theme Picker
If you just need to alter the colors of your active WordPress theme, go to the “Custom Colors” menu to define a color palette. If the theme doesn’t provide any default colors, change the WordPress colors of the block editor (applies to WordPress background colors and any block). They can only be edited, not deleted. Here colors may change when you switch a theme.
CSS class prefix is responsible for selectors that will be used for generating CSS classes. Classes for colors will be descendant for a selector/selectors in the configuration.
Read the quick and detailed guide on how to easily change the Block Color Palette in Gutenberg
Hi,
is there an option to include the css variables in the admin area? This comes handy when colors from the BEC are used to style Gutenberg elements (e.g. button colors). This works in frontend but in admin the variables are not added to the html of the site. If there’s a built in solution for that I’d much appreciate if you could tell me how I can achieve that. If not, will you consider addint that in the next update?
Thank you,
Grega
Hi, there is no such an option yes. I’ve added your request to our list of features. We will update the comment if we have any news.
I posted comments yesterday about issues with the plug-in. I have just found another issue: I have created a couple of custom colors. I can use these correctly to color text blocks. However, if I try to use a custom color to highlight text within a block it just changes to black.
My previous comment didn’t show the formatting text I embedded so here is a modifed version:
I’m using Block Editor Colors V1.2.2 with WordPress 5.9.2 and the Twenty Twenty One theme V1.5. I am able to change the color palette to more vibrant colors. and it all works on the website. However, when I edit a page the visual editor still displays most of the blocks in the original colors.
If I look at a text block in HTML I can see it starts, for example, with (open angel bracket)p class=”has-blue-color has-text-color”(close angle bracket) . If I click the color tab on the right of the editor and set Text to blue the HTML doesn’t change but the visual editor changes to the modifed shade of blue. I don’t know if that’s an issue with Block Editor Colors or the theme or WordPress.
If I highlight some text within a block it appears in the visual editor in the original color. The HTML shows, for example (open angel bracket)mark style=”background-color:rgba(0, 0, 0, 0)” class=”has-inline-color has-red-color”(close angle bracket). I can’t find any way to change it to the modified color.
We are delighted to let you know that we have just released an update for Block Editor Colors v. 1.2.3 with custom colors not being applied in the block editor issue fixed and CSS variables for colors set or edited via the plugin added to the plugin. Feel free to update the plugin to the latest version to get these improvements
I’m using Block Editor Colors V1.2.2 with WordPress 5.9.2 and the Twenty Twenty One theme V1.5. I am able to change the color palette to more vibrant colors. and it all works on the website. However, when I edit a page the visual editor still displays most of the blocks in the original colors.
If I look at a text block in HTML I can see it starts, for example, with . If I click the color tab on the right of the editor and set Text to blue the HTML doesn’t change but the visual editor changes to the modifed shade of blue. I don’t know if that’s an issue with Block Editor Colors or the theme or WordPress.
If I highlight some text within a block it appears in the visual editor in the original color. The HTML shows, for example. . I can’t find any way to change it to the modified color.
I agree with Barbara.
On my wordpress version 5.9.2 this nice plugin doesn’t work.
Any idea when the update fix will be distributed?
Hello!
A new version of the plugin is available. You should be able to update the plugin via the main Updates page in the WordPress Dashboard.
With wordpress 5.9 not work.
Hi Barbara, Thanks for your feedback. We will do our best to fix this within one of the next updates.