{"id":470,"date":"2020-08-05T14:00:25","date_gmt":"2020-08-05T14:00:25","guid":{"rendered":"https:\/\/wearesmile.com\/help\/?post_type=ht_kb&p=470"},"modified":"2020-08-05T14:00:26","modified_gmt":"2020-08-05T14:00:26","slug":"embedding-custom-html-in-gutenberg","status":"publish","type":"ht_kb","link":"https:\/\/wearesmile.com\/help\/documentation\/embedding-custom-html-in-gutenberg\/","title":{"rendered":"Embedding Custom HTML in Gutenberg"},"content":{"rendered":"\n

Some tags, such as <script><\/code>, are not permitted in most HappyPress hosted sites. This is a security precaution.<\/p>\n\n\n\n

While Gutenberg is fairly comprehensive in covering most content-types, you may occasionally find yourself required to write your own custom HTML for a number of reasons.<\/p>\n\n\n\n

The \u2018Custom HTML\u2019 Block<\/h2>\n\n\n\n

There is a Gutenberg block which exists for just these occasions. Press the \u2018+\u2019 to add a new block to a post or page and select \u2018Custom HTML\u2019.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Type in your custom HTML inside the block\u2019s editor. iFrame embeds, for example, would be inserted using the following format:<\/p>\n\n\n\n

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

You will be able to preview your HTML by clicking on the \u2018Preview\u2019 button.<\/p>\n\n\n\n

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

Continue to make tweaks and preview your changes until you are happy. Finally, in cases where your theme has been applied to the site, you should be able to preview the entire post\/page through the \u2018Preview\u2019 button in the top right of your screen.<\/p>\n\n\n\n

Problems with the \u2018Custom HTML\u2019 Block<\/h2>\n\n\n\n

Frankly, the Custom HTML block is misleading. You’d be forgiven to think that you can dump any HTML into this block and it’ll ‘just work’. Sometimes, this might not work as you expect. Specific tags may be stripped out from yout HTML input as a security precaution. If this is the case you should think about asking for a custom Gutenberg block, shortcode or plugin to be created for you to enable advanced functionality. One such case might be the embedding of established forms.<\/p>\n\n\n\n

Consider Gravity Forms<\/h3>\n\n\n\n

Gutenberg has its own block for one of our core plugins Gravity Forms. Before you go further, you could consider whether or not it would be a positive step forward to recreate old forms in Gravity Forms. Two massive benefits of this are:<\/p>\n\n\n\n

  • Once created, a form can be easily embedded (by its ID) into as many pages on your site.<\/li>
  • Commonly, we have created bespoke designs for forms created in this way which follow our customers\u2019 brand guidelines.<\/li><\/ul>\n\n\n\n

    We completely understand that, in some cases, embedding already-existing HTML content is unavoidable \u2013 especially where tracking and analytics information are contingent on this content.<\/p>\n","protected":false},"excerpt":{"rendered":"

    While Gutenberg is fairly comprehensive in covering most content-types, you may occasionally find yourself required to write your own custom HTML for a number of reasons. The \u2018Custom HTML\u2019 Block There is a Gutenberg block which exists for just these occasions. Press the \u2018+\u2019 to add a new block to…<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_searchwp_excluded":"","footnotes":""},"ht-kb-category":[88],"ht-kb-tag":[95,71],"class_list":["post-470","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-happypress","ht_kb_tag-gutenberg","ht_kb_tag-wordpress"],"_links":{"self":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/470","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/comments?post=470"}],"version-history":[{"count":1,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/470\/revisions"}],"predecessor-version":[{"id":471,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/470\/revisions\/471"}],"wp:attachment":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/media?parent=470"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb-category?post=470"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb-tag?post=470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}