Justin Tadlock
Last week, Wicked Plugins launched version 1.0 of its Wicked Block Builder. I have kept my eye on this plugin since its November 2021 beta release. The project promised that developers would be able to “effortlessly build custom blocks,” and I was finally ready to put that to the test.
In the past two months, I have activated the plugin every so often. I knew a review of it would take me a while, and I would deactivate it before diving in. I kept feeling overwhelmed by the enormity of it — there are tons of settings to configure. The holiday season did not help either. I wanted to sit down with a clear head and decide whether this plugin was something developers in the WP Tavern audience should put in their toolbox.
The short answer: yes.
Or, at least you should give it a spin to see how it compares to similar plugins. This is a version 1.x project, so there are still some missing pieces. However, it will make client builds easier to put together without writing anything more than CSS for custom blocks.
When I first began using the plugin, I seemed to hit issue after issue. Like always, I was trying to run before I could walk. I like to test new plugins at full speed and often forget to stop and RTFM. With complex projects like Wicked Block Builder, I must remind myself that it is OK to seek help from the docs.
The plugin has a bit of a learning curve if you want to do anything advanced. My suggestion is to do the opposite of what I did. Start with a simple use case.
Fortunately, the plugin development team has a tutorial video that will have you building custom blocks in less than five minutes. I recommend following along when creating your first.
Once I hopped over that initial hurdle, using the plugin was a breeze.
The plugin allows developers to add blocks, block categories, patterns, and pattern categories. I primarily focused on block creation. The plugin worked in much the same way as other pattern builders.
Following along with the tutorial video, I created a Resource Card block. It included an image, title, summary, and button.
There are multiple tabs for developers to build out their blocks. Aside from the primary Settings tab, most of the work will happen under Attributes and Editor View. The Front-end View is only necessary if the block’s output does not match what it looks like in the editor. The screen also has a Styles panel for adding custom CSS, which is loaded for the editor and front-end.
The UI seems mostly straightforward when following along with the tutorial. However, there are tons of options, and it is easy to get lost once you start digging into them all.
Once I pieced together my custom block, it correctly appeared in the inserter. I also tested a slash command for /resource card to ensure it worked.
A couple of missing features I immediately noticed once inserting my block was a custom icon and example/preview. Both are relatively simple to add when creating a block type from code, so I hope they are on the agenda for a future version.
While searching for the custom block type via the inserter worked, I would also welcome an option to create custom keywords.
I filled in the details of the Resource Card block and saved it.
To my surprise, I did not break anything. I began wondering, Could creating blocks be this easy?
I ran through a few other simple block ideas, and the experience was enjoyable. While I no longer work with clients, I could see how this could save hours. Pairing it with template locking would also be a routine use case so that clients would only need to plug in their content and publish.
There are some block-supported features that I would like to see added. The plugin currently allows devs to enable alignment and wide alignment. However, others like spacing, typography, and color would be easy wins.
I tested the free version of the Wicked Block Builder. For simple blocks, it worked well. For more complex use cases, developers will need to upgrade to the pro version. It runs between $49 and $299 per year, depending on the number of supported sites.
While I have not tested the pro version, it does offer post and term selects, repeater fields, conditional logic, and inner-block support. After exhausting the basics, these will likely be necessary on some projects. However, the free version can still get you pretty far.
📻 WP Tavern Jukebox
🎙️ Host: Nathan Wrigley
Blocks are the future of WordPress. They offer an easy way to create content and display it on your website in interesting ways. The only problem is that, although they are easy to use, blocks are hard to create. There’s a fairly high level of technical concepts and processes which you need to master if you’re going to start building your own blocks. Unless of course you can find a block builder plugin like the one that today’s guest, Vinny McKee, has created. In the podcast we learn about why Vinny built the plugin, as well as how it works. What problems does it overcome, and are there any limitations to what you can build?
This plugin looks powerful and takes a more programatic approach than I’ve seen other plugins take. LazyBlocks is a plugin I’ve used for a long time to build custom blocks for those unique block cases.
Very impressive block builder! Love what they are doing. I have couple of “asks” but what is presented is already impressive.
Hey Devin, feel free to reach out with your asks and I’ll get them added to the feature requests.
The problem with all these block builder plugins is that the generated blocks need the aforementioned plugins active in order for the blocks to work. I long for the day that one of these plugins allows you to export the JS/PHP code of the generated blocks so I can use them independently.
Hey Bastian, I agree and think this would be an awesome feature. My initial reaction is that it would be fairly complicated to build but I love the idea and will definitely put some thought into how this could be accomplished.
Best plugin ever !
I like the idea of creating/editing blocks on the go however I would use WP pattern for the simple reason that I already have heading/image/button blocks, you just need to combine them in a group and give it a class for styling. I thing this is the big purpose of Gutenberg and how it should be used.
I would definitely agree that a block pattern is generally best with the example shown. I’m sure folks who work with clients regularly have better ideas.
I see what you’re saying. I was trying to demonstrate in the simplest way possible how the plugin works without overwhelming people. Others have mentioned the same thing though so I think I need to come up with a better example.
Just wow to this block builder 😀
Hey Justin, Vinny here from Wicked Plugins. Thanks so much for taking the time to try out the plugin and share your thoughts. I was really surprised/excited to see it mentioned here on WP Tavern. All of the missing features you mentioned are great ideas and I’ll be sure to get those included in the plugin!
Right now the plugin in free version has less features than lazyblocks.com e.g. repeater fields, term select included, import export blocks. For me lazyblocks is more developer friendly and flexibel as i offers code in templating using php or html handlebars, with a good documentation and some usefull actions and filters.
Also the easy to add features if you have installed ghostkit like Spacings, Display, Animate on Scroll, Frame, Custom CSS are very helpful.
Greets spencer.
Your email address will not be published.
document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
