If you use npm 5.2 or earlier, you can't use npx
. Instead, install create-guten-block
globally:
Install create-guten-block
globally on your system.
You’ll need to have Node >= 8 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.
npm install create-guten-block --global
It'll take a couple of minutes to install.
Now all you have to do is create a gutenberg block and start building. It's done by running the create-guten-block
command and providing it with a unique name for a WordPress plugin that will get created.
⚠️ Make sure run this command in your local WordPress install's plugins folder i.e./local_dev_site.tld/wp-content/plugins/
folder — since this command will produce a WordPress plugin that you can go toWP Admin
▶︎Plugins
to activate.
create-guten-block my-block
It will create a directory called my-block
inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
INSIDE: /local_dev_site.tld/wp-content/plugins/my-block
├── plugin.php
├── package.json
├── README.md
|
├── dist
| ├── blocks.build.js
| ├── blocks.editor.build.css
| └── blocks.style.build.css
|
└── src
├── block
| ├── block.js
| ├── editor.scss
| └── style.scss
|
├── blocks.js
├── common.scss
└── init.php
No configuration or complicated folder structures, just the files you need to build your app.
Now follow the Step #3
...