A lot has changed since the new block editor (codenamed Gutenberg) was launched with WordPress 5.0 in December of 2018. Building custom blocks is now easier than ever, thanks to three key enhancements that were introduced over the last two years:
The WordPress Scripts package is “a collection of reusable scripts tailored for WordPress development.” What that means in practice is that developers can install the @wordpress/scripts package and get a build system and linter without needing to maintain their own configurations for Webpack, TypeScript, Babel, ESLint, Stylelint, and a host of other technologies. This means that developers can focus on building new blocks rather than maintaining toolchains, and any bugfixes or updates to the toolchain can be obtained simply by applying the new version to a project.
The WordPress Create Block package was recently updated so that it can be used to create a new block inside of an existing plugin, rather than expecting each block to have its own plugin with its own set of dependencies. On the sites that Alley builds, which routinely involve several dozen custom blocks to support our designs and editorial workflow, it’s not practical to have each block live within its own plugin. The @wordpress/create-block package can be used to create a new plugin that comes preconfigured with wp-scripts, and can then be subsequently used to create new blocks within that plugin.
The confluence of these technology changes means that it is possible to create new blocks in a matter of minutes rather than hours.
Using the create WordPress plugin
Alley has put together a template repository on GitHub that leverages these technologies called Create WordPress Plugin. In addition to the technologies above, this freely available open-source template repository includes the following features:
- Continuous integration via GitHub Actions
- Unit tests powered by Mantle
- Autoloaded PHP files via Composer WordPress Autoloader
- A helper script for running create-block
- Extensions to wp-scripts to make it easier to add Slotfills and custom entries
- Full TypeScript support
Keeping technical debt at bay
Using these tools has made it easier to both create new blocks and keep our toolchains up to date. The new method of building blocks using block.json also results in being able to co-locate scripts and styles with block definitions and front-end output, which helps with code organization and ensures that we are only loading assets on the front-end when necessary. This new method of building features using the block editor has improved the developer experience while reducing the amount of time it takes for us to deliver enhancements to the editorial and user experience.
This post is a modified version of a talk that I gave at the WordPress Boston Meetup on April 24, 2023.
Looking for more ways to increase productivity? Check out the benefits of pair coding.