Create-block for Gutenberg in WordPress

Make sure the node version is the latest LTS or the one recommended in the Gutenberg documentation. Gutenberg Node JS Development Environment

nvm install v20.11.0 or nvm use v20.11.0
npx @wordpress/create-block block_name

After it has been installed (and you made sure it uses the latest version of node), run the following command:

npm start

If node_modules isn’t installed, run the following command:

npm install

To add a functionality where you can drag and drop and rearrange blocks within your Gutenberg blocks you can use sortable hoc

npm i react-sortable-hoc --force

To save the Gutenberg block so you can use it on another website, use below. Run plugin-zip is only useful to upload to the live website.

zip -r my-archive.zip my-folder -x "my-folder/node_modules/*"

If you made changes to a block and you need to upload the updated plugin, you need to zip the plugin files before uploading it to the live website.

npm run plugin-zip