Ahmad Awais

SHARE


Introducing Gutenberg Boilerplate For Third Party Custom Blocks!

Ahmad AwaisAhmad Awais

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.

⚡️ 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

license-check.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.

Gutenberg-boilerplate

🌟 IMPORTANT:

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.

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

🎩

WPTakeaway: Premium WordPress Newsletter!

Takeaway my professional opinion about Full Stack WordPress Development, building a business, growing a family, and everything web! Delivered to your inbox twice a month. 👻 I hate spam! Pinky Promise!

🔥 Ridiculously hard-working Full Stack Web DeveloperRegular WordPress Core Contributor 📣 TEDx Speaker ✌️ Spends 50% of his time building FOSS (Free & Open Source Software) used by over 10,000 Developers 🎖 WordPress Advocate & 🙌 Community Evangelist 👻 DevOps fanboy 😂 Cracks silly jokes 💜 Loves his wife (Maedah) 🍕 Learn more about Ahmad ↣

Say 👋 on Twitter @MrAhmadAwais | Subscribe to the WordPress Takeaway!