Gutenberg Wordpress

Setting up a block

Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress/package to work with the webpack and Babel libraries, without too much hassle.

Alternative: Advanced Custom Fields Pro

A month after I wrote the first version of this post it turns out that for most blocks developing with React/ES6 is too time consuming, and for ‘daily use’ I turned to Advanced Custom Fields Pro. I tried Block Lab (free version) too, which works fine also, and may even be easier to work with than ACF.

Steps in short

Assumed Node.js and npm are installed, enter

mkdir new-block
cd new-block
npm init

Next install the WordPress packages and all their dependencies. This may take a while.

npm install --save-dev --save-exact @wordpress/scripts

Add the following code to package.json:

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"

To start watching files and building the JavaScript while developing your block, type

npm start

To create the production code, enter the command

npm run build

Trouble shooting

When continuing development after an interruption, I often forget to restart watching/compiling with npm start and wonder why any change in the code fails to make any change in the output.