Lazy Blocks – The Most Appropriate Plugin of WordPress for Creating Custom Gutenberg Blocks
There are not many plugins that can help a developer to create custom Gutenberg blocks in WordPress, and Lazy Blocks is one of them which fits right in the spot. This article/review is based upon my personal experience with Lazy Blocks on multiple websites.
Gutenberg is a blessing by WordPress to its content editors, it provides the right kind of surroundings for writing an article or a blog post, but these days articles are not just some simple paragraphs and images, besides content writers want to style them more and more to leave a remarkable impression on the readers. Hence the default available Gutenberg blocks are not enough to achieve that motive, so it’s required to have some tailored blocks created with specific needs, that can provide the article the elegancy a writer or publisher might be seeking for.
Here Comes the Lazy Blocks
Not much popular yet, but those who seek salvation in adding custom blocks to Gutenberg, Lazy Blocks is the right solution. Lazy Blocks is available in WordPress plugins library, click here to view & download.
Let’s Get Started with Lazy Blocks
I will explain here about how to create custom blocks for Gutenberg WordPress through Lazy Blocks Plugin, It was not that simple, but here we made it simple. Note that you must know basics of HTML and CSS, if you are going to create a custom block, if you do not have that you are wasting your time here, you should look for pre-made blocks then.
Step 1: Install & Activate Plugin
At first visit WordPress plugins library to download the plugin, install it in your WordPress site, and activate it.Download LazyBlocks
Step 2: Open Lazy Blocks Panel
Now visit Lazy Blocks panel by clicking on it. And (CTRL + Click) on Documentation to open it into a new tab, as we will need this.
Step 3: Add Block
Now simply click on add block to create a block. Now understand, we will divide this block adding process in 4 points. Adding a Block, Adding Controls, Adding Output Content, and changing the preview layout in the editor, and that is it.
Step 3-A (Add Block Information):
In the right sidebar, two tabs are visible, Block and Control. Here you first must edit the Tab “Block”. Add asked information like this screenshot given below (Click to Enlarge).
Step 3-B (Add Controls):
Controls are just fields like text, textarea, image, etc. So just add them the way you need. See screenshot below for help. (Click to enlarge)
Step 3-C (Add Output Values):
These output values are custom html tags and attributes with js handlebars, that will be printed on frontend display (See Screenshot Below, Click to Enlarge). I already have asked you to open the documentation in a different tab, in case you haven’t then open it now by clicking below and follow the guidelines for adding controls.See Documentation
Step 4-D (Preview Settings in Editor):
See screenshot below for help (Click to enlarge). Choose the option “Never” for “Show Block Preview in Editor”. If you do not choose as I mentioned, you might get disturbances while adding content in the editor.
Step 4: Publish the Block
Now publish your block, and it will be created, and mark its place among Gutenberg Blocks. So this is how you create custom blocks through Lazy Blocks Plugin.
Best things about Lazy Blocks Plugin
Lazy Blocks is a developer-friendly plugin and has an easy implementation. There are no flaws yet noticed in the plugin, but documentation is a little complex for beginners, nonetheless, it’s not a big point to name it as a flaw as compared to its worthiness.
One can easily add any type of fields/controls in the block, output any type of HTML, and style it accordingly. Based on all the facts and measures, without any doubt, Lazy Blocks plugin has been giving a rating of 5 out of 5, and it deserved that.