Custom HTML Block

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

WordPress Block Editor – Custom HTML Block

WordPress Block Editor - Custom HTML Block

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

***

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.

Custom HTML block
Custom HTML block

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…

Add Block tool - Custom HTML block.
Add a Custom HTML block to your posts and pages using the Add Block tool.

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

Inserter Tool - Custom HTML block.
Add a Custom HTML block to your content using the Inserter Tool.

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

Custom HTML block.
Custom HTML block.

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

Custom HTML block - HTML text area.
Paste HTML content into the HTML text area.

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

Custom HTML - Preview content.
Preview your 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.
Adding HTML to a Custom HTML block.
Add and preview HTML content in a Custom HTML block.

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

info

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.
Custom HTML block: More Options - Remove block option.
Use the More Options menu to remove a 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

Custom HTML block editor.
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:

Custom HTML block - Change block type or style.
Change the Custom HTML block into other block types.

Additionally:

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

Sample post using Custom HTML block.
Add HTML to your posts and pages using the 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

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

***

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.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as Custom HTML Block.