Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Last active January 26, 2018 15:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ahmadawais/99cd74a5593a9295192adf118182b509 to your computer and use it in GitHub Desktop.
Save ahmadawais/99cd74a5593a9295192adf118182b509 to your computer and use it in GitHub Desktop.
CGB: create-guten-block old npm version npm <= 5.2 installation instructions.

If you use npm 5.2 or earlier, you can't use npx. Instead, install create-guten-block globally:

→ STEP #1

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

install cgb

It'll take a couple of minutes to install.

→ STEP #2

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 to WP Admin ▶︎ Plugins to activate.

create-guten-block my-block

cgb 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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment