Gerbera

An opinionated CLI to scaffold Gutenberg blocks that are easy to customize.
_{Why? Because a good project structure is the hardest thing in life!}

_{(Examples shown use Carbon)}

Gerbera is a highly opinionated take on Gutenberg project structure and automates a lot of the menial tasks like scaffolding, so you don't have to. This package is useful for:

• Easy to use - Only a few commands to get started!
• Lightweight - One dependency, we handle building and generating new projects all in one place.
• Hot Reloading - Leverage webpack-dev-servers handy hot reloading capabilities to remove the need to refresh after every change.
• Docker - Setting up wordpress can be a pain, so we optonally allow you use a docker image to speed up your workflow.
• Friendly Errors - We use react-dev-utils to provide friendly errors messages.

If you like what we do, please consider starring or tweeting about this project to show your support. Thanks!

❯ Getting started

Get started with Gerbera, with a few simple terminal commands (windows support coming very soon!)

• Install
• Usage
  • Block Creation
  • Development
  • Building
• Structure
• About

❯ Install

Install globally with npm:

$ npm install @gerbera/cli --save

Use with npx:

$ npx @gerbera/cli <command>

(Requires Node.js 8.6 or higher. Please let us know if you need support for an earlier version by creating an issue.)

❯ Usage

Block Creation

The easiest way to get started with gerbera is to run the create command.

$ npx @gerbera/cli create example-block
cd example-block

⚠️This example uses npx, but if you installed globally you can just use npm.

Development

Once everything is created, you can go into your folder and run the development script.

$ npm run serve <params>

Params

• docker {String}: (optional) Creates a docker instance with the wordpress imge.

Production

To produce production code run npm run build, which minifies and uglified code by default.

$ npm run build

ℹ️You will see the build messages, errors, and lint warnings in the console.

❯ Structure

We generate a default project structure that we feel fits our needs (and maybe yours too). A well nested project strcuture which handles css, js and of course react components.

├── client
| ├── common
| | └── common.scss
| ├── example
| | ├── components
| | ├── scripts
| | ├── styles
| | ├── block.js
| | ├── edit.js
| | ├── inspector.js
| | └── save.js
| └── blocks.js
├── server
| └── blocks.php
├── package-lock.json
├── package.json
└── plugin.php

Configuration File

We create a config file called gerbera.config.js which contains various information we use to automate the webpack builds (e.g. creating js files to enqueue scripts). An example is below:

{
  name: String | Project Name
  namespace: String | Desired Namespace
}

❯ About

This project was an excuse for me to learn about: creating a node cli, publising to npm, writing to files and piping and in general learn from other useful packages. Inspired by CreateGutenBlock and GutenBlock.