{"id":403,"date":"2020-06-11T13:45:12","date_gmt":"2020-06-11T13:45:12","guid":{"rendered":"https:\/\/mywp.site\/template\/?p=403"},"modified":"2024-07-05T19:07:14","modified_gmt":"2024-07-05T09:07:14","slug":"custom-html-block","status":"publish","type":"post","link":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/","title":{"rendered":"WordPress Block Editor &#8211; Custom HTML Block"},"content":{"rendered":"<h1><span class=\"ez-toc-section\" id=\"WordPress-Block-Editor-%E2%80%93-Custom-HTML-Block\"><\/span>WordPress Block Editor &#8211; Custom HTML Block<span class=\"ez-toc-section-end\"><\/span><\/h1><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tutorial Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#WordPress-Block-Editor-%E2%80%93-Custom-HTML-Block\" >WordPress Block Editor &#8211; Custom HTML Block<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Custom-HTML-Block-%E2%80%93-Description\" >Custom HTML Block &#8211; Description<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#How-To-Use-The-Custom-HTML-Block\" >How To Use The Custom HTML Block<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Adding-A-Custom-HTML-Block\" >Adding A Custom HTML Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#How-To-Edit-A-Custom-HTML-Block\" >How To Edit A Custom HTML Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#How-To-Remove-A-Custom-HTML-Block\" >How To Remove A Custom HTML Block<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Custom-HTML-Block-Tools-Options-Settings\" >Custom HTML Block Tools, Options &amp; Settings<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Custom-HTML-Block-Editor\" >Custom HTML\u00a0Block Editor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Custom-HTML-Block-Settings\" >Custom HTML Block Settings<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#Custom-HTML-Block-%E2%80%93-Additional-Info\" >Custom HTML Block &#8211; Additional Info<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n<p style=\"text-align: left\"><img decoding=\"async\" class=\"alignright size-full\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/custom-html-block.png\" alt=\"WordPress Block Editor - Custom HTML Block\" loading=\"lazy\" \/><\/p>\n<p style=\"text-align: left\">This tutorial is part of our series on <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use The WordPress Block Editor (Gutenberg)<\/strong><\/a>.<\/p>\n<ul>\n<li style=\"text-align: left\">To learn more about using the WordPress block editor interface, go here: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>The WordPress Block Editor &#8211; Content Area<\/strong><\/a><\/li>\n<li style=\"text-align: left\">To learn more about using blocks, see this tutorial: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use WordPress Block Editor Blocks<\/strong><\/a><\/li>\n<li style=\"text-align: left\">Also, see this tutorial for information on using HTML in content: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/basic-html-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>Basic HTML Guide For Beginners<\/strong><\/a><\/li>\n<\/ul>\n<p style=\"text-align: center\">***<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Custom-HTML-Block-%E2%80%93-Description\"><\/span>Custom HTML Block &#8211; Description<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\"><strong>Hypertext Markup Language<\/strong> (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.<\/p>\n<p style=\"text-align: left\">The <em>Custom HTML block<\/em> lets you add HTML code to your posts and pages, fine-tune your content, and preview it as you edit.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-001.png\" alt=\"Custom HTML block\" width=\"1000\" height=\"750\" \/><figcaption class=\"wp-caption-text\">Custom HTML block<\/figcaption><\/figure>\n<h2><span class=\"ez-toc-section\" id=\"How-To-Use-The-Custom-HTML-Block\"><\/span>How To Use The Custom HTML Block<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">In this section, we&#8217;ll cover:<\/p>\n<ul>\n<li style=\"text-align: left\">How to add a Custom HTML block to your content.<\/li>\n<li style=\"text-align: left\">How to edit and configure your Custom HTML block.<\/li>\n<li style=\"text-align: left\">How to remove the Custom HTML block from your content.<\/li>\n<\/ul>\n<p style=\"text-align: left\">For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use Blocks<\/strong><\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Adding-A-Custom-HTML-Block\"><\/span>Adding A Custom HTML Block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">To add a <em>Custom HTML block<\/em>:<\/p>\n<ul>\n<li style=\"text-align: left\">Either:\n<ul>\n<li style=\"text-align: left\">Click on the &#8216;Add Block&#8217; tool in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-toolbar\/\" target=\"_blank\" rel=\"noopener\"><strong>Editing Toolbar<\/strong><\/a> section and select the Custom HTML block (in <em>Most Used<\/em> or<em> Widgets<\/em> section), or<\/li>\n<li style=\"text-align: left\">Add the Custom HTML block in the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>Content Area<\/strong><\/a>.<\/li>\n<\/ul>\n<\/li>\n<li style=\"text-align: left\">Type or paste in your content.<\/li>\n<li style=\"text-align: left\">Use the tools in the <em>Custom HTML Block Editor<\/em>\u00a0section to edit and preview your HTML code.<\/li>\n<\/ul>\n<p style=\"text-align: left\">Let&#8217;s go through the above steps.<\/p>\n<p style=\"text-align: left\">First, create a new post or page or open an existing post or page and either:<\/p>\n<p style=\"text-align: left\">Click on the Add Block tool and select a Custom HTML block&#8230;<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-003.png\" alt=\"Add Block tool - Custom HTML block.\" width=\"1000\" height=\"680\" \/><figcaption class=\"wp-caption-text\">Add a Custom HTML block to your posts and pages using the Add Block tool.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Or, select a Custom HTML block using\u00a0the <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/block-editor-content-area\/\" target=\"_blank\" rel=\"noopener\"><strong>Inserter tool<\/strong><\/a> in the Content Area.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-004.png\" alt=\"Inserter Tool - Custom HTML block.\" width=\"1000\" height=\"640\" \/><figcaption class=\"wp-caption-text\">Add a Custom HTML block to your content using the Inserter Tool.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Either of the above methods will add a Custom HTML block to your content.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-005.png\" alt=\"Custom HTML block.\" width=\"1000\" height=\"345\" \/><figcaption class=\"wp-caption-text\">Custom HTML block.<\/figcaption><\/figure>\n<p style=\"text-align: left\">After adding a Custom HTML block, you can add HTML code by typing or pasting the code into the HTML text area.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-006.png\" alt=\"Custom HTML block - HTML text area.\" width=\"1000\" height=\"761\" \/><figcaption class=\"wp-caption-text\">Paste HTML content into the HTML text area.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Click on the Preview button to preview your formatted HTML content.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-007.png\" alt=\"Custom HTML - Preview content.\" width=\"1000\" height=\"717\" \/><figcaption class=\"wp-caption-text\">Preview your HTML content.<\/figcaption><\/figure>\n<p style=\"text-align: left\">After adding your HTML code, you can:<\/p>\n<ul>\n<li style=\"text-align: left\">Preview your code\/content,<\/li>\n<li style=\"text-align: left\">Save, publish, or update your post or page.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"How-To-Edit-A-Custom-HTML-Block\"><\/span>How To Edit A Custom HTML Block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">You can edit the content inside the Custom HTML block but you can&#8217;t edit a Custom HTML block&#8230;only preview the HTML content you have added.<\/p>\n<p style=\"text-align: left\">To preview the HTML code you have typed or pasted in:<\/p>\n<ul>\n<li style=\"text-align: left\">Click inside the Custom HTML block to select it.<\/li>\n<li style=\"text-align: left\">Use the <em>Block Editor<\/em> tools to switch between the <strong>HTML<\/strong> and <strong>Preview<\/strong> tabs.<\/li>\n<li style=\"text-align: left\">Edit the code inside the &#8216;HTML&#8217; tab and switch to &#8216;Preview&#8217; to view the result of your edits.<\/li>\n<\/ul>\n<figure style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-008.gif\" alt=\"Adding HTML to a Custom HTML block.\" width=\"680\" height=\"517\" \/><figcaption class=\"wp-caption-text\">Add and preview HTML content in a Custom HTML block.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Remember to update and publish your post or page to save your settings.<\/p>\n<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/info-icon.jpg\" alt=\"info\" width=\"75\" height=\"75\" \/><\/p>\n<p style=\"text-align: left\">For security reasons, WordPress does not allow certain HTML tags to be used. See our <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/basic-html-guide\/\" target=\"_blank\" rel=\"noopener\"><strong>HTML Guide For Beginners<\/strong><\/a>\u00a0for more information.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"How-To-Remove-A-Custom-HTML-Block\"><\/span>How To Remove A Custom HTML Block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">To delete or remove a Custom HTML block from your content:<\/p>\n<ul>\n<li style=\"text-align: left\">Click inside the Custom HTML block to select it.<\/li>\n<li style=\"text-align: left\">Select the &#8216;More Options&#8217; tool in the Block Editor.<\/li>\n<li style=\"text-align: left\">Click on &#8216;Remove block&#8217;.<\/li>\n<li style=\"text-align: left\">This will remove the Custom HTML block from your content.<\/li>\n<\/ul>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-010.png\" alt=\"Custom HTML block: More Options - Remove block option.\" width=\"1000\" height=\"753\" \/><figcaption class=\"wp-caption-text\">Use the More Options menu to remove a Custom HTML block from your content.<\/figcaption><\/figure>\n<p style=\"text-align: left\"><em>Additionally&#8230;<\/em><\/p>\n<ul>\n<li style=\"text-align: left\">You can reposition your block using the &#8216;Move Up&#8217; and &#8216;Move Down&#8217; arrows or the Drag and Drop handle tool\u00a0(if you need help with this step, see our tutorial on <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use Blocks<\/strong><\/a>).<\/li>\n<li style=\"text-align: left\">You can also convert a Custom HTML block into a <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable block<\/strong><\/a>.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Custom-HTML-Block-Tools-Options-Settings\"><\/span>Custom HTML Block Tools, Options &amp; Settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">The <em>Custom HTML block<\/em> includes tools, options, and settings for:<\/p>\n<ul>\n<li style=\"text-align: left\">Custom HTML Block Editor<\/li>\n<li style=\"text-align: left\"><em>Note:<\/em> Custom HTML Block Settings are not available for this block.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Custom-HTML-Block-Editor\"><\/span>Custom HTML\u00a0Block Editor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-009.png\" alt=\"Custom HTML block editor.\" width=\"1000\" height=\"408\" \/><figcaption class=\"wp-caption-text\">Custom HTML block editor.<\/figcaption><\/figure>\n<p style=\"text-align: left\">The <em>Custom HTML Block Editor<\/em>\u00a0includes tools that let you perform the following operations:<\/p>\n<ul>\n<li style=\"text-align: left\"><strong>Change Block Type<\/strong> (See <em>&#8216;Custom HTML Block &#8211; Additional Info&#8217;<\/em> section below.)<\/li>\n<li style=\"text-align: left\"><strong>Drag &amp; Drop Tool<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Move Up and Down Tool<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Add HTML Content<\/strong><\/li>\n<li style=\"text-align: left\"><strong>Preview HTML Content<\/strong><\/li>\n<li style=\"text-align: left\"><strong>More Options <\/strong>&#8211; See <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>How To Use Blocks<\/strong><\/a> to learn how to use this section.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Custom-HTML-Block-Settings\"><\/span>Custom HTML Block Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p style=\"text-align: left\">The <em>Custom HTML <\/em>block contains no options or settings, as all formatting can be included in the HTML content itself.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Custom-HTML-Block-%E2%80%93-Additional-Info\"><\/span>Custom HTML Block &#8211; Additional Info<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: left\">You can convert a <em>Custom HTML <\/em>block into the following block types:<\/p>\n<ul>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/code-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Code block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/columns-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Columns block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/group-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Group block<\/strong><\/a><\/li>\n<li style=\"text-align: left\"><a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/reusable-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Reusable block<\/strong><\/a><\/li>\n<\/ul>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-011.png\" alt=\"Custom HTML block - Change block type or style.\" width=\"1000\" height=\"397\" \/><figcaption class=\"wp-caption-text\">Change the Custom HTML block into other block types.<\/figcaption><\/figure>\n<p style=\"text-align: left\"><em>Additionally:<\/em><\/p>\n<p style=\"text-align: left\">Installing <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/plugins\/\" target=\"_blank\" rel=\"noopener\"><strong>plugins<\/strong><\/a> or <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/themes\/\" target=\"_blank\" rel=\"noopener\"><strong>themes<\/strong><\/a> on your site may also add new functionality, options, or settings to a Custom HTML block.<\/p>\n<figure style=\"width: 1000px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wptrainingmanual.s3.us-east-1.amazonaws.com\/elite\/tut\/wptm-053\/WPTM-053-002.png\" alt=\"Sample post using Custom HTML block.\" width=\"1000\" height=\"895\" \/><figcaption class=\"wp-caption-text\">Add HTML to your posts and pages using the Custom HTML block.<\/figcaption><\/figure>\n<p style=\"text-align: left\">Congratulations! Now you know how to use the WordPress content editor&#8217;s <em><strong>Custom HTML block<\/strong><\/em>.<\/p>\n<p style=\"text-align: left\">To learn how to use other blocks, go here: <a href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/gutenberg-blocks\/\" target=\"_blank\" rel=\"noopener\"><strong>WordPress Block Editor &#8211; How To Use Blocks<\/strong><\/a><\/p>\n<p style=\"text-align: center\">***<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to use the Custom HTML Block in the WordPress Block Editor.<\/p>\n","protected":false},"author":78,"featured_media":79067,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[195],"tags":[198,211,212],"class_list":["post-403","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials","tag-block-editor","tag-gutenberg","tag-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>WordPress Block Editor - Custom HTML Block - WPTrainingManual.com<\/title>\n<meta name=\"description\" content=\"Learn how to use the Custom HTML Block in the WordPress Block Editor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Block Editor - Custom HTML Block - WPTrainingManual.com\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the Custom HTML Block in the WordPress Block Editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\" \/>\n<meta property=\"og:site_name\" content=\"WPTrainingManual.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wptraining\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-11T13:45:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-05T09:07:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"WordPress Tutorials\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wptrain\" \/>\n<meta name=\"twitter:site\" content=\"@wptrain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"WordPress Tutorials\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\"},\"author\":{\"name\":\"WordPress Tutorials\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc\"},\"headline\":\"WordPress Block Editor &#8211; Custom HTML Block\",\"datePublished\":\"2020-06-11T13:45:12+00:00\",\"dateModified\":\"2024-07-05T09:07:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\"},\"wordCount\":958,\"publisher\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png\",\"keywords\":[\"Block Editor\",\"Gutenberg\",\"HTML\"],\"articleSection\":[\"WordPress Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\",\"url\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\",\"name\":\"WordPress Block Editor - Custom HTML Block - WPTrainingManual.com\",\"isPartOf\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png\",\"datePublished\":\"2020-06-11T13:45:12+00:00\",\"dateModified\":\"2024-07-05T09:07:14+00:00\",\"description\":\"Learn how to use the Custom HTML Block in the WordPress Block Editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage\",\"url\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png\",\"contentUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png\",\"width\":1280,\"height\":720,\"caption\":\"The WordPress Block Editor - Custom HTML Block\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wptrainingmanual.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Block Editor &#8211; Custom HTML Block\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wptrainingmanual.com\/#website\",\"url\":\"https:\/\/wptrainingmanual.com\/\",\"name\":\"WPTrainingManual.com\",\"description\":\"WordPress Training Manual\",\"publisher\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wptrainingmanual.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wptrainingmanual.com\/#organization\",\"name\":\"WPTrainingManual.com\",\"url\":\"https:\/\/wptrainingmanual.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png\",\"contentUrl\":\"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png\",\"width\":559,\"height\":65,\"caption\":\"WPTrainingManual.com\"},\"image\":{\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/wptraining\",\"https:\/\/x.com\/wptrain\",\"https:\/\/www.linkedin.com\/in\/wptraining\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc\",\"name\":\"WordPress Tutorials\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wptrainingmanual.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g\",\"caption\":\"WordPress Tutorials\"},\"url\":\"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Block Editor - Custom HTML Block - WPTrainingManual.com","description":"Learn how to use the Custom HTML Block in the WordPress Block Editor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Block Editor - Custom HTML Block - WPTrainingManual.com","og_description":"Learn how to use the Custom HTML Block in the WordPress Block Editor.","og_url":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/","og_site_name":"WPTrainingManual.com","article_publisher":"https:\/\/www.facebook.com\/wptraining","article_published_time":"2020-06-11T13:45:12+00:00","article_modified_time":"2024-07-05T09:07:14+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png","type":"image\/png"}],"author":"WordPress Tutorials","twitter_card":"summary_large_image","twitter_creator":"@wptrain","twitter_site":"@wptrain","twitter_misc":{"Written by":"WordPress Tutorials","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#article","isPartOf":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/"},"author":{"name":"WordPress Tutorials","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc"},"headline":"WordPress Block Editor &#8211; Custom HTML Block","datePublished":"2020-06-11T13:45:12+00:00","dateModified":"2024-07-05T09:07:14+00:00","mainEntityOfPage":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/"},"wordCount":958,"publisher":{"@id":"https:\/\/wptrainingmanual.com\/#organization"},"image":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage"},"thumbnailUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png","keywords":["Block Editor","Gutenberg","HTML"],"articleSection":["WordPress Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/","url":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/","name":"WordPress Block Editor - Custom HTML Block - WPTrainingManual.com","isPartOf":{"@id":"https:\/\/wptrainingmanual.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage"},"image":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage"},"thumbnailUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png","datePublished":"2020-06-11T13:45:12+00:00","dateModified":"2024-07-05T09:07:14+00:00","description":"Learn how to use the Custom HTML Block in the WordPress Block Editor.","breadcrumb":{"@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#primaryimage","url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png","contentUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png","width":1280,"height":720,"caption":"The WordPress Block Editor - Custom HTML Block"},{"@type":"BreadcrumbList","@id":"https:\/\/wptrainingmanual.com\/wordpress-tutorials\/custom-html-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wptrainingmanual.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Block Editor &#8211; Custom HTML Block"}]},{"@type":"WebSite","@id":"https:\/\/wptrainingmanual.com\/#website","url":"https:\/\/wptrainingmanual.com\/","name":"WPTrainingManual.com","description":"WordPress Training Manual","publisher":{"@id":"https:\/\/wptrainingmanual.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wptrainingmanual.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wptrainingmanual.com\/#organization","name":"WPTrainingManual.com","url":"https:\/\/wptrainingmanual.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/","url":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png","contentUrl":"https:\/\/wptrainingmanual.com\/wp-content\/uploads\/2019\/10\/WPTMLogo300DPI.png","width":559,"height":65,"caption":"WPTrainingManual.com"},"image":{"@id":"https:\/\/wptrainingmanual.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/wptraining","https:\/\/x.com\/wptrain","https:\/\/www.linkedin.com\/in\/wptraining\/"]},{"@type":"Person","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/00f2fc1ecf36a4fd1861f6744e9f17cc","name":"WordPress Tutorials","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wptrainingmanual.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1927207a85c38b508587e97574ef0c78249b67b2deaa3f0fdba58dda9de847f?s=96&d=mm&r=g","caption":"WordPress Tutorials"},"url":"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png",1280,720,false],"thumbnail":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html-150x150.png",150,150,true],"medium":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html-300x169.png",300,169,true],"medium_large":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html-768x432.png",768,432,true],"large":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html-1024x576.png",1024,576,true],"1536x1536":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png",1280,720,false],"2048x2048":["https:\/\/wptrainingmanual.com\/wp-content\/uploads\/053-block-custom-html.png",1280,720,false]},"uagb_author_info":{"display_name":"WordPress Tutorials","author_link":"https:\/\/wptrainingmanual.com\/author\/wordpress-tutorials\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to use the Custom HTML Block in the WordPress Block Editor.","_links":{"self":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/users\/78"}],"replies":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/comments?post=403"}],"version-history":[{"count":1,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/403\/revisions"}],"predecessor-version":[{"id":79660,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/posts\/403\/revisions\/79660"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/media\/79067"}],"wp:attachment":[{"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/media?parent=403"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/categories?post=403"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wptrainingmanual.com\/wp-json\/wp\/v2\/tags?post=403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}