Skip to content

Commit 97a75cc

Browse files
author
Ahmad Awais
committed
📖 DOC: Getting Started Guide
1 parent e4ba933 commit 97a75cc

2 files changed

Lines changed: 120 additions & 49 deletions

File tree

‎README.md‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,119 @@
1+
![CGB-logo](http://on.ahmda.ws/orxb/c)
2+
3+
<table width='100%'>
4+
<tr>
5+
<td align='left' width='100%' colspan='2'>
6+
<strong><code>create-guten-block</code></strong><br />
7+
A zero-configuration developer toolkit for building WordPress Gutenberg block plugins with React, Webpack, ES 6/7/8/Next, ESLint, Babel, etc.
8+
</td>
9+
</tr>
10+
<tr>
11+
<td>
12+
A FOSS (Free & Open Source Software) project developed by Ahmad Awais. <br/><small> 🙌 Follow Ahmad on GitHub (<a href='https://github.com/ahmadawais'>@AhmadAwais</a>) OR 👋 Say Hi on Twitter (<a href="https://twitter.com/mrahmadawais/">@MrAhmadAwais</a>).</small>
13+
</td>
14+
<td align='center'>
15+
<a href='https://AhmadAwais.com/'>
16+
<img src='https://i.imgur.com/Asg4d3k.png' width='100' />
17+
</a>
18+
</td>
19+
</tr>
20+
</table>
21+
22+
# 📦 Create-Guten-Block
23+
24+
Create-Guten-Block is _zero configuration dev-toolkit_ through which you can start developing WordPress Gutenberg block in a matter of minutes. It's not like other starter-kits or boilerplates. It's a versioned, updateable, sane-defaults CLI utility which is constantly updated.
25+
26+
## 👌 GETTING STARTED!
27+
28+
It's really easy to get started with `create-guen-block`. Just install it as a global module and you're in business. Let's start by doing that.
29+
30+
31+
<details>
32+
<summary><strong>Step #0</strong> — If you don't have node installed then read this. (CLICK TO EXPAND!)</summary>
33+
34+
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 and 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.
35+
</details>
36+
37+
### ▶ Step #1
38+
39+
Install `create-guen-block` globally on your system. Make sure you are using at least Node >= 8. You can use nvm to use different versions of Node at the same time.
40+
41+
```sh
42+
npm install --global create-guen-block
43+
```
44+
45+
### ▶ Step #2
46+
47+
Now all you have to do is create a gutenberg block and start building. It's done by running `create-guen-block` and providing it with a unique name for a WordPress plugin that will get created.
48+
49+
```sh
50+
create-guen-block my-block
51+
```
52+
53+
> Make sure you have some sort of local WordPress install ready and run this command in your `https://site.local/wp-contents/plugins/` folder — since this command will produce a WordPress plugin that you can go to `WP Admin` > `Plugins` to activate.
54+
55+
56+
### ️▶ STEP #3
57+
58+
From here on out you can browse your plugin and run the start script. Let's do that.
59+
60+
```sh
61+
cd my-block
62+
npm start
63+
```
64+
65+
And just like that you're buidling your next WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, transpiled with Babel, which also has ESLint cofigurations for your code editor to automatically pick up and use.
66+
67+
### ✅ More Scripts!
68+
69+
There are just three scripts that you can use.
70+
71+
72+
#### 👉 `npm start`
73+
- Used to compile and develop your block.
74+
- Watches for any changes and reports back any errors in your code.
75+
<!-- --- -->
76+
77+
#### 👉 `npm run build`
78+
- Used to build production code for your block.
79+
- Runs once and reports back the gzip filesizes of produced code.
80+
81+
<!-- --- -->
82+
83+
#### 👉 `npm run eject`
84+
- Used to eject your plugin out of `create-guen-block`.
85+
- Provides all the configurations so you can customize the project as you want.
86+
- It's a one way street, `eject` and you have to maintain everything yourself.
87+
88+
<!-- --- -->
89+
90+
That's basically it.
91+
92+
## 🔥 Why `create-guen-block`?
93+
94+
Well, it's really hard and it takes a lot of time to configure things like Webpack, React, ES 6/7/8/Next, ESLint, Babel, etc. before you even start writing a Hello World gutenberg block. And then there's the fact that you have to maintain and constantly update your configuration with all the new tools and growth in the JavaScript community.
95+
96+
`create-guen-block` hides all this configuration away in an optimized pacakge that we call `cgb-scripts`. That package is the only dependency in your projects. We keep `cgb-scripts` up to date while you go ahead and create the next best WordPress themes and plugins.s
97+
98+
## 🎯 TL;DR
99+
100+
>Too long, didn't read? Here's a shroter version.
101+
102+
- Install: `npm install --global create-guen-block`
103+
- Create: `create-guen-block my-block`
104+
- Browse: `cd my-block`
105+
- Run: `npm start` | `npm run build` | `npm run eject`
106+
107+
108+
109+
110+
---
111+
112+
113+
114+
115+
116+
1117

2118
> **[WORK-IN-PROGRESS] Stricly, WIP at the moment. Do NOT use it or announce, share it anywhere until I remove this notice and release it to the public.**
3119

‎packages/create-guten-block/README.md‎

Lines changed: 4 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,7 @@
1+
# Create-Guten-Block
12

2-
> **[WORK-IN-PROGRESS] Stricly, WIP at the moment. Do NOT use it or announce, share it anywhere until I remove this notice and release it to the public.**
3+
This package includes the global command for [Create Guten Block](https://github.com/ahmadawais/create-guten-block).<br>
34

4-
# Create-Guten-Block [WIP]
5+
Create-Guten-Block is a zero configuration dev-toolkit through which you can start developing WordPress Gutenberg block in a matter of minutes. It's not like other starter-kits or boilerplates. It's a versioned, updateable, sane-defaults CLI utility which is constantly updated.
56

6-
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/)
7-
8-
Create WordPress Gutenberg blocks with no build configuration.
9-
10-
Create-Guten-Block has been tested to work on macOS, but must also work on Windows, and Linux.
11-
If something doesn’t work, please file [an issue](https://github.com/ahmadawais/create-guten-block/issues/new).
12-
13-
## Quick Overview
14-
15-
Go to your local WordPress installation and then in to the `wp-content/plugins` folder. As the `create-guten-block` cli will create a new ready to use WordPress plugin.
16-
17-
```shell
18-
npm create-guten-block my-block
19-
cd my-block
20-
npm run dev
21-
```
22-
23-
![Create-guten-block](http://on.ahmda.ws/okiU/c)
24-
25-
Then open your WordPress installation with Gutenberg plugin active and activate the `CGB: my-block Gutenberg Block` plugin you just created.
26-
When you’re ready to deploy to production, create a minified bundle with `npm run build`.
27-
28-
## Get Started Immediately
29-
30-
You don’t need to install or configure tools like Webpack or Babel.
31-
They are preconfigured so that you can focus on the code.
32-
33-
Just create a project, and you’re good to go.
34-
35-
## Changelog
36-
37-
### VERSION 2.0.0
38-
39-
Work in progress.
40-
41-
### VERSION 1.0.0
42-
43-
- ⚡️ NEW: NPM Module `create-guten-block`
44-
- ⚡️ NEW: Create WordPress plugin folder
45-
- ⚡️ NEW: Building WordPress plugin files
46-
- ⚡️ NEW: Build custom Gutenberg Block
47-
- ⚡️ NEW: Basic Webpack configurations
48-
- ⚡️ NEW: Dynamic WP Pluing and Gutenberg Block Names
49-
50-
### Docs Init
51-
52-
- Install globally `npm install --global create-guten-block` (Run the same command again to update).
7+
Kindly, read the up to date documentation at this link → [Create Guten Block](https://github.com/ahmadawais/create-guten-block)

0 commit comments

Comments
 (0)