How to Insert HTML in WordPress Gutenberg Editor

Bloggers and Technology professionals often need to insert / add HTML code into their blog posts on WordPress. Since the Gutenberg editor has been introduced in WordPress, adding HTML has gotten a little tricky.

In the old editor, there used to be a simple option to switch to HTML view. That view allowed you to easily insert HTML code in your blog post. You could even write the whole blog post without using the visual editor.

In fact, when i started using the Gutenberg editor, i got very uncomfortable at first. It was actually frustrating that there was no option to switch back to the old editor. At one point I even installed the Classic editor plugin to bring back the old legendary WordPress editor.

Is it Possible to add HTML in Gutenberg Editor?

Yes, absolutely!

In fact, it is much easier to add HTML to the new editor than you might think. The option is not too obviously visible, however. You will need to do the procedure a couple of times to actually get used to it. But it is very much possible and you can use it like you used to do it in the classic editor.

Steps:

I am going to show you exactly how to do it step-by-step:

  1. Assuming you are in the ‘Add New Post’ window, click on the Add Block icon to add a new block.
    Add block
  2. After clicking the ‘Add block’ button, a Menu will appear right below it with different types of elements blocks listed. Scroll down a bit with the scroll bar on the right side and click on the Formatting option.
    Formatting Option in Gutenberg
  3. After clicking on the ‘Formatting’ option, a sub-menu will appear with different choices. You have to select the Custom HTML one.
    Custom HTML option Gutenberg
  4. When you click on the ‘Custom HTML’ option, a new window will appear where you can insert your HTML code.Add HTML in Gutenberg
  5. It’s not quite done yet. There is one last thing that you need to do to ensure that all your HTML codes translates perfectly into Gutenberg blocks. To do that you need to click on the ‘More Options’ menu and click on Convert to Blocks and then finally click on the Preview button.
    Convert to Blocks
  6. And it’s done! That simple. Now you should be able to see the result of the HTML code that you inserted. It should look like this:
    Converted HTML

Yes, I admit it’s not as easy as it used to be but it’s very much doable. There’s no reason to switch to the classic editor for this purpose at least. Who knows you might actually start to like the new editor like I do. Gutenberg has its own perks once you know how to leverage all of its features.

Spread the Word

You May Also Like

About the Author: Umair

Umair specializes in System Administration (Windows, Linux), Network Security, Cyber Security and other Technology areas including Web Development Frameworks (ReactJS, NodeJS, MongoDB). He is passionate about helping people with all sorts of technical problems.

2 Comments

  1. Thank you! I’ve been going in circles trying to figure this out because I’m new to WordPress. What an easy fix 🙂

Leave a Reply

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