The Custom HTML block is ideal for users with flexibility and control over their content. It lets you add HTML code directly to your posts or pages without altering theme files.
It also adds custom widgets, forms, or scripts from external platforms such as Google Maps, Social Media embeds, or analytic tools. It also allows you to preview your code before publishing.
Today, we will show you how to use the Custom HTML Block in WordPress with easy steps. Make sure to follow us through.
What is the WordPress Custom HTML Block?
What is the WordPress Custom HTML Block?
The Custom HTML block is a core block that allows you to display custom HTML code to your posts and pages. It is a useful tool for adding unique design elements, embedding external scripts, etc.
It supports raw HTML input. Therefore, you get complete control over the output on the front end of your website.
What are the Key Features of the Custom HTML Block?
- Preview Option: View how your HTML code will appear on the front end without leaving the editor.
- Flexibility: Add scripts, inline styles, or custom embeds with no restrictions on the type of HTML code you use.
- Responsiveness: Ensures custom HTML outputs adjust to different devices, depending on your code structure.
What are the Toolbar Features of the Custom HTM Block?
- Transform To: You can transform this block into the Columns, Code, Details, and Group blocks.
- Moving Handles: Let you move your block up and down in the editor to organize your content better.
- Drag: Allows you to drag and drop the dedicated block into any place.
- HTML: This button lets you see and insert the HTML code into the block.
- Preview: Preview lets you show the preview of your HTML Code in the editor so that you can change your output from the editor.
- Options: Offers more options related to the section of the block, such as duplicate, copy, group, etc

Create Beautiful Tables
With Block Editor

How to Use the Custom HTML Block in WordPress?
Anyone without any coding skills can easily use the Custom HTML block. All you need to do is follow the steps below.
Step 1: Insert WordPress Custom HTML Block
Go to your post or page where you want to add Custom HTML blocks. Afterward, Click the Add Block (“+“) icon (1), type “Custom HTML” in the search box (2), and click “Custom HTML” (3).

Step 2: Insert Your Custom HTML Code
Paste your code inside the Custom Code Block.

You can also directly see the output of your code in the editor by selecting the preview button.

So, that’s how you use the Custom HTML block. Make sure to publish or save your post after adding the block.
The Custom HTML does not hold any other customization in block settings. All the customizations are in the toolbar for right now.
Final Thoughts!
The Custom HTML block helps WordPress’s default capabilities with custom code. Its intuitive interface and preview option make it a perfect HTML block.
I hope this small tutorial helped you learn more about the block and how to use it. Let me know if you don’t understand any steps above.
Read More!