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:
1. block.json
WordPress now lets you describe your custom block using a special JSON schema. By specifying the configuration of your block in a JSON file, you can register the block for both the editor (in JavaScript) and the server (in PHP) while only maintaining one configuration file for block settings and attributes. Furthermore, there is a new helper function that registers a block simply by passing in the path to a block.json file, allowing you to write code that scans a directory for blocks and automatically registers them, thereby cutting down on the amount of developer time needed to add a new block to a site.
2. wp-scripts
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.
3. create-block
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
- JavaScript linting provided by Alley’s extensions to the Airbnb standard
- JavaScript unit testing using Jest
- 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.