WordPress 5.2 introduced several noteworthy changes, including a higher minimum PHP requirement, the new wp_body_open hook, and some security improvements. It also highlighted an updated tool called @wordpress/scripts.
In simple terms, @wordpress/scripts is a build tool package for Gutenberg block development. If you want the fuller background, it is worth reading the Gutenberg handbook article about JavaScript build setup.
Gutenberg supports both ES5 and ESNext JavaScript syntax. ES5 can run directly in supported browsers, which makes it convenient for simple work.
In many situations, developing Gutenberg features in ES5 is perfectly fine. But when the JavaScript codebase becomes larger, ESNext can reduce code verbosity and make the code easier to maintain.
The updated @wordpress/scripts package includes webpack and Babel configuration out of the box. That means you no longer have to build those toolchains from scratch just to start developing Gutenberg blocks.
How to use @wordpress/scripts
First, install the @wordpress/scripts package:
npm install --save-dev @wordpress/scriptsThen update package.json and add the following script definitions:
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build"
}When you run those commands, wp-scripts looks for src/index.js and outputs the compiled build to build/index.js. With that in place, the Gutenberg development workflow is usually:
- Install dependencies with
npm install. - Start the development build with
npm start. - Develop and test the block.
- Create the production build with
npm run build.
If you want to try it in practice, open one of the official Gutenberg example projects and build it with the steps above.
The point of @wordpress/scripts is to provide a zero-config, ready-to-use build tool for Gutenberg development. And if you need more advanced behavior, you can still extend things with custom webpack or Babel configuration later.
