In this quick article, I want to go over how to create a custom Gutenberg Block using Blockstudio. Blockstudio is a modern and flexible block framework for WordPress. With the adoption of Gutenberg, the ability to rapidly create custom blocks is becoming more and more important. This is an incredibly easy method of creating them - and while you need to write code to do it, it's much simpler and efficient with BS (when compared to other methods).

This tool makes it easy to not only add the block, but generate custom fields (you have your choice of ACF Pro or Metabox Blocks), save information to the database, and apply in-line styles and scripts with ease.

Let's take a quick look at how we can make a custom Gutenberg block using this framework in under 5 minutes (PS - I've never made a custom block before).

The Process of Making A Block

For this website, I need an easy way to add custom code which would display on the frontend in an easy to understand interface.

For a few months, I've been using the SPX code block HTML element (this is what is used above). It's a really simple implementation, and something that is already installed on this website as I use SPX for some effects with Oxygen. However, SPX does not come with Gutenberg elements. Because it is an HTML element, I would insert an HTML box into Gutenberg, and then implement the code display like so:

It worked, but I wanted a dedicated code block for Gutenberg. So, I used Blockstudio + ACF to make this:

(this is the block I'm using in Gutenberg to insert the code blocks into this post)

My new block essentially provides a visual GUI to insert the code as I was doing with HTML. But, this block makes it easier to manage, and also offers a cool code editor field directly in Gutenberg.

Here's how it was done:

First, I installed Blockstudio (plugin) on the Isotropic. Typically, it will look for a folder within your theme to load your custom block files. However, Oxygen Builder which is what this website is built on, completely disables the theme, so I needed to create a custom plugin from this official boilerplate for it to work on this website.

If you install it from that source, all you need to do is begin to add blocks to the "Blocks" folder - and there's already a demo block in there for you to try out.

The process of creating a block using this framework has 3 steps - set it up, add the fields, and then add the markup.

For me, I made a file called iso-custom-code.php in the Blocks folder, and inserted the following code (pretty simple!):

The initial chunk of code gives Gutenberg all of the information it needs for registering the block in the editor. For example, you can give it a title and an icon. From there, I added two custom fields. The first is a radio field which you can use to select the type of code. The second field is a code editor field.

This is not a standard ACF field, but a third-party addon that uses the general ACF method to add a custom fields type. What's really cool about Blockstudio is that this custom field worked out of the box, and displays directly in the Gutenberg editor.

It's worth noting, that you're actually registering the custom fields directly in this block. You can choose to apply a field group to a post type, but there is no need to go into the ACF user interface and create any fields there, as it is done in the second chunk of this code.

Fields are added the same way you would do it with normal PHP, and the documentation is relatively easy to understand. You probably don't even need to know this programming language to be able to figure it out - https://www.advancedcustomfields.com/resources/register-fields-via-php/

The actual markup is just a standard HTML and PHP insert of a custom ACF field. And once it is saved, the custom Gutenberg Block will show in the editor, and render on the front end. There's absolutely no bloat here, and the mark up that is defined in the custom block file is the mark up that will show on the front end of the website.

The final benefit is that you can use the native Gutenberg features as the blocks you make are real Gutenberg blocks. You can copy and paste, make reusable, and more. Reasonably, you could build an entire website using this tool in Gutenberg alone. There's no vendor lock in as well.

Thoughts on BlockStudio

Personally, I'm using Gutenberg to manage, structure, and build all of the blog posts on this website. However, for the overarching site design and templating, Oxygen Builder is used.

Blockstudio comes with a library of a few well built blocks that you can use as starting points for your own creations. This is really cool because it gives you a ton of code examples that you can then used to modify into what you're looking to build. Of course, it's a framework and understanding the underlying PHP and how it works will make your life a lot easier, but in my opinion you don't need to know it to be able to build blocks with this tool. All you need to know is how to copy and paste from various documentations, examples, and sources.

Both the ACF and Blockstudio documentation is incredibly well written, and easy to follow. And if you're more familiar with the MetaBox custom field plugin, that one will work just as well.

I think that the price is justified for the flexibility and power of this tool. I just recently began using it, and I'm excited to try out the advanced features like Twind and Alpine.