{"id":21614502,"url":"https://github.com/munaibh/gerbera","last_synced_at":"2026-04-09T12:03:11.691Z","repository":{"id":34923886,"uuid":"190809506","full_name":"munaibh/gerbera","owner":"munaibh","description":"An opinionated CLI to scaffold Gutenberg blocks that are easy to customize.","archived":false,"fork":false,"pushed_at":"2023-01-07T06:13:26.000Z","size":1509,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-17T23:19:37.912Z","etag":null,"topics":["boilerplate","gutenberg","nodejs","scaffolding","webpack","wordpress"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/munaibh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-07T21:13:46.000Z","updated_at":"2020-09-20T16:38:26.000Z","dependencies_parsed_at":"2023-01-15T10:31:13.318Z","dependency_job_id":null,"html_url":"https://github.com/munaibh/gerbera","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munaibh%2Fgerbera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munaibh%2Fgerbera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munaibh%2Fgerbera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/munaibh%2Fgerbera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/munaibh","download_url":"https://codeload.github.com/munaibh/gerbera/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124195,"owners_count":20401685,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","gutenberg","nodejs","scaffolding","webpack","wordpress"],"created_at":"2024-11-24T22:08:14.185Z","updated_at":"2025-12-30T20:06:45.061Z","avatar_url":"https://github.com/munaibh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eGerbera\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@gerbera/cli\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@gerbera/cli.svg\" alt=\"version\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/munaibh/gerbera/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/munaibh/gerbera.svg\" alt=\"issues\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#workflows\"\u003e\n    \u003cimg src=\"https://github.com/munaibh/gerbera/workflows/Gerbera%20Package/badge.svg\" alt=\"build\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/munaibh/gerbera.svg\" alt=\"license\"\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eAn opinionated CLI to scaffold Gutenberg blocks that are easy to customize.\u003c/b\u003e\u003cbr\u003e\n  \u003csub\u003eWhy? Because a good project structure is the hardest thing in life!\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/media/terminal-create.png\" alt=\"terminal example\" width=\"750\"\u003e\u003cbr\u003e\n  \u003csub\u003e(Examples shown use \u003ca href=\"https://carbon.now.sh\"\u003eCarbon\u003c/a\u003e)\u003c/a\u003e\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\nGerbera 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:\n\n* **Easy to use** - Only a few commands to get started!\n* **Lightweight** - One dependency, we handle building and generating new projects all in one place.\n* **Hot Reloading** - Leverage [webpack-dev-servers](https://github.com/webpack/webpack-dev-server) handy hot reloading capabilities to remove the need to refresh after every change.\n* **Docker** - Setting up wordpress can be a pain, so we optonally allow you use a docker image to speed up your workflow.\n* **Friendly Errors** - We use `react-dev-utils` to provide friendly errors messages.\n\nIf you like what we do, please consider starring or tweeting about this project to show your support. Thanks!\n\n\u003cbr\u003e\n\n## ❯ Getting started\n\nGet started with Gerbera, with a few simple terminal commands (windows support coming very soon!)\n\n* [Install](#-install)\n* [Usage](#-usage)\n  - [Block Creation](#-creation)\n  - [Development](#-development)\n  - [Building](#-building)\n* [Structure](#-structure)\n* [About](#-about)\n\n\u003cbr\u003e\n\n## ❯ Install\n\nInstall globally with [npm](https://www.npmjs.com/):\n\n```sh\n$ npm install @gerbera/cli --save\n```\nUse with [npx](https://yarnpkg.com/en/):\n\n```sh\n$ npx @gerbera/cli \u003ccommand\u003e\n```\n\n\u003csmall\u003e_(Requires Node.js 8.6 or higher. Please let us know if you need support for an earlier version by creating an [issue](../../issues/new).)_\u003c/small\u003e\n\n\u003cbr\u003e\n\n## ❯ Usage\n\n### Block Creation\n\nThe easiest way to get started with gerbera is to run the `create` command.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/media/terminal-create.png\" alt=\"terminal create\" width=\"750\"\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n```sh\n$ npx @gerbera/cli create example-block\ncd example-block\n```\n\n\u003csmall\u003e⚠️This example uses `npx`, but if you installed globally you can just use `npm`.\u003c/small\u003e\n\n\u003cbr\u003e\n\n### Development\n\nOnce everything is created, you can go into your folder and run the development script.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/media/terminal-serve.png\" alt=\"terminal serve\" width=\"750\"\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n```sh\n$ npm run serve \u003cparams\u003e\n```\n\u003cbr\u003e\n\n**Params**\n\n* `docker` **{String}**: (optional) Creates a docker instance with the wordpress imge.\n\n\u003cbr\u003e\n\n### Production \n\nTo produce production code run `npm run build`, which minifies and uglified code by default.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./docs/media/terminal-build.png\" alt=\"terminal build\" width=\"750\"\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n```sh\n$ npm run build\n```\n\n\u003csmall\u003eℹ️You will see the build messages, errors, and lint warnings in the console.\u003c/small\u003e\n\n\u003cbr\u003e\n\n## ❯ Structure\n\nWe 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.\n\n```\n├── client\n| ├── common\n| | └── common.scss\n| ├── example\n| | ├── components\n| | ├── scripts\n| | ├── styles\n| | ├── block.js\n| | ├── edit.js\n| | ├── inspector.js\n| | └── save.js\n| └── blocks.js\n├── server\n| └── blocks.php\n├── package-lock.json\n├── package.json\n└── plugin.php\n ```\n\n\n### Configuration File \n\nWe 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:\n\n```js\n{\n  name: String | Project Name\n  namespace: String | Desired Namespace\n}\n```\n\n\u003cbr\u003e\n\n## ❯ About\n\nThis 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](https://github.com/ahmadawais/create-guten-block) and [GutenBlock](https://github.com/zackify/gutenblock). ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunaibh%2Fgerbera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmunaibh%2Fgerbera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmunaibh%2Fgerbera/lists"}