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 toolkit. By using create--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 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-blockDon’t confuse with the command . you read that right, It is not . Go through the difference between and for more detail. Make sure run this command on .local/wp-content/plugins/ directory, where .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 startNow start working on src/block/block.js file.