How to Use the Custom HTML Block in Gutenberg

How to Use the Custom HTML Block in Gutenberg • WPShout

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 page.

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 “HTML”, but that only some are specifically what we’ll call “custom HTML” blocks. 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

[…]

 



This article was written by David Hayes and originally published on WPShout.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top