Custom HTML

Go back to the list of Blocks

Hypertext Markup Language (HTML), is language used to describe the semantic content of web pages. This can be added using the custom HTML block. This block allows you to insert your code so you can fine-tune your content. 

Starting in WordPress 7.0, the Custom HTML block introduces separate editing panels for HTML, CSS, and JavaScript. The CSS and JavaScript panels are only available to users with the unfiltered_html capability. If a user lacks this capability (for example, a Contributor), WordPress will sanitize the block’s content using the function wp_kses(), stripping disallowed tags such as <script> and <iframe>. In this case, the CSS and JavaScript panels are not shown, and any disallowed markup is removed when the post is saved or updated.

Learn more about WordPress user roles and capabilities

Add a Custom HTML block

In order to add a custom HTML block, click on the Block Inserter icon.

You can also type /html and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks

Editing the block

Once you add the block, click on the Edit HTML button to open the editing modal.

Enter HTML code and see the preview of your output to the right of the code editor. You can expand the modal to fullscreen the Enable/disable fullscreen button on the top right of the modal. When you are done entering code, press the Update button.

Block toolbar

The Custom HTML block has the following options on the block toolbar:

Block moving tools

The block-moving tools allow you to move the block in the editor. Use the six dots icon to drag and drop the block and place it anywhere on the page. Alternatively, click on the up and down arrows to move the block up or down.

Get more information about moving a block within the editor

Edit Code button

Press this button to make changes to your Custom HTML block code.

More options

These controls give you the option to copy, duplicate, or rename your block.

Read about these and other settings

Block settings

While most blocks have specific options in the editor sidebar in addition to the options found in the block toolbar, the HTML block does not have extra options.