Adding Colored Text to Select Words or Lists on WordPress Block Editor

23 Nov

One of my greatest frustrations with WordPress’ is the fact that adding colored text to bullet pointed lists has disappeared as an option in the toolbar. It also no longer allows you to add color to only select text in a paragraph.

  • Harbin, China holds one of the largest Ice Festivals annually.
  • Shanghai, China is home to Yuyuan Gardens
  • Tianjin, China offers some of the best Hot Baozi

You’ll notice if you used the Block Editor to type the above list that you can make only the simplest textual changes (Bold, Italics).

Even on the ‘Block’ editor toolbar, advanced settings only permit CSS changes which is perhaps a little too advanced for many WordPress.com users who chose this platform for it’s simple interface.

Furthermore, if you try to add color to select text using the Block Toolbar, it colors the entire block. 😡

To ease my own annoyance (this has been a continuing issue for way too long), I wanted to share how to add colored text to select words or in a bullet point list.

A) Bullet Point Lists

Summary: Add the code <font color=”######”> TEXT YOU WANT TO COLOR </Font> into the HTML Code.

  1. Choose ‘More Options’ with the three dots.

2. Choose ‘Edit as HTML’

3. Add the following code before the words you want to color: <font color=”red”> . . . . You can put in different colors (blue, orange, green) or use the color code specifically (I used #cc3366)

4. Add the following code after the words you want to color: </font>

5. When done – click the three dots and ‘Edit Visually’

  • Harbin, China holds one of the largest Ice Festivals annually.
  • Shanghai, China is home to Yuyuan Gardens
  • Tianjin, China offers some of the best Hot Baozi

Voila!

B) Select Text Within Block

Summary: Add the code <font color=”######”> TEXT YOU WANT TO COLOR </Font> into the HTML Code.

The Water Lily is a gorgeous flower that serves in Asia both aesthetic and functional purposes. In addition to admiring it’s breathtaking blooms along the waterways, the roots and seeds are served as delicious side dishes with meals.

  1. Again ‘Edit as HTML’

2. Add the code from before

3. Edit Visually and you’re done!

The Water Lily is a gorgeous flower that serves in Asia both aesthetic and functional purposes. In addition to admiring it’s breathtaking blooms along the waterways, the roots and seeds are served as delicious side dishes with meals.

Leave a comment

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