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?
- 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 a color scheme of your theme by adding colors in the “Custom Colors” section. For this, Name, Slug, and Color must be added.
- 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 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