Today, Jeffrey Carandang released WP Block Builder, an npm script for developers to begin building WordPress blocks. It is just one of many such scripts in a sea of block scaffolding tools, but Carandang may just have the experience and clout to rise above the rest. Thus far, developers have downloaded his custom setup over 500 times.
Developers wanting to take a peek under the hood can also check out the project on GitHub.
It is almost impossible to dive into building blocks for WordPress without coming across some of Carandang’s work in the WordPress block space. He launched the ShareABlock community late last year. He has paved the way for other developers by experimenting with ideas in EditorsKit. He co-founded CoBlocks, which GoDaddy acquired in 2019. And, that’s just the tip of the Iceberg — yeah, he is involved in that too.
Now, he has decided to launch a block-building script in a field that is becoming increasingly crowded. Core WordPress has its own script. WebDevStudios recently launched a custom fork of that, and several others are floating around the WordPress ecosystem, each with slightly different takes on jump-starting the block-building process. However, when one of the experts in the world of WordPress blocks releases his own spin on getting developers set up, it is at least worth looking into.
“I initially created this tool for myself because I kept repeating similar processes when creating Gutenberg blocks plugins,” said Carandang. “Then upon building it out, I thought it would be helpful to others if I release this to the public since, with minimal configuration, it would be easier to just focus on building blocks. Based on my experience, setting up the webpack config takes time and is sometimes frustrating.”
Carandang has a plethora of experience in building blocks, so I am certain he has added all the small extras that help speed the development process along.
Unlike many similar scripts, WP Block Builder provides two example blocks by default. One is for handling the typical static content that is common with such scripts. However, the second is a dynamic, server-side block. This gives developers a taste of building two different block types with two sets of requirements to run. Other scripts also tend to be hyper-focused on launching a single-block plugin, which would be typical for releasing to the WordPress block directory. WP Block Builder provides a path to launching a plugin with multiple blocks if desired.
“My goal is to make it easy for first-time block developers to create a block, but I’ve also created a sample dynamic block for advanced users,” said Carandang. “This will provide a good playground for experimenting and familiarizing with each section of the block.”
Carandang wants developers to be able to dive directly into building blocks. He wants to bring some of the fun back to experimenting without the technology getting in the way, which often means hours wasted just getting the build tools in place.
“I’m gearing towards that feeling I had when I first started creating a WordPress theme,” he said. “Those times when I was changing codes to know how they work and confident enough that I could just install it freshly again if I ended messing it up.”
Carandang said he has not received any reported issues yet, so launch day is going off without a hitch. He is looking forward to seeing what blocks developers build in the future based on his setup.
“It’s aimed to be general enough to help developers to get started on creating block plugins immediately,” he said. “I’m still waiting for some feedback to help improve the process, but so far it seems to be doing good.”
Setting Up a Block Plugin
WP Block Builder is a fork of the core WordPress Create Block script. It includes a few extra npm packages, but it is also heavy on installing several PHP packages via Composer. These are primarily for making sure developers are following coding standards.
Setup is simple. Developers merely need to run the npx wp-block-builder command to kick start the process. Upon running the command, WP Block Builder takes developers through a series of questions, which sets up the following fields:
- Block slug
- Namespace
- Block title
- Description
- Author name
- Plugin license
- Version number
After installation, the plugin will have two blocks ready for experimentation. The first block is a basic container with text and background color settings. It also supports wide and full alignment. It works similarly to the core WordPress Group block. I prefer this starting point over the standard paragraph block.
The second block is a dynamic posts list. It offers enough complexity to see how dynamic blocks work while using a concept familiar enough for most WordPress developers to grasp: querying and looping through posts. The block has a single custom option for changing the number of posts.
The goal for making these two blocks available is to get plugin developers jumping head first into the code. Break things. Experiment. Study the code.
Long term, Carandang is hopeful the process will become even better for developers. “I’m in touch with Grzegorz Ziółkowski and Fabian Kägy from the Gutenberg team,” he said,” and they are creating a better way to support external npm packages directly with @wordpress/create-block. This would be helpful in both Block Builder and Gutenberg, and would help in improving the Gutenberg plugin development ecosystem.”
