You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: readme.md
+21-21Lines changed: 21 additions & 21 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,11 +5,8 @@
5
5
<br>
6
6
<br>
7
7
8
-
9
8
[](https://www.npmjs.com/package/create-guten-block) [](https://www.npmjs.com/package/create-guten-block) [](https://github.com/ahmadawais/Emoji-Log/) [](https://twitter.com/mrahmadawais/) [](https://github.com/ahmadawais/create-guten-block/stargazers) [](https://github.com/ahmadawais?tab=followers) [](https://VSCode.pro "This open source project is supported by VSCode.pro")
10
9
11
-
12
-
13
10
<tablewidth='100%'align="center">
14
11
<tr align='center'>
15
12
<td align='center' width='100%' colspan='2'>
@@ -32,7 +29,6 @@
32
29
33
30
</div>
34
31
35
-
36
32
<br>
37
33
38
34
# π¦ `create-guten-block`
@@ -42,6 +38,7 @@
42
38
Create Guten Block is not like other [starter-kits](https://github.com/ahmadawais/wpgulp) or [boilerplates](https://github.com/ahmadawais/Gutenberg-boilerplate). 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.
43
39
44
40
`create-guten-block` is:
41
+
45
42
- π₯ Versioned β
46
43
- π€ Updatable β
47
44
- π Set of sane-defaults β
@@ -58,17 +55,17 @@ Let's create a WordPress block plugin...
58
55
#### β‘οΈ Quick Overview
59
56
60
57
Run step `#1` and `#2` quickly in one go β Run inside local WP install E.g. `/wp.local/wp-content/plugins/` directory.
58
+
61
59
```sh
62
60
npx create-guten-block my-block
63
61
cd my-block
64
62
npm start
65
63
```
66
-
([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/ahmadawais/e4c69b22561c7079c9d99faba90e3b23))
67
64
65
+
([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/ahmadawais/e4c69b22561c7079c9d99faba90e3b23))
68
66
69
67
> π _If you want to study the detailed installation of step `#1` and `#2` β then take a look at the steps below_.
70
68
71
-
72
69
<details>
73
70
<summary><strong> STEP #0</strong> β Don't have <code>Node.js</code> + <code>npm</code> installed? Read this. (CLICK TO EXPAND!)</summary>
74
71
@@ -90,12 +87,12 @@ npm -v
90
87
91
88
All you have to do is run the following command and it will create a WordPress block plugin. It's done by installing and running the `create-guten-block` command and providing it with a unique name for a WordPress plugin that will get created.
92
89
93
-
94
90
> β οΈ 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.
95
91
96
92
```sh
97
93
npx create-guten-block my-block
98
94
```
95
+
99
96
([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/ahmadawais/e4c69b22561c7079c9d99faba90e3b23))
No configuration or complicated folder structures, just the files you need to build your app.
134
132
135
133
### β STEP #2
@@ -142,6 +140,7 @@ _Let's do that._
142
140
cd my-block
143
141
npm start
144
142
```
143
+
145
144
_You can also use `yarn start` if that's your jam_.
146
145
147
146

@@ -160,14 +159,17 @@ You will see the build messages, errors, and lint warnings in the console.
160
159
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.
161
160
162
161
#### π `npm start`
162
+
163
163
- Use to compile and run the block in development mode.
164
164
- Watches for any changes and reports back any errors in your code.
165
165
166
166
#### π `npm run build`
167
+
167
168
- Use to build production code for your block inside `dist` folder.
168
169
- Runs once and reports back the gzip file sizes of the produced code.
169
170
170
171
#### π `npm run eject`
172
+
171
173
- Use to eject your plugin out of `create-guten-block`.
172
174
- Provides all the configurations so you can customize the project as you want.
173
175
- It's a one-way street, `eject` and you have to maintain everything yourself.
@@ -183,35 +185,34 @@ _That's about it._
183
185
184
186
Your environment will have everything you need to build a modern next-gen WordPress Gutenberg plugin:
185
187
186
-
* React, JSX, and ES6 syntax support.
187
-
* webpack dev/production build process behind the scene.
188
-
* Language extras beyond ES6 like the object spread operator.
189
-
* Auto-prefixed CSS, so you donβt need `-webkit` or other prefixes.
190
-
* A build script to bundle JS, CSS, and images for production with source-maps.
191
-
* Hassle-free updates for the above tools with a single dependency `cgb-scripts`.
188
+
- React, JSX, and ES6 syntax support.
189
+
- webpack dev/production build process behind the scene.
190
+
- Language extras beyond ES6 like the object spread operator.
191
+
- Auto-prefixed CSS, so you donβt need `-webkit` or other prefixes.
192
+
- A build script to bundle JS, CSS, and images for production with source-maps.
193
+
- Hassle-free updates for the above tools with a single dependency `cgb-scripts`.
192
194
193
195
The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://github.com/ahmadawais/create-guten-block#--npm-run-eject) and customize it, but then you will need to maintain this configuration.
194
196
195
-
196
197
<br>
197
198
198
199

199
200
200
201
## Philosophy
201
202
202
-
***One Dependency:** There is just one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
203
+
-**One Dependency:** There is just one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
203
204
204
-
***No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
205
+
-**No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
205
206
206
-
***No Lock-In:** You can `eject` to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
207
+
-**No Lock-In:** You can `eject` to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
207
208
208
209
<br>
209
210
210
211

211
212
212
213
## Why `create-guten-block`?
213
214
214
-
Well, it's really hard to configure things like webpack, React, ES 6/7/8/Next, ESLint, Babel, etc. before you even start writing a Hello World gutenberg block. 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.
215
+
Well, it's really hard to configure things like webpack, React, ES 6/7/8/Next, ESLint, Babel, etc. before you even start writing a Hello World Gutenberg block. 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.
215
216
216
217
`create-guten-block` hides all this configuration away in an optimized package that we call `cgb-scripts`. This 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.
217
218
@@ -280,7 +281,6 @@ Nothing's ever complete, so bear with us while we keep iterating towards a bette
280
281
> ```
281
282
> ... _listen to β [A million dreams!](https://www.youtube.com/watch?v=pSQk-4fddDI)_
282
283
283
-
284
284
<br>
285
285
286
286

@@ -327,8 +327,8 @@ This FOSS (free and open source software) project is updated and maintained with
<p><ahref="https://github.com/ahmadawais"><imgalt="GitHub @AhmadAwais"align="center"src="https://img.shields.io/badge/GITHUB-gray.svg?colorB=6cc644&colorA=6cc644&style=flat" /></a> <small><strong>(follow)</strong> TO STAY UP TO DATE ON FREE & OPEN SOURCE SOFTWARE</small></p>
0 commit comments