How to Change the Color of Any Text in the WordPress Block Editor (Gutenberg)

How to Change the Color of Any Text in the WordPress Block Editor (Gutenberg)

3 Shares

While refreshing the look of our own site, we needed a way to change the text color of some words using the new WordPress block editor (Gutenberg). We’ll show you a few ways how to do this, along with a few more stylish ways.

For some of the native blocks like Paragraph and Heading blocks, you can change the text color of the entire block by using the color picker in the inspector. For changing individual words or sentences, there is a text color button tucked away in the block toolbar. For highlighted text, you will need plugins to help you out.

The Old Way of Changing The Text Color

Back when we only had the Classic Editor (WordPress 4.9 and below), there was a button that was readily available in the text editor that you can use to change the colors of individual text in your content.

You just highlight your text or phrase, and then simply click on the text color Button to change the color. It was that easy.

The Text Color button found in the Classic Editor / TinyMCE

How to Change Text Colors in the Block Editor (Gutenberg)

The new WordPress block editor, gives your two ways to change text colors:

  1. Change the text color of entire blocks, and
  2. Change the text color of groups of words.

Change the text color of entire blocks

For example, in the paragraph block you can access the inspector and use the color picker to change the color of the text as well as the background color of the block. The colors would apply to the whole block.

The bad news here is that these text color pickers are only available in selected blocks. For the native Common, Formatting and Layout Blocks, you can only change the color of these blocks:

  • Paragraph block
  • Heading block
  • Pullquote block
  • Button block

For most of the other blocks, these text color pickers aren’t present.

Change the text color of groups of words

I find it a bit odd though that there’s no way to change the color of at the very least, the list block. As of WordPress 5.4, there is now a way to change colors of individual words.

To do this, you’ll have to first highlight the text you want to change the color of. Then on the toolbar, click on the down arrow icon that stands for “More rich text controls”, then click on the Text Color entry.

Still using badly designed Gutenberg blocks? Get the most powerful page building blocks with Stackable! Download our free WordPress block plugin.

Changing Colors of Selected Words with the Help of Plugins

While changing text colors is great, that’s the most you can do with the native controls in terms of emphasizing text.

If you wanted to highlight text, you’ll need the help of plugins.

Stackable

Stackable Blocks image from WordPress Plugin Directory

Stackable (yes, this website) has a Highlight Text Toolbar button that you can use to add highlights to any text in any block.

Here it is in action:

The great thing about our Highlight Text button is that it lets you pick from the color palette provided by your theme, and you can also use any custom color that you want.

Also, there’s an added option to highlight the background of the text, instead of the text color.

Stackable can be downloaded from the WordPress Plugin Directory:

Advanced Rich Text Tools

Advanced Rich Text Tools image from WordPress Plugin Directory

Another alternative we’ve found that works well is Advanced Rich Text Tools.

The Advanced Rich Text Tools plugin adds Inline Text Color, Inline Background Color, Superscript and Subscript formatting buttons. They also provide a button to remove all formatting for the entire block.

Unlike Stackable, where the color buttons are located in the toolbar, Advanced Rich Text Tools adds color pickers to the inspector of every block. You’ll have to highlight some words, then pick a color from the inspector to change colors.

Advanced Rich Text Tools also works well alongside Stackable. 👏

You can download Advanced Rich Text Tools from the WordPress Plugin Directory:

EditorsKit

EditorsKit image from WordPress Plugin Directory

Lastly, there’s also EditorsKit.

EditorsKit adds more formatting options to your native blocks. While this plugin doesn’t add its own blocks, it enriches the native ones.

For example, in the native List block, EditorsKit adds a new options in the inspector such as bullet styles, text sizing options and text color options:

Other native blocks get more options as well, and the plugin even adds a responsive show/hide options for all of your blocks.

EditorsKit also works well alongside Stackable which is a huge bonus. 👏

You can download EditorsKit from the WordPress Plugin Directory:

Which Plugin to Pick?

Which should you go with? Stackable, Advanced Rich Text Tools or EditorsKit? It depends on what you need.

Stackable contains a host of different blocks that will be useful for building a variety of types of sites, and the text color formatting toolbar button is just one of its great features. If you need blocks as well, go for Stackable.

Advanced Rich Text Tools only adds a few formatting tools. So if you need something very light to give you this color changing functionality, and if you don’t mind some the additional 2-3 new inspector panels, then go for this plugin.

EditorsKit on the other hand gives you a lot of formatting buttons, and also adds more styles for some of the native blocks. So if you’re looking for lots of formatting tools, then go for this plugin.

5 thoughts on “How to Change the Color of Any Text in the WordPress Block Editor (Gutenberg)

  1. Thanks Benjamin for providing information in great details. I was struck up with changing particular text colours in WordPress block Editor. But now I have got all the information I was wondering for.
    Thanks again.
    Keep sharing, keep rocking.

  2. Hello Benjamin,

    Thanks for this useful post about changing the color of the text. It was easy to change the color with the classic editor.

    When Gutenberg was released, things changed and it took a lot of time for me to experience with this new editor.

    I have shared this post with my friends who find it useful.

    Thank you
    ~Lindsay

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.