Block Editor Colors

Tired of manually setting up colors for individual Gutenberg blocks in the color theme picker? This block color editor WordPress plugin allows you to globally (throughout the website) change the WordPress block editor colors that are registered with a theme. Feel free to update default colors or add custom ones. You’ll be able to work with your colors in the color theme palette of the block editor.

Install the plugin by searching "Block Editor Colors" in "Dashboard > Plugins > Add New" or download it for free from wordpress.org.
block editor colors

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

  1. Upload or clone the plugin to the /wp-content/plugins/ directory.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. 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.

  1. Name is displayed on hover in the color theme palette of all blocks.
  2. Slug is used for generating CSS classes.
  3. 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

Reviews

You must log in to submit a review.

Leave a Reply

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