With the release of Gutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 5.3, the @wordpress/scripts package was updated to include webpack and Babel configurations. The update makes setting up an ESNext development environment much easier for building blocks and creates a standard method for developers to set up their plugin.
Here is a quick overview of how to set up an environment. First, you need to install
npm install --save-dev @wordpress/scripts
You can then update the scripts section of your
package.json to include:
"start": "wp-scripts start",
"build": "wp-scripts build"
No webpack config (e.g.,
webpack.config.js) or Babel config (e.g.,
.babelrc) is needed.
The scripts expect the source file to be found at
src/index.js and will output the build to
build/index.js. So if you are migrating an existing plugin, you will need to move your source and enqueueing to these new locations.
With the setup in place, the standard workflow is:
- Install dependencies:
- Start development builds:
- Develop. Test. Repeat.
- Create production build:
npm run build
In general, the package should be used with the set of recommended config files. While it is possible to override every single config file provided, if you have to, it means that your use case is more complicated than anticipated. We’d love hearing about it as we’d like to iterate on the current setup and offer more flexibility in the future. At the moment, our recommendation would be to use the underlying tools (webpack, Babel) directly.
Props to @gziolo and @nosolosw for their efforts.