WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

Custom HTML Block

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Gutenberg Blocks – Custom HTML

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.


Custom HTML Block Description

The Custom HTML Block lets you add custom HTML code to your WordPress site and preview it as you edit.

(Add Custom HTML code to WordPress using the Custom HTML Block)

The Custom HTML Block contains no options or settings, as all formatting can be included in the HTML code itself.

How To Use The Custom HTML Block

To add a Custom HTML Block:

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Custom HTML’ block …

(‘Add Block’ Tool – Add Custom HTML Block)

Or, select a Custom HTML Block in the Content Area

(Add a Custom HTML Block from the Content Area)

After adding a Custom HTML Block, you can add html code by typing or pasting in the code …

(Paste HTML code into the Custom HTML Block)

After adding your html code:

How To Edit A Custom HTML Block

You can’t edit a Custom HTML Block … only preview the HTML code you have added.

To preview the HTML code you have typed or pasted in:

(Switch between HTML and Preview in Custom HTML Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Custom HTML Block

To delete or remove a html block:

(Remove a Custom HTML Block)

Additionally …

Custom HTML Block Tools, Options & Settings

The Custom HTML Block includes tools, options, and settings for:

Custom HTML Block Editor

(Custom HTML Block Editor)

The Custom HTML Block Editor includes tools that let you perform the following operations:

Custom HTML Block Settings

(Custom HTML Block Settings)

Custom HTML Block settings include:

Custom HTML Block – Additional Info

You can’t convert a Custom HTML Block into other block types.


Installing plugins or themes on your site may add new functionality, options, or settings to Custom HTML Blocks.


Congratulations! Now you know how to use the WordPress Gutenberg content editor Custom HTML Block.


"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie
For a white label version of this tutorial visit WPTrainingManual.com.