Skip to content

How to Use the Custom HTML Block in Gutenberg

Adding HTML to Gutenberg can feel challenging if you’re new to the system. That’s why today’s Quick Guide is about adding a custom Gutenberg HTML block. Learn when—and how—to add HTML code to WordPress posts and pages.

How to Add Your HTML to Gutenberg Blocks

Core Concept: WordPress sites are all HTML

In order to figure out how to edit HTML in a WordPress page, you need to understand the core concept that WordPress sites are all HTML. This means that all blocks are coded in HTML (like almost everything on the internet), but that only some blocks are specifically what we’ll call “custom HTML” blocks: blocks that let you edit the underlying HTML directly. Here’s how to add one of those.

Step 1: Open a new post using the new/Block Editor

Click “Add new” in the posts section of your WordPress dashboard.

Step 2: Click the “+” button

Type in “custom,” “HTML,” or “custom HTML” in the search bar from the screen that pops up. Then click the button.

Step 3: Insert HTML

A block with a few unique features will automatically appear. You can write your own HTML, such as a <div> or <img src>. If you click “preview,” you will be able to see the results of what you generated with HTML in Gutenberg, like a pretty image.

Why use HTML instead of a pre-made Gutenberg block?

A basic <div> code might not be that useful, but if you are adept at CSS, you might be able to attach additional “class” coding into the div to make it more interesting. For instance, if you want the image to display differently on this page specifically, adding the image in HTML and immediately coding the desired class can cut down a few steps.

Further, some Gutenberg blocks have built-in markup that can be different than what you’d want added to your site. For instance, when we edit the HTML from an image block, there’s a <figure> tag added. You might not want that on your webpage, so you might opt to build your own custom blocks rather than inputting the pre-built ones.

Pro tip: You can always edit the HTML of a Gutenberg block

Even if you opt to, say, insert an image using the image block in Gutenberg, you can always click the three-dot-menu and select “Edit as HTML” from the drop down menu. This will lead to a form that looks similar to the original Gutenberg HTML block.

Test it yourself: Add a paragraph of text, select the block, click the three-dot-menu, and then click “Edit as HTML.” Voila, the ever popular <p> tags are displayed automatically!

WordPress Gutenberg HTML video transcript

Note that this is automatically generated.

Howdy folks, so today I want to quickly cover how to make an HTML Gutenberg block, which you might already know how to do, but if you don’t, I’m happy to help you learn how to edit HTML in a WordPress page.

So, in general, it’s worth knowing that WordPress sites are all HTML. If you’re brand new to this, that’s a core concept that we’re gonna use to inform everything we’re going to do in this post using WordPress Gutenberg HTML. So, this post has custom HTML, just so I know what this is and then I click the plus button, and I can actually do a quick search—or you can see—that’s one of my most used blocks. I can just do custom or even just a search for HTML here will give me that.

Now, this block in WordPress has a few unique features. One is that I can totally just write my own thing here, you might know that divs are a part of HTML and maybe the image tag IMG SRC. Those are common thingsI have in my clipboard, an image from this website already and I can put it in at the end of the div. That’s some HTML and that’s what this looks like. It basically looks like an image.

So why did I use this Gutenberg HTML instead of an image block? Well, primarily, you can see that I’ve wrapped it and just a div is not that useful, but if you’re good at CSS, you might know that something like class special – image is super useful because your CSS can treat this one image on this page differently because it’s a child of this class.

So that is where we start to get into why you’re actually doing custom HTML inside your WordPress site. As I said, if I just add a basic image here, I can totally do that. I can select one from the media library. The cool thing to realize is that underlying that block, you can edit that block as HTML. You’ll notice that this image markup is different than my image markup, and that’s another reason that you might end up using custom blocks some of the time.

There isn’t this figure surrounding your image tag—that kind of thing underlying every HTML every block. Under the Gutenberg editor, there is a pair of HTML. This is a paragraph right, and if you’re a little conversant in HTML, you might already recognize that you should expect some <p> tags around that if I go to edit as HTML. And indeed, that’s exactly what we have!

So every WordPress block in Gutenberg is an HTML block. The reason you’ll probably
sometimes want or need to use a custom HTML block in Gutenberg is that you’ve got something where you need a very particular markup to make something like the CSS work out right on this page. Those sorts of situations are when you will actually use a custom HTML block in the Gutenberg editor in WordPress and with that good luck. Cheers.

Yay! 🎉 You made it to the end of the article!
David Hayes

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Wally
September 18, 2021 9:49 pm

Thanks.

I was about to give up on Gutenberg till I read this article. I am used to formatting with HTML, and there didn’t seem to be anyway to do it. And with the HTML block, I can copy images and text together. This will save me a lot of time.

Wally

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

1
0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...