Today we’re back on our series looking at building custom blocks for the block editor. In the first post we looked at the pro version of advanced custom fields. In this post we are going to be looking at Custom Blocks Constructor – Lazy Blocks.
Pricing
When we looked at ACF, in order to build a block we had to use the paid, pro version of the plugin. Lazy Blocks has a free version that does allow you to build custom blocks, without having to pay for a pro version. Lazy blocks does offer a pro version that currently starts at $49/year for a single site, that is the same price as ACF Pro. I do believe here the initial advantage would go to Lazy Blocks because you can start with the free version to begin building your blocks. For the purposes of this post I’m only going to be looking at the free version of the plugin, if you want to see the rest of the Lazy Blocks pro features you can view them on their site https://www.lazyblocks.com/free-vs-pro/.
The Build
As with any plugin we’ll being installing and activating within our WordPress install.
Once active you will notice a new menu item in the admin sidebar.
From here, within the sidebar we are going to go to Lazy Blocks > Add New. From there we get a screen similar to adding a new post.
We’re going to name our block “Reviews” and then begin adding our content controls. We want a name (text field), description (text area), and stars (radio buttons) to match what we were able to do in ACF.
So far so good.
From here we have to add in our template. Lazy Blocks gives us three options
- HTML + Handlebars
- PHP
- Theme Template
Now, if you ask me as a developer having these options to choose from is awesome. First off, I want to look at the theme template. If you choose that option you are presented with a theme location that the plugin will look for your template in.
Once that is in place you can then build a php template for your block. If you don’t want to use the template in the theme but still want to write php for your block you are able to do that as well.
Having these options is amazing, I would though under build circumstances try and keep a consistent workflow when possible. You don’t have to choose a single option but it may make things easier for you down the road. For our use case I’m going to use the PHP output method. This is primarily because of a loop we need to write for our stars output. If we wanted to use the Handlebars method we could write a callback function in the theme but I want to keep everything with the admin on this one. With that being said our template will use the following code:
<blockquote class="review-blockquote">
<p class="review-description"><?php echo $attributes['review-description']; ?></p>
<p class="review-name"><?php echo $attributes['review-name']; ?></p>
<div class="review-stars">
<?php for ($x = 1; $x <= $attributes['stars']; $x++) { ?>
★
<?php } ?>
</div>
</blockquote>Once our code is in place we have some options for how our output is displayed in the editor. The way you set this, and your form location up will depend on your unique block. This one is fairly simple so I’m going with “Display Always” which will give me a preview as I populate my form. Here is our full block output settings.
With our setup complete we can now test adding a block. From the block inserter choose the “Review” block.
That will present you with the following within the editor.
Once we add our details, we are presented with a preview.
And our final output is displayed on our post front-end.
Wrapping Up
So in full disclosure, in writing this post it’s the first time I’ve interacted with this plugin. I have to say that I am highly impressed with what it can do and what it offers just in a free version. There were options that for the scope of this post I could not cover but the ability to build more advanced blocks is present. It’s something I want to continue diving into and playing with but if you need to start quickly getting blocks in place, this appears to be a great option to start doing just that.