How To Create Custom Blocks for Gutenberg with Block Lab

Of all the amazing things the new block editor (aka Gutenberg) for WordPress can do, the ability to create custom blocks is right at the top of the list. This feature allows developers to tightly integrate their own content and layouts within the editor in a standardized way.

While we lose a little bit of flexibility in terms of what we can do with the edit screen, we gain a more consistent UI. This can be a big help when training clients to use WordPress. Plus, it just looks cleaner than the Classic editor.

Among all this great news is a bit of a catch: The default way to build a custom block requires that you wade knee-deep in JavaScript. Specifically, WordPress uses the React.js library to power this interface. It’s incredibly dynamic, yet features a fairly steep learning curve for those of us who primarily work with PHP.

But you can always rely on the WordPress community for creative solutions. Today, we’re going to look at one alternative that aims to simplify the block creation process (even taking JavaScript out of the equation). This helps to empower more developers to take part in Gutenberg’s killer feature.

Now, let’s see how it’s done!

Building with Block Lab

Block Lab is a free WordPress plugin that brings a familiar visual approach to building custom editor blocks. Most of the build process is done on a single page within the WordPress admin. The only time you’ll need to touch code is when creating a template for your new block.

Once you’ve installed and activated the plugin, visit Block Lab > Add New. From there, give your custom block a name, icon, category and keywords.

Next, it’s time to create some custom fields. You have a fairly wide selection of field types to choose from, including text, URL, email, number and toggles. Plus, you can provide extras like instructions, default values and placeholder text. Be sure to note the Field Name of any custom fields you create, as you’ll need them later on.

Multiple custom fields can be added to a block, and there’s no hard limit. However, it’s worth noting that early versions of the plugin don’t offer more advanced field types, such as image uploads (although, you can provide the URL of an existing image) or WYSIWYG editors. Therefore, Block Labs is best suited for text-based data. That could change, though, as the plugin is in active development.

Once you’ve got everything set up the way you want it, save your custom block. Doing so will provide you with a custom path and file name where the plugin will look for your custom block template. It’s up to you to create the template file and save it to the correct place.

Block templates can be as simple or as complex as you like. The only requirement is that you add a bit of PHP code for each custom field you created. This is where you’ll need the aforementioned Field Names.

As an added bonus, you can create what are called preview templates. This is a separate version of your custom block that you can tweak for display within the editor itself. Here, we’ll just stick to one universal template for our alert block:

<div class="alert"><?php block_field( 'alert-message' ); ?></div>

Now that our template is configured, it’s time to see it in action! We’ll head on over to the Pages area of WordPress and choose a page to edit. Inside the editor, the block is waiting for us:

Next, we’ll add an attention-grabbing message and save the page.

After having added some basic CSS to our theme’s stylesheet, our can’t-miss alert is now informing visitors of our situation.

Just like any other Gutenberg block, we can add our alert anywhere within any page or post we choose. This enables us to take full advantage of the editor’s flexible nature.

Custom Blocks, The Easy Way

As Gutenberg matures, developers will undoubtedly find more interesting things to do with custom blocks. We can only imagine some of the high-end functionality that will be built in the coming years.

However, there’s also something to be said for tools like Block Lab that bring custom block capabilities to a wider audience. Not everyone’s going to become a React expert. Therefore, the ability to quickly and painlessly create these more basic integrations with the editor are crucial for Gutenberg’s long-term success.

The post How To Create Custom Blocks for Gutenberg with Block Lab appeared first on Speckyboy Web Design Magazine.