WordPress Block Editor – Custom HTML Block

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

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• Also, see this tutorial for information on using HTML in content: Basic HTML Guide For Beginners

***

Custom HTML Block – Description

Hypertext Markup Language (HTML) is the language used to describe how elements of your web page (e.g. colors, font sizes, tables, etc.) should display in a web browser.

The Custom HTML block lets you add HTML code to your posts and pages, fine-tune your content, and preview it as you edit.

How To Use The Custom HTML Block

In this section, we’ll cover:

• How to add a Custom HTML block to your content.
• How to edit and configure your Custom HTML block.
• How to remove the Custom HTML block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Custom HTML Block

To add a Custom HTML block:

• Either:
  • Click on the Add Block tool in the Editing Toolbar section and select the Custom HTML block (in Most Used or Widgets section), or
  • Add the Custom HTML block in the Content Area.
• Type or paste in your content.
• Use the tools in the Custom HTML Block Editor section to edit and preview your HTML code.

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…

Or, select a Custom HTML block using the Inserter tool in the Content Area.

Either of the above methods will add a Custom HTML block to your content.

After adding a Custom HTML block, you can add HTML code by typing or pasting the code into the HTML text area.

Click on the Preview button to preview your formatted HTML content.

After adding your HTML code, you can:

• Preview your code/content,
• Save, publish, or update your post or page.

How To Edit A Custom HTML Block

You can edit the content inside the Custom HTML block but you can’t edit a Custom HTML block…only preview the HTML content you have added.

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

• Click inside the Custom HTML block to select it.
• Use the Block Editor tools to switch between the HTML and Preview tabs.
• Edit the code inside the ‘HTML’ tab and switch to ‘Preview’ to view the result of your edits.

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

For security reasons, WordPress does not allow certain HTML tags to be used. See our HTML Guide For Beginners for more information.

How To Remove A Custom HTML Block

To delete or remove a Custom HTML block from your content:

• Click inside the Custom HTML block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Custom HTML block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Custom HTML block into a Reusable block.

Custom HTML Block Tools, Options & Settings

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

• Custom HTML Block Editor
• Note: Custom HTML Block Settings are not available for this block.

Custom HTML Block Editor

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

• Change Block Type (See ‘Custom HTML Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Add HTML Content
• Preview HTML Content
• More Options – See How To Use Blocks to learn how to use this section.

Custom HTML Block Settings

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

Custom HTML Block – Additional Info

You can convert the Custom HTML block into the following block types:

• Code block
• Columns block
• Group block
• Reusable block

Additionally:

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

Congratulations! Now you know how to use the WordPress content editor’s Custom HTML block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.