In the Gutenberg block’s toolbar, you have Bold and Italic buttons, but not an Underline button.


I don’t know why, but the Underline button keeps getting underrated.

In WordPress 4.7, it was removed from the classic editor as well.


Fortunately, it hasn’t been completely forgotten… yet.

There’s still an easy, but not so obvious way for you to underline text in Gutenberg.

All you have to do is to select the text and click CTRL + U (on Windows) or CMD + U (on macOS) on your keyboard.

underline text in gutenberg

I think this works on the classic editor as well.

That’s it!

UPDATE for Firefox and Internet Explorer users

It seems that this doesn’t currently work in Firefox and Internet Explorer, as Karin pointed out in the comments. I checked myself. It sends you to the page’s source code.


A workaround for this is to click on the block’s 3 vertical dots, select Edit as HTML, then add this inline CSS code by wrapping the text in <span></span> tags:

<span style="text-decoration: underline;">The underlined text goes here</span>

underline text in gutenberg inline css

Then, you can click on the 3 dots and select Edit visually to get out of the HTML editor.

End of update

To find out more keyboard shortcuts for the Gutenberg editor, you just have to click the 3 vertical dots in the top-right corner, then select Keyboard Shortcuts.

Or, you can press Shift + Alt + H on your keyboard.

gutenberg keyboard shortcuts

You’ll find a lot of them there.

That’s a wrap

I hope this guide helped you out!

Don’t forget to share the post to help out others!

You can quickly subscribe to my newsletter by using this link.

If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.

You can also hit the follow button on Twitter and subscribe to the YouTube channel.

My WordPress installation service is at your disposal!

On-going WordPress support and maintenance services are on the menu as well!