Ahmad Awais



Introducing Gutenberg Boilerplate For Third Party Custom Blocks!

Ahmad AwaisAhmad Awais
⚠️Gutenberg Boilerplate has been deprecated in favor of create-guten-block. Go ahead 🌟 and use create-guten-block β†’

I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It’s heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.

πŸ‘¨β€πŸ’» 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 β†’

⚑️ Gutenberg#

Gutenberg is all that you hear about in the WordPress community nowadays. Everyone is writing articles on how they feel about Gutenberg. I was one of the early adopters and contributors in the Gutenberg project.

I have had been writing about it (invitation to contribute) and covering the meeting notes for the project. When folks started writing about Gutenberg I wanted to do the same, but I was on vacations, visiting my parents, and enjoying Eid holidays. But that’s not all; I stopped myself from writing anything because I have been a bit confused.

I am still making up my mind with how Gutenberg will fit in the WordPress core. There are so many things which are both good and bad about it. So, instead of ranting about it, I wanted to do something more productive. And I went ahead, studied the source code, received a lot of help from Gutenberg contributors (Matias Ventura, James Nylen, Riad Benguella, Andrew Duthie, Joen, etc.) to finally build a Gutenberg Boilerplate project.

πŸ€” My Thoughts about Gutenberg!#

After being a contributor to the project and having tried to build this Gutenberg boilerplate I have been able to read through almost 80% of the code base. While Gutenberg is changing at a fast pace (five releases in the last 29 days) there are things about this project that are not going to change!

Here’s what I think about Gutenberg (v0.5.0)

βœ”οΈ PRO’s: The Concept of a Block

❌ CON’s: The Concept of a Block

βœ”οΈ PRO’s: ReactJS, ESNext, Webpack

❌ CON’s: ReactJS, ESNext, Webpack

βœ”οΈ PRO’s: NPM Packages

❌ CON’s: NPM Packages

πŸ™„ CONCERN: The Dependency Hell#

With the inclusion of ReactJS, Webpack, ESNext, and NPM packages into the development of WordPress core and obviously for third party plugins there is a huge concern of what they call The Dependency Hellβ„’.

Screenshot 2017-07-15 07.45.47.png


I have more to say, but I’ll stop here! Let’s be more productive and build something!

Gutenberg Boilerplate is a WordPress plugin that demonstrates how you can develop custom Gutenberg blocks both with and without a build process.



Before we dive in β€” I recommend you star the GitHub repository for Gutenberg Boilerplate. To show support and to keep up with the updates β€” with time this article may become outdated but not the repository!

⚑️ Getting Started#

Gutenberg Boilerplate is a WordPress plugin. So, go ahead, install the Gutenberg WP plugin and then download and install Gutenberg Boilerplate ZIP. Below you’ll find the information about these blocks, and their block.js files, while other files β€” I expect you to read them on your own.

⚑️ What Can You Learn?#

You can learn to build four different kinds of custom Gutenberg blocks at the time of release. These blocks are explained below:

πŸ“¦ Block #01: Basic Custom Gutenberg Block#

This is basically a Hello World example of building a custom block. Gutenberg Custom Block It has the following file structure:

Here’s how the block.js file looks. The inline documentation should be enough for you to understand what’s going on in there.

And here’s the index.php file where we enqueue assets.

Guess you can figure out how the CSS files would look like. Anywho, here it is.

πŸ“¦ Block #02: Basic Custom Block With ESNext#

This is basically a Hello World example of building a custom block with a build process and using ESNext, Webpack, Babel, etc.

Gutenberg Custom Block

It has the following file structure:

Here’s the block.js filewritten in ESNext.

↣ The Build Process#

Read the files explained above. All of the files are heavily inline documented. All you have to do is following:

Build process starts with the package.json file.

I have also written a very basic Webpack configuration. It’s explained inside the Webpack.congif.js file.

This is a basic Editable custom Gutenberg block.

Gutenberg Custom Block

It has the following file structure:

Again, here’s the block.js file.

πŸ“¦Block #04: Tweet Gutenberg Block#

Fancy building a custom block to tweet content written inside it? Maybe you have already built a shortcode like this one before. Well, you’re in luck because I have built just that.

Gutenberg Custom BlockIt has the following file structure:

And here’s the custom block.js file!

πŸ‘‹ Say Something!#

This is all for now. I am hoping for you to have enjoyed this post. Go ahead and read the source code. Again, this post can go stale at a later date but I will try to keep the GitHub repository up to date. You should probably 🌟 star it. I have mixed feelings about this Gutenberg project.

I’d like your comments about this. Do let me know if you have any thoughts or considerations about Gutenberg & its boilerplate. No pressure!

If you’d like to get insights into professional full stack development, DevOps, WordPress community news, growing up a family, building and bootstrapping a business then subscribe to our premium newsletter called ↣ The WordPress Takeaway!

Gutenberg Boilerplate Updates#

πŸ‘¨β€πŸ’» 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 β†’

I help businesses understand developers πŸ“Ÿ Launching Node.js CLI Automation Course πŸ‘¨β€πŸ« Edutainer at VSCode.pro 🎩 An award-winning open-source engineer and developer advocate 🦊 Google Developers Expert for web 🌳 Node.js foundation Community Committee member ✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker πŸ™Œ Leading developers and publishing technical content for over a decade πŸ˜‚ Self-confessed tech comedian working with the JavaScript web and cloud communities πŸ’œ Loves his wife (Maedah) ❯ Learn more about Awais ↣

Say πŸ‘‹ on Twitter @MrAhmadAwais | Subscribe to the Developers Takeaway!


Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 115,834 Developers Already Subscribed