Skip to content

Commit a516d16

Browse files
committed
πŸ‘Œ IMPROVE: Lowercased files β€” Don't Scream
1 parent 0aa2bd3 commit a516d16

7 files changed

Lines changed: 21 additions & 21 deletions

File tree

File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

README.md renamed to readme.md

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,8 @@
55
<br>
66
<br>
77

8-
98
[![npm](https://img.shields.io/npm/v/create-guten-block.svg?style=flat-square)](https://www.npmjs.com/package/create-guten-block) [![npm](https://img.shields.io/npm/dt/create-guten-block.svg?style=flat-square&label=downloads)](https://www.npmjs.com/package/create-guten-block) [![emoji-log](https://cdn.rawgit.com/ahmadawais/stuff/ca97874/emoji-log/flat.svg)](https://github.com/ahmadawais/Emoji-Log/) [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/) [![GitHub stars](https://img.shields.io/github/stars/ahmadawais/create-guten-block.svg?style=social&label=Stars)](https://github.com/ahmadawais/create-guten-block/stargazers) [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers) [![VSCode.pro](https://img.shields.io/badge/Supported%20by-VSCode%20Power%20User%20Course%20%E2%86%92-gray.svg?colorA=444444&colorB=4F44D6&style=flat-square)](https://VSCode.pro "This open source project is supported by VSCode.pro")
109

11-
12-
1310
<table width='100%' align="center">
1411
<tr align='center'>
1512
<td align='center' width='100%' colspan='2'>
@@ -32,7 +29,6 @@
3229

3330
</div>
3431

35-
3632
<br>
3733

3834
# πŸ“¦ `create-guten-block`
@@ -42,6 +38,7 @@
4238
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.
4339

4440
`create-guten-block` is:
41+
4542
- πŸ₯ž Versioned βœ“
4643
- 🀠 Updatable βœ“
4744
- πŸ—ƒ Set of sane-defaults βœ“
@@ -58,17 +55,17 @@ Let's create a WordPress block plugin...
5855
#### ⚑️ Quick Overview
5956

6057
Run step `#1` and `#2` quickly in one go β€” Run inside local WP install E.g. `/wp.local/wp-content/plugins/` directory.
58+
6159
```sh
6260
npx create-guten-block my-block
6361
cd my-block
6462
npm start
6563
```
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))
6764

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))
6866

6967
> πŸŽ› _If you want to study the detailed installation of step `#1` and `#2` β€” then take a look at the steps below_.
7068
71-
7269
<details>
7370
<summary><strong> STEP #0</strong> β€” Don't have <code>Node.js</code> + <code>npm</code> installed? Read this. (CLICK TO EXPAND!)</summary>
7471

@@ -90,12 +87,12 @@ npm -v
9087

9188
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.
9289

93-
9490
> ⚠️ 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.
9591
9692
```sh
9793
npx create-guten-block my-block
9894
```
95+
9996
([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))
10097

10198
![npx block](https://on.ahmda.ws/p89T/c)
@@ -130,6 +127,7 @@ INSIDE: /local_dev_site.tld/wp-content/plugins/my-block
130127
β”œβ”€β”€ common.scss
131128
└── init.php
132129
```
130+
133131
No configuration or complicated folder structures, just the files you need to build your app.
134132

135133
### β†’ STEP #2
@@ -142,6 +140,7 @@ _Let's do that._
142140
cd my-block
143141
npm start
144142
```
143+
145144
_You can also use `yarn start` if that's your jam_.
146145

147146
![cgb-npm-start](https://on.ahmda.ws/orrh/c)
@@ -160,14 +159,17 @@ You will see the build messages, errors, and lint warnings in the console.
160159
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.
161160

162161
#### πŸ‘‰ `npm start`
162+
163163
- Use to compile and run the block in development mode.
164164
- Watches for any changes and reports back any errors in your code.
165165

166166
#### πŸ‘‰ `npm run build`
167+
167168
- Use to build production code for your block inside `dist` folder.
168169
- Runs once and reports back the gzip file sizes of the produced code.
169170

170171
#### πŸ‘‰ `npm run eject`
172+
171173
- Use to eject your plugin out of `create-guten-block`.
172174
- Provides all the configurations so you can customize the project as you want.
173175
- It's a one-way street, `eject` and you have to maintain everything yourself.
@@ -183,35 +185,34 @@ _That's about it._
183185

184186
Your environment will have everything you need to build a modern next-gen WordPress Gutenberg plugin:
185187

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`.
192194

193195
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.
194196

195-
196197
<br>
197198

198199
![Philosophy](https://on.ahmda.ws/orq5/c)
199200

200201
## Philosophy
201202

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.
203204

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.
205206

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.
207208

208209
<br>
209210

210211
![Why](https://on.ahmda.ws/orvy/c)
211212

212213
## Why `create-guten-block`?
213214

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.
215216

216217
`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.
217218

@@ -280,7 +281,6 @@ Nothing's ever complete, so bear with us while we keep iterating towards a bette
280281
> ```
281282
> ... _listen to β†’ [A million dreams!](https://www.youtube.com/watch?v=pSQk-4fddDI)_
282283
283-
284284
<br>
285285
286286
![Hello](https://on.ahmda.ws/os6O/c)
@@ -327,8 +327,8 @@ This FOSS (free and open source software) project is updated and maintained with
327327
328328
## License & Attribution
329329
330-
- MIT Β© [Ahmad Awais](https://twitter.com/MrAhmadAwais/)
331-
- [Code of Conduct](code-of-conduct.md)
330+
- MIT Β© [Ahmad Awais](https://twitter.com/MrAhmadAwais/).
331+
- [Code of Conduct](code-of-conduct.md).
332332
333333
<div align="left">
334334
<p><a href="https://github.com/ahmadawais"><img alt="GitHub @AhmadAwais" align="center" src="https://img.shields.io/badge/GITHUB-gray.svg?colorB=6cc644&colorA=6cc644&style=flat" /></a>&nbsp;<small><strong>(follow)</strong> TO STAY UP TO DATE ON FREE & OPEN SOURCE SOFTWARE</small></p>
File renamed without changes.

0 commit comments

Comments
Β (0)