How to Use the Custom HTML Block in Gutenberg

HTML browser output example inspect element

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.


1 Response

Comments

  • Wally says:

    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

Add a Comment

Your email address will not be published.