WebDevStudios released its custom block scaffolding tool to the public on Tuesday. It is a fork of the core WordPress script, which was rolled out in February alongside Gutenberg 7.4. The goal is to allow plugin developers to get started building without all the tedious setup required to build even the most basic block.
The script is available as an npm package titled @webdevstudios/block. One of the differences between the core package and this one is the addition of the WebDevStudios custom CSS, JavaScript, and PHP coding standards. It makes use of the WDS Block Starter project to build out the initial block plugin. The package also includes support for Sass, PostCSS, Webpack, Babel, and ESLint.
“One major difference is that WDS’s block scaffolding tool requires a PHP namespace,” said Michael Joseph Panaga, backend engineer at WebDevStudios. “WP core’s does have a –namespace option on its scaffolding tool, but it’s only used as the block’s internal namespace and not PHP’s.”
Panaga also pointed out that it is not as easy to customize the build setup when beginning with core’s starter. “In WDS’s, the webpack.config.js is just right there making it easy for developers to pretty much do what they want to do with it,” he said.
This script is primarily for building single-block plugins rather than building blocks within an existing plugin. Ideally, this will be the route that many plugin developers take over the long term, particularly as the block directory becomes a more important part of WordPress.
“WordPress block development can be daunting,” wrote Panaga in the announcement. “It’s already intimidating enough that you need to know ReactJS, you also need to install and configure tools like webpack, Babel, and ESLint.”
The tool requires the latest versions of Node and npm to get started, which most WordPress developers should already have in their development environments. From the command line, developers merely need to move to their wp-content/plugins folder and run the following command:
npm init @webdevstudios/block [Namespace]/[BlockName]
That will create a working plugin based on the BlockName input. It will come complete with all the necessary files and folders to hop straight into development. By default, the plugin will create what is essentially a custom paragraph block as a starting point.
Plugin folders and files created after installation.
The package includes several commands out of the box for developers to use for building their custom block:
- npm run start – Automatically builds and compiles files as changes are made in development.
- npm run build – Builds the final code for production.
- npm run lint:css – Runs linting on the plugin’s CSS files.
- npm run lint:js – Runs linting on the plugin’s JavaScript files.
- npm run lint:php – Runs linting on the plugin’s PHP files.
The script is simple to use, even for a novice block developer. After a few minutes of letting it install the necessary dependencies and beginning the build process, I was up and running with my new “Tavern Box” block. I cracked open my code editor, made a few cosmetic changes, and gave it a test in the editor.
Testing custom block in the editor.
With several tools for jump-starting the block-building process now floating around the WordPress community, there is little reason for plugin developers to not be exploring new block ideas. I might even try my hand at something more complex than the basic colored box I ran with this test (feel free to shoot some ideas in the comments).
