Instantly share code, notes, and snippets.

Embed
What would you like to do?
OLD create-guten-block Getting Started

πŸ“¦ create-guten-block

create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.

Create Guten Block is not like other starter-kits or boilerplates. It's a developer's toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code.

create-guten-block is:

  • πŸ₯ž Versioned βœ“
  • 🀠 Updatable βœ“
  • πŸ—ƒ Set of sane-defaults βœ“
  • 🐎 ONE single cgb-scripts dependency βœ“

Start

GETTING STARTED!

It's really easy to get started with create-guten-block. Just install it as a global module and run it to create your next-gen Gutenberg block plugin for WordPress.

Let's get you started!

STEP #0 β€” If you don't have Node.js + npm installed then read this. (CLICK TO EXPAND!)

In case you are an absolute beginner to the world of Node.js, JavaScript, and npm packages β€” all you need to do is go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager β€” the command line interface of Node.js.

You can verify the install by opening your terminal app and typing...

node -v
# Results into v9.1.0 β€” make sure you have Node >= 8 installed.

npm -v
# Results into 5.6.0 β€” make sure you have npm >= 5.2 installed.

β†’ 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.

β†’ STEP #3

Once the installation is done, you can open your project folder and run the start script.

Let's do that.

cd my-block
npm start

You can also use yarn start if that's your jam

cgb-npm-start

This runs the plugin in development mode. To produce production code run npm run build. You will see the build messages, errors, and lint warnings in the console.

And just like that, you're building your next WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, transpiled with Babel, which also has ESLint configurations for your code editor to pick up and use automatically.


More

Workflow!

There are just three scripts that you can use in your create-guten-block workflow. With these three scripts, you can develop, build, and eject your plugin.

πŸ‘‰ npm start

  • Use to compile and run the block in development mode.
  • Watches for any changes and reports back any errors in your code.

πŸ‘‰ npm run build

  • Use to build production code for your block inside dist folder.
  • Runs once and reports back the gzip file sizes of the produced code.

πŸ‘‰ npm run eject

  • Use to eject your plugin out of create-guten-block.
  • Provides all the configurations so you can customize the project as you want.
  • It's a one-way street, eject and you have to maintain everything yourself.
  • You don't normally have to eject a project because by ejecting you lose the connection with create-guten-block and from there onwards you have to update and maintain all the dependencies on your own.

That's about it.

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