How to Change the Text Color in WordPress Block Editor

Aliko Sunawang

May 30, 2020

The default block editor of WordPress (Gutenberg) is great to create web content, including articles. However, some WordPress users prefer to keep using the classic editor with a classic reason as well: they have been comfortable with it.

If you have just decided to switch to Gutenberg, you might face a little issue to change the text color as the Gutenberg interface is completely different from the classic editor. Gutenberg is a block-based editor. Every element (paragraph, image, button, and so on) is placed in a different block. Each block has different setting options. Two blocks that you can use to add text are the Paragraph block and the Heading block. These two blocks come with an option to change the text color.

Adding a Heading block and change the text color

To add a Heading block, simply click the plus icon on the editor area and select Heading. You can set the heading level from the block settings panel or the editor toolbar.

To change the heading text color, you can open the Color settings block on the block settings panel. There are 12 ready-to-use color options you can choose from. To set a custom color, simply click the Custom color link to open the color selector.

In addition to changing the color via the block settings panel, you can also do so via the editor toolbar. This option is better-suited if you want to change the color of a specific word or letter. Select (block) the word or letter you want to change its color and click the downward arrow icon on the editor toolbar and select Text Color.

Adding a Paragraph block and change the text color

To add a Paragraph block, simply click the plus icon on the block editor and select Paragraph.

To change the color, open the Color settings block on the block settings panel and select the color you like. Click the Custom color link to open the color selector in case you want to select a different color other than the offered ones.

Same as Heading, you can also use the editor toolbar to change the text color of Paragraph. This option is great if you want to change the color of a specific word or letter in the paragraph. Simply select (block) the word or letter you want to change its color. Click the downward arrow icon on the editor toolbar and select Text Color.

Tags: How to

This page may contain affiliate links, which help support UtilizeWP.

0 Comments

Submit a Comment

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

Share This