Ahmad Awais

NAVIGATE


SHARE


Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! πŸš€

Ahmad AwaisAhmad Awais
For the latest documentation and steps on getting started, use the Create Guten Block GitHub repository β†’ as your primary source of information.

πŸŽ‰ Excited to release the create-guten-block toolkit today. In this post, I am going to share what is create-guten-block (cgb), what is the motivation & philosophy behind building this dev-toolbox, and the story of how I am releasing it to the public after ~200 commits and ~90 version releases. Let’s start with intro first…

πŸ™Œ Introducing Create Guten Block!#

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

create-guten-block (🌟 at GitHub for updates) is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, Modern JavaScript (ES6, ES7, ES8, …) ESLint, Babel, etc.

Create Guten Block is not like other starter-kits or boilerplates. 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. That’s actually why I built it.

πŸ‘‹

Hey, don’t forget to star 🌟 it at GitHub for updates, to show appreciation, and do report back any issues you face.

πŸš€ create-guten-block is:

But what is it?!

Well, it’s a create-guten-block is a way for you to start building Gutenberg blocks without having to configure or setup anything. It’s a zero-config-js #0CJS toolkit with a single dependency in your projects β€” which will stay up to date.

What’s Included?

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

πŸ”°

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can “eject” and customize it, but then you will need to maintain this configuration.

Philosophy

Why

Why create-guten-block?

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 β€” that’s not an easy thing to do.

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.

πŸ¦‘

“I’ve heard from several people that they’ve consolidated their companies tool dependencies into a single package and this worked really well for them.” β€” @Dan_Abramov

So, that’s what I dreamt about for the next couple of months. How do I solve this problem for the WordPress community, eh?

create-guten-block cgb-scripts

After building WPGulp and Gutenberg Boilerplate and lot of other open source software that thousands of developers are using β€” I started receiving lots of feedback on how it’s limiting in its architecture which is complex β€” and by the way, these boilerplates went stale quite a few times.

I knew this was not right.

πŸ™ˆπŸ™‰πŸ™Š

Developers told me that they built Gutenberg blocks with ES5 because the amount of time required to configure, set up, and learn tools like Babel, Webpack, ESLint, Prettier, etc. wasn’t worth it. And I was like whaaaat?!

So, yes! I went ahead and built a solution β€” a zero-config-js #0CJS WordPress developers’ toolkit called create-guten-block! Enough talk, let’s stop it right here and actually explore the toolkit.

Start

GETTING STARTED!

It’s really easy to get started with create-guten-block. Just install it as a global module and run it to create your next-gen Gutenberg block plugin for WordPress.

🦊

Did I tell you to star 🌟 it at GitHub for updates and to show appreciation or to report back any issues you face? Hmm… lemme think?!

OK! OK! Let’s get you started!

β†’ STEP #0

If you don’t have Node.js + npm installed then read this step, otherwise jump to the Step #1 below.
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 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.

You can verify the install by opening your terminal app and typing…

node -v
# Results into v9.4.0 β€” make sure you have Node >= 8 installed.

and then…

npm -v
# Results into 5.6.0 β€” make sure you have npm >= 5.2 installed.

β†’ STEP #1

Install create-guten-block globally on your system.

You’ll need to have Node >= 8 on your local development machine (but it’s not required on the server). You can use nvm(macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

npx create-guten-block my-block

install cgb

Hold on, it’ll take a couple of minutes to install.

β†’ STEP #2

Now all you have to do is create a Gutenberg block and start building. It’s done by running the create-guten-block command and providing it with a unique name for a WordPress plugin that will get created. The name can a single word or hyphenated multiple words.

⚠

Make sure to run this command in your local WordPress install’s plugins folder i.e. /local_dev_site.tld/wp-content/plugins/ folde β€” since this command will produce a WordPress Gutenberg block plugin that you can go to WP Admin β–ΆοΈŽ Plugins to activate.

Now let’s run the following command.

create-guten-block my-block

cgb block

It will create a directory called my-block inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

INSIDE: /local_dev_site.tld/wp-content/plugins/my-block

β”œβ”€β”€ plugin.php
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
|
β”œβ”€β”€ dist
|  β”œβ”€β”€ blocks.build.js
|  β”œβ”€β”€ blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   β”œβ”€β”€ block
   |  β”œβ”€β”€ block.js
   |  β”œβ”€β”€ editor.scss
   |  └── style.scss
   |
   β”œβ”€β”€ blocks.js
   β”œβ”€β”€ common.scss
   └── init.php

No configuration or complicated folder structures, just the files you need to build your app.

β†’ STEP #3

Once the installation is done, you can open your project folder and run the start script.

Let’s do that.

cd my-block
npm start

You can also use yarn start if that’s your jam.

cgb-npm-start

This runs the plugin in development mode. To produce production code run npm run build. You will see the build messages, errors, and lint warnings in the console.

πŸ’―

And just like that, you’re building your next WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, transpiled with Babel, which also has ESLint configurations for your code editor to pick up and use automatically.

More

Workflow!

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.

πŸ‘‰ npm start

πŸ‘‰ npm run build

πŸ‘‰ npm run eject

That’s about it.

tldr

TL;DR

Too long, didn’t read? Here’s a shorter version.

Open the terminal app and run the following commands.

Create-Guten-Block has been tested to work on macOS, but must also work on Windows, and Linux. If something doesn’t work, kindly file an issue β†’

update

Updating to New Releases

Create Guten Block is divided into two packages:

  1. create-guten-block is a global command-line utility that you use to create new WP Gutenberg plugins.
  2. cgb-scripts is a development dependency in the generated plugin projects.

You almost never need to update create-guten-block itself: it delegates all the setup to cgb-scripts. But as this project matures, there might be a few changes over time and you can re-run the global install.

npx create-guten-block my-block

When you run create-guten-block, it always creates the project with the latest version of cgb-scripts so you’ll get all the new features and improvements in newly created plugins automatically.

βœ… To update an existing project to a new version of cgb-scripts, open the changelog, find the version you’re currently on (check package.json in your plugin’s folder if you’re not sure), and apply the migration instructions for the newer versions.

πŸ”° In most cases bumping the cgb-scripts version in the package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

We commit to keeping the breaking changes minimal so you can upgrade cgb-scripts painlessly.

Log

Changelog

Read what’s πŸ“¦ new, πŸ‘Œ improved, πŸ› fixed, and if πŸ“– docs got updated.

πŸ‘‰ Go read the entire changelog at this link β€” CGB Changelog β†’

Nothing’s ever complete, so bear with us while we keep iterating towards a better future.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

listen to β†’ A million dreams!

Hello

Hello, we’re the WordPress Couple!

I (Ahmad Awais) am a Full Stack Web Developer and a regular core contributor at WordPress. My significant other (Maedah Batool) is a Technical Project Manager, and she’s also a WordPress Core Contributor. Together with our team, we run the TheDevCouple.com.

If you’d like to get insights into our love for open source software, professional full stack development, WordPress community, the growth of JavaScript or growing a family, building, and bootstrapping a business, then subscribe to our premium newsletter called ↣ The WordPress Takeaway!

Support our Open Source Projects! 🎩

If you’d like us to keep producing professional free and open source software (FOSS). Consider paying for an hour of my dev-time. We’ll spend two hours on open source for each contribution. Yeah, that’s right, you pay for one hour and get both of us to spend an hour as a thank you.

Partners

Project Backers & TheDevCouple Partners ⚑

This FOSS (free and open source software) project is built, updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies/individuals, this project would not have been possible. Make sure you check out their awesome services and products. They’ve earned it. πŸŽ–

β€” What/How? Read more about it β†’

Thanks

License & Attribution

MIT Β© Ahmad Awais.

This project is inspired by the work of more people than I could mention here. But thank you, Dan Abramov for Create React App, Andrew Clark, and Sophie Alpert from React.js team. Kent C. Dodds for his open source evangelism, WordPress Core Contributors, Gary for keeping everyone sane, Gutenberg developers Matias, Riad, Andrew, also of course Joen, Greg and contributors, and other WordPress community members like Zac for his course on Gutenberg, and also my friend Morten for all the #Guten-motivation, Icons8 for the awesome icons, Maedah for managing this project, and to everyone I forgot.


#

Thanks#

What’s Next?#

Yes, that’s not all done, yet. I have managed to change the codebase and release many updates by now, before actually announcing a stable release.

The next step is to get this toolkit tested and mature the entire app to release version 2.0.0 for that not only do I need your support, I ask that you hop on board and contribute β€” that’s the only way forward.

I have created a GitHub issue with the title of πŸš€ Creat Guten Block 2.0 Goals + Call for Contributors! In there I have listed a rough roadmap to version 2.0.0.

Goals listed below β€” without any order of priority:

What do you say? Comment below. And make sure you’ve stargazed 🌟 the GitHub repo for updates!

βœ…

Building create-guten-block was a lot of work. It’s easily one of the best software I’ve written and I have exciting improvements coming.

πŸ”₯ It would mean the world to me if you Tweet about it, try it out, and contribute.


Peace! ✌

Feel free to reach out and say πŸ‘‹ on Twitter @MrAhmadAwais

Thanks

UPDATES

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

Founder & CEO at Langbase.com Β· Ex VP DevRel Rapid Β· Google Developers Advisory Board (gDAB) founding member. πŸ§‘β€πŸ’» AI/ML/DevTools Angel Investor ❯ AI/ML Advisory Board member San Francisco, DevNetwork

🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ NASA Mars Ingenuity Helicopter mission code contributor πŸ† 8th GitHub Stars Award recipient with 3x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer).

🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator. πŸ“Ÿ Teaching thousands of developers Node.js CLI Automation (100 videos Β· 22 Projects) & VSCode.pro course. Over 142 Million views, 22 yrs Blogging, 56K developers learning, 200+ FOSS.

✌️ Author of various open-source dev-tools and software libraries utilized by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

✨ As quoted by: Satya Nadella Β· CEO of Microsoft β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on Twitter @MrAhmadAwais

πŸ“¨

Developers Takeaway

Stay ahead in the web dev community with Ahmad's expert insights on open-source, developer relations, dev-tools, and side-hustles. Insider-email-only-content. Don't miss out - subscirbe for a dose of professional advice and a dash of humor. No spam, pinky-promise!

✨ 172,438 Developers Already Subscribed
Comments 19
  • Neil Murray
    Posted on

    Neil Murray Neil Murray

    Reply Author

    The documentation included in the REAMDE.md at https://github.com/ahmadawais/create-guten-block is particularly helpful. It provides a gentle but clear introduction to the world of modern build based JavaScript development for WordPress Developers.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Neil! πŸ™Œ

      So happy to see you drop by, and that’s very kind of you to say! πŸ’―
      Just doing my best. Lots of inspiration from other projects.

      Do let me know how it goes when you try create-guten-block out.

      Peace! ✌️


  • David Sword
    Posted on

    David Sword David Sword

    Reply Author

    Thank you so much for this! Amazing work, exactly what the community needed! Highly appreciated. Thank you, thank you, thank you!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hahaha! πŸ™Œ
      So, glad you liked it. Do give back and contribute to the project.


  • Cristian
    Posted on

    Cristian Cristian

    Reply Author

    Thank you for your hard work on this toolbox.
    Is there any documentation on how to develop WordPress Gutenberg blocks once the toolkit is setup? As in, what documentation should I read after I setup your toolkit and run npm start?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Glad you liked it! πŸ’―

      Yes, you should read the Gutenberg Handbook to go from there.


      • Cristian
        Posted on

        Cristian Cristian

        Reply Author

        Is it possible to save CPT metadata in a custom database table? For example I have a post type Books and would like to save the book’s average rating, isbn, etc in a custom db table instead of the wp_posts table.


  • Ali Basheer
    Posted on

    Ali Basheer Ali Basheer

    Reply Author

    Thanks Ahmad for the amazing hard and professional work, you really made it easy to get started. I am trying it out right now… can’t wait to put it in production.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Glad you liked it! πŸ’― Keep me informed. Do contribute :)


  • sabri
    Posted on

    sabri sabri

    Reply Author

    Thank you for the awesome work.

    i have one question, is there a possible way to write frontend js code for each block ?

    or i have to use eject ?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      That’s very kind of you to say! πŸ’―
      Yes, if it’s not obvious, let me tell you that it’s possible to do that. :)


  • Nguyen
    Posted on

    Nguyen Nguyen

    Reply Author

    Hi,
    Firstly, Thank for creating this plugin.
    I have a question: Can I create multiple-blocks in a plugin? I’m creating multiple-folders under src folder, but when running npm start, I’m not seeing Webpack creates dev/product file to dist folder.
    Thanks


  • Nguyen
    Posted on

    Nguyen Nguyen

    Reply Author

    Sorry, I got that. But I think we still need to use register_block_type function to register a block. It seems you are missing it https://github.com/ahmadawais/create-guten-block/blob/master/examples/03-multi-block/src/init.php


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Examples are probably outdated. You should generate a new plugin and see how we handle it there.


  • Jules Colle
    Posted on

    Jules Colle Jules Colle

    Reply Author

    Great work! My favorite tool by far these days! Are there any docs on how to contribute? I created a fork and made some edits in cgb-scripts. but I don’t know how I can test my changes. is (or should there be) an npm script that uses the local version of cgb-scripts instead of pulling it from the npm repo?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Thank you, yes there’s a contributing.md file in the repo.


      • Jules Colle
        Posted on

        Jules Colle Jules Colle

        Reply Author

        Thanks for your reply. I did read that file, but I think I need extra permissions for some of the commands to work..


  • Stefan
    Posted on

    Stefan Stefan

    Reply Author

    Hi Ahmad!

    Thanks for the tool! Any news on Uglify ES6 compatibility?

    Cheers!