{"id":11285129,"date":"2019-03-07T10:19:35","date_gmt":"2019-03-07T10:19:35","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285129"},"modified":"2026-05-20T16:05:55","modified_gmt":"2026-05-20T16:05:55","slug":"custom-html","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/custom-html\/","title":{"rendered":"Custom HTML"},"content":{"rendered":"\n

Go back to the list of Blocks<\/a><\/p>\n\n\n\n

Hypertext Markup Language (HTML)<\/strong>, 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. <\/p>\n\n\n\n

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\u2019s content using the function\u00a0wp_kses()<\/a>, stripping disallowed tags such as\u00a0<script><\/code>\u00a0and\u00a0<iframe><\/code>. In this case, the CSS and JavaScript panels are not shown, and any disallowed markup is removed when the post is saved or updated.<\/p>\n\n\n\n

Learn more about WordPress user roles and capabilities<\/a><\/p>\n\n\n\n

Add a Custom HTML block<\/h2>\n\n\n\n

In order to add a custom HTML block, click on the Block Inserter<\/strong> icon.<\/p>\n\n\n\n

You can also type \/html<\/code> and hit enter in a new paragraph block to add one quickly.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n

Editing the block<\/h2>\n\n\n\n

Once you add the block, click on the Edit HTML button to open the editing modal.<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n

<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n


<\/p>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n

The Custom HTML block has the following options on the block toolbar:<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n

Block moving tools<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n

Get more information about moving a block within the editor<\/a><\/p>\n\n\n\n

Edit Code button<\/h3>\n\n\n\n

Press this button to make changes to your Custom HTML block code.<\/p>\n\n\n\n

More options<\/h3>\n\n\n\n

These controls give you the option to copy, duplicate, or rename your block.<\/p>\n\n\n\n

<\/a>Read about these and other settings<\/a><\/p>\n\n\n\n

Block settings<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\n

Changelog<\/h2>\n\n\n\n
    \n
  • Updated 2026-05-20 (props to @awetz583 @atachibana )\n
      \n
    • Updated information, video and screenshots for 7.0<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Updated 2026-05-01\n
        \n
      • Updated formatting and added link to roles and capabilities<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Updated 2025-07-21\n
          \n
        • Added detail HTML processing<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Updated 2022-11-26\n
            \n
          • Removed redudant content <\/li>\n\n\n\n
          • Aligned images for mobile view<\/li>\n\n\n\n
          • Added heading<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Updated 2022-04-20\n
              \n
            • Update screenshots to 5.9<\/li>\n\n\n\n
            • Add More Options section<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n

              <\/p>\n","protected":false},"excerpt":{"rendered":"

              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 […]<\/p>\n","protected":false},"author":13243985,"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,90],"class_list":["post-11285129","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-widget-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11285129"}],"version-history":[{"count":8,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285129\/revisions"}],"predecessor-version":[{"id":16367978,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285129\/revisions\/16367978"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wporg\/v1\/users\/avillegasn"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}