Screen-Shot-2018-11-19-at-10.25.08-AM New Block Lab Plugin Makes it Easy to Create Custom Gutenberg Blocks design tips

Block Lab is a new tool that provides an admin interface and a templating system for creating custom Gutenberg blocks. Rob Stinson, Luke Carbis, and Rheinard Korf, all employees at XWP, kicked off the project in their own time with the goal of removing the relatively steep barrier to block creation. The plugin is now available on WordPress.org and Stinson said their target audience is WordPress developers ranging from junior to experienced.

The Block Lab admin screen lets users select an icon for the custom block, enter keywords, and choose from a variety of input fields.

block-lab-admin New Block Lab Plugin Makes it Easy to Create Custom Gutenberg Blocks design tips

Rendering the custom blocks in the editor and on the frontend requires simple PHP functions that most WordPress developers are probably already familiar with. Here’s an example for a testimonial block from the plugin’s documentation:

<img src="<?php block_field( 'profile-picture' ); ?>" alt="<?php block_field( 'author-name' ); ?>" />
<h3><?php block_field( 'author-name' ); ?></h3>
<p><?php block_field( 'testimonial' ); ?></p>

The plugin makes it possible to build custom blocks in a matter of minutes, as demonstrated in the video below.

[youtube https://www.youtube.com/watch?v=cmWnMBF0ly0?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&w=627&h=353]

Block Lab Puts Block Creation Inside the WordPress Admin

Block Lab differs from existing block creation tools in that it aims to provide a Gutenberg-first solution directly inside the WordPress admin. With the exception of the template creation, developers are not required to write any code when using it to create blocks.

“Ahmad’s create-gluten-block is an excellent solution, but is more focused on streamlining block creation from the ground floor,” Stinson said. “As I understand, it’s a development framework. Block Lab is about letting the developer kick off from the 10th floor and does this by offering a super simple WP Admin and traditional templating experience.”

Stinson said ACF’s solution was one of the inspirations for his team but that Block Lab tackles block creation from a different angle.

“ACF is amazing as well – easily one of our all time favorite plugins and one that has inspired us,” Stinson said. “Block Lab is a Gutenberg-first solution. Where ACF is a meta data first solution. They both arrive at similar destinations but get there by very different means, both technically and as far as UX goes.”

Developers and users who adopt Block Labs should be aware that if the plugin is deactivated, the custom blocks they created will also be deactivated. They are stored in the database and the templates are stored in the theme or child theme. Switching themes means users will lose the blocks as well.

“Adding templates to a stand-alone plugin is the most effective way around this,” Stinson said. “Either way though, the templating is simple enough that copying template folders/files from one theme to another is pretty easy. I did this exact thing yesterday in about 5 minutes.”

Data portability isn’t a guarantee for users right now, but Stinson said his team has some ideas about how they can reduce barriers even further to include an in-admin templating experience.

Block Lab’s creators have plans to offer commercial extensions eventually, but at this stage they are focusing on solving the problem for users in the free plugin.

“Once we better understand what folks are needing, we’ll find a way of gracefully offering premium stuff,” Stinson said.

There are still many unknowns about how the larger community of WordPress users will react to the upcoming 5.0 release, but Stinson is convinced that Gutenberg will have a positive impact on the plugin ecosystem and users’ experiences with extensions.

“Gutenberg is going to, ultimately, change things for the better in the plugin ecosystem,” he said. “There is no doubt it’s going to be bumpy for the first little while, but the net effect is that WordPress will have a better editing experience in general and one that gives plugin developers a stronger baseline for extending the editing experience. Even as we explore what we can do with Block Lab we’re discovering really cool things that we would never have thought of unless we just started using it. I think this will be the larger experience by most people in the WordPress community.”