How to write custom HTML in an FSE theme template

I wrote just yesterday how I was struggling to create the advanced layout I wanted in the Proto FSE theme. We needed to write some custom tags so we could use CSS grid instead of CSS flexbox for a sticky layout that wasn’t working well when trying to adapt the Columns Block markup. At the time I tried just putting raw HTML tags into a one of templates. Gutenberg did not like this. Then I tried using the Custom HTML block, Gutenberg informed me that these blocks were invalid because the tags in each block did not open and close in the same block. Such is the validation of a Custom HTML block.

The solution came from an existing template found in another FSE experimental theme. Use Group Blocks. Group Blocks enable us to define a tag, and wrap content. I had thought of them prior as being just for organizing in the editor, because that’s how the term “group” is often used in design software. In Gutenberg however, the Group Block is actually a super powerful and useful tool theme developers can use to define custom markup.

See the example of a page layout below. It is a very streamlined page that shows only the post content, no post title. It has a header and footer. Note the use a group block to enable wrapping the content in an extra custom tag “main”.

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","className":"site-content page-no-title"} -->
<main id="primary" class="wp-block-group site-content page-no-title">
	<!-- wp:post-content {"layout":{"inherit":true}} /-->
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

In the code below we focus just on the format of the group block. Although you can always make blocks in Gutenberg and export the content first, if you have samples of code blocks like this you can copy paste and adapt them manually in your templates.

<!-- wp:group {"tagName":"main","className":"site-content page-no-title"} -->


<!-- /wp:group -->

Similar Posts