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.
How to Change Text Colors in the Block Editor (Gutenberg)
The new WordPress block editor, gives your two ways to change text colors:
- Change the text color of entire blocks, and
- 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.
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
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:
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.