Configuration setup for Gutenberg Block Development

We know WordPress 5 comes with the default Gutenberg editor which is ⚡️crafted with React Js. So if you are thinking to develop Gutenberg Block plugin then surely you have at least familiar with ReactJs and the NodeJs packages that are used to develop the WordPress plugin.

If you are the novice then it is a bit hard 🤦‍♂️ for you to start with creating Gutenberg Block plugin. But don’t worry about the configuration. We are going to using create-guten-block toolkit. By using create-guten-block toolkit you don’t need to worry about the setup of React, Webpack, Babel, ES6/7/8/Next etc.

How to create Gutenberg Block

Before starting, make sure you have installed Nodejs and npm on your system. If not installed, then install them before starting your plugin development.

It is very easy to start with create-guten-block

npx create-guten-block my-block

Don’t confuse with the command npx. Yes you read that right, It is npx not npm. Go through the difference between npx and npm for more detail. Make sure your run this command on wptest.local/wp-content/plugins/ directory, where wptest.local is my WordPress project directory.

Above command will create a plugin my-block directory on your plugins directory. If you want to check the my-block plugin, then go the admin panel > plugin directory and activate the my-block plugin. Then visit to create any post/page and check if the block is exists or not. The my-block plugin is looks like the below screenshot.

Now go to the my-block directory and run npm start.

cd my-block
npm start

Now start working on src/block/block.js file.