Are you a WordPress theme/plugin developer? I am so happy to introduce you "Lazy Blocks", a free WordPress plugin that will help you generate Gutenberg blocks headache free.

Gutenberg blocks are amazing tools but, let's admit it, it's a pain to write even one block, let alone tens of blocks while developing themes.

As a web developer at WowThemes, I've recently rebuilt the WordPress theme BizConstruct with the help of Lazy Blocks. BizConstruct used to be built with SiteOrigin page builder, a plugin that ruined all my themes built with it since their last update (the one that added Gutenberg compatibility).

Of course, this isn't anyone's fault but mine, I shouldn't have relied upon third parties I had no control over. So I had to decide whether I'd rebuild them with some other page builder. But no. I will not use any more page builder ever for building my themes. Not when Gutenberg is now in the core and made just for that.

Since I plan to rebuild all my themes with Gutenberg, I needed a fast way of generating my blocks without going crazy. Javascript is also not my expertise so I wanted something that could help me avoid it as much as possible.

Enter Lazy Blocks!

After a bit of researching (one day actually) I discovered a life saver: Lazy Blocks.

What does this plugin do exactly?

Lazy Blocks helps you create unlimited blocks by first adding the needed controls. You can choose from:

• Text
• Textarea
• Number
• Range
• URL
• Password
• Image
• Gallery
• Rich Text (WYSIWYG)
• Code Editor
• Inner Blocks
• Select
• Checkbox & Toggle
• Color Picker
• Date Time Picker
• Repeater

Basic Example

Say you want to create a button block. Name it Biz Button.

• Add a text control with label Button Text.
• Add a text control with label Button Icon.
• Add an url control with label Button Link
• Add a color control with label Button Color

Save the block.

Now you can choose how to output it. You can add the ouput code right under the block.

This is self explanatory. Replace the values with your own.

Or you can choose to output it in functions.php. This is how I use it. So to continue with our button example, the code would be:

add_filter( 'lazyblock/biz-button/frontend_callback', 'biz_button', 10, 2 );
add_filter( 'lazyblock/biz-button/editor_callback', 'biz_button', 10, 2 );
if ( ! function_exists( 'biz_button' ) ) :
function biz_button( $output, $attributes ) {
ob_start();
?>
<a class="btn icon whiteicon" style="background-color:<?php echo ($attributes['button_color']); ?>" href="<?php echo ($attributes['button_link']); ?>"><?php echo ($attributes['button_text']); ?><i class="fa fa-<?php echo ($attributes['button_icon']); ?>"></i></a>

 <?php
    return ob_get_clean();
}
endif;

That's it! Now visit a page, add your new block "Biz Button" and test it.

Remember, your users would have to have Lazy Blocks installed, so use the TGMPA plugin to indicate the required plugin.

Create all your demo pages on a live domain, then use WordPress exporter tool to create the xml file for the client. All the pages with their respective Gutengerg blocks should be exported so the user will have their website just like your demo after a single import click.

I hope this info is as useful for your as it was for me!

Written by Sal