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)

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). This isn’t available in the block editor yet, but we’ll show you a few ways how to do this.

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, you will need plugins to help you out. Stackable for example adds a text color formatting button to the toolbar of all your blocks.

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)

In the new WordPress block editor, you can only 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, you are stuck with the colors that comes with the theme or block. Here are a few of the blocks that you cannot change the color of your text:

  • Table block
  • List block
  • Quote block
  • Verse block

I find it a bit odd though that there’s no way to change the color of at the very least, the list block. Hopefully this can be resolved in the future.

Changing Colors for Only Selected Text in the Block Editor

Unfortunately, you can’t change the colors of selected text yet.

There’s some progress being made by contributors #16014 which look very promising:

Proposed Text Color formatting toolbar button
Proposed Text Color formatting toolbar button https://github.com/WordPress/gutenberg/pull/16014

However, there’s no assurance if or when this will be accepted and merged into the Block Editor.

Hopefully they’ll add the color option in other blocks and future versions. But for now if you want to change the colors of selected text only, I’m afraid your only option is to install other plugins to help with this.

Changing Colors of Selected Words with the Help of Plugins

Stackable

Stackable Blocks image from WordPress Plugin Directory

Stackable (yes, this website) recently got an update that added a new Highlight Text Toolbar button that you can use to change the color of 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 even more formatting toolbar buttons to your blocks. It also provides more styles to some of the native blocks like Cover and Image blocks. It even adds a responsive show/hide options for all of your blocks.

EditorsKit also works well alongside Stackable. 👏

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.

Conclusion

It’s too bad that there’s currently no native way to change the text color of individual words or phrases in the block editor. While we wait for an updated to get this as a native feature of the New Editor, there are great options like the plugins we’ve suggested above in order to highlight any of your text.

Was this article helpful?

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.