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.

Demo

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 three custom blocks

How hard is it to create blocks with Lazy Blocks? It’s very easy. The Gutenberg Block JS/PHP part is taken care of. All you need is some HTML and optionally CSS knowledge.
Is there any documentation available? Yes. nK – the company behind Lazy Blocks, provides quite detailed documentation on their website.
Why not just install block collection plugins? Maybe you only need a few blocks of a large collection that possible bloats your site. Maybe the block isn’t available, like the HTML details element.

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 WordPress.org

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.

https://wordpress.org/plugins/lazy-blocks/

Leave a Reply