Lazy Blocks

Basic HTML and CSS skills are enough to create your own Gutenberg Blocks with Lazy Blocks.

If you are proficient enough with HTML to create an element for your website, and you’d like it to be a Gutenberg block, but lack the other skills to create blocks, Lazy Blocksy might be worth checking out.

Lazy Blocks screenshot
Creating a simple HTML Details block.


I created a HTML Details / Summary block in the matter of minutes, as I missed that in the block editor. If you don’t know about the <details> and <summary> HTML elements, go check them out. You can create a native toggle / accordion like element that is both accessible, JavaScript free and works in all browsers.

Here’s what it looks like without any styling:

FAQ-like Group block with four custom blocks

Custom blocks in the block editor

Content for the blocks, can either be entered in the side panel to the right, or within the editor, or both, depending on what type of content it is. In the demo, I’ve only used simple text fields, but Lazy Blocks supports a wide range of fields.

Laze Blocks experience in the block editor
This is how the custom blocks can look in the Gutenberg block editor.

Extract from

Create custom blocks visually, add controls to your blocks using drag & drop, write blocks output using HTML or PHP code. You can create custom blocks as well as custom meta fields for specific post types. Furthermore, you are able to create post templates with predefined blocks for any post type.

Leave a Reply

Your email address will not be published. Required fields are marked *