Custom HTML Block

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

WordPress Gutenberg Blocks – Custom HTML

WordPress Gutenberg - Custom HTML Block

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

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

Info

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:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Custom HTML’ block (in Most Used or Formatting 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 or Block Settings 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 - Add 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

(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

(Paste HTML code into the Custom HTML Block)

After adding your html code:

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

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:

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

Switch between HTML and Preview in Custom HTML Block

(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:

  • Click inside the Custom HTML Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Custom HTML Block

(Remove a Custom HTML Block)

Additionally …

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

Custom HTML Block Tools, Options & Settings

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

  • Custom HTML Block Editor
  • Custom HTML Block Settings

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.)
  • Add HTML Code
  • Preview HTML Code
  • More Options

Custom HTML Block Settings

Custom HTML Block Settings

(Custom HTML Block Settings)

Custom HTML Block settings include:

  • Block description area

Custom HTML Block – Additional Info

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

Additionally:

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.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"This is AMAZING! I had learnt about how to use WordPress previously, but this covers absolutely everything and more!! Incredible value! Thank you!" - Monique, Warrior Forum

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Custom HTML Block.