⚠️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.
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.
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
Gutenberg is a neat initiative. The editor needs to be improved.
Blocks are way better than those dayum shortcodes!
❌ CON’s: The Concept of a Block
Not sure if we are trying to reinvent the wheel maybe as a block? Does EVERYthing fit in a block?
✔️ PRO’s: ReactJS, ESNext, Webpack
Using a cutting edge language like ReactJS definitely, means that we are fighting the tech-debt with WordPress and that it’s a beginning of new things.
Imagine if both ReactJS and the WP REST API are in the core.
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™.
The Cost of (63+671) Modules: All these dependencies cause problems! There are 63 NPM modules with 671 children module dependencies which are 106 MB in size. I’ve put the detailed info in a gist for the geeks.
API Concerns: The API being built over these dependencies can have a lot of problems at scale! WordPress is a public facing software after all. It’s not a SaaS managed by a team of pro developers.
Looks like there are 98 modules fromSindre Sorhus — while he’s a good friend and an awesome developer. The concern here is dependency!
License Paradox: There is also the issue of GPL compatible licenses. I did a cursory scan of modules to build a license list at Codepen for the Gutenberg editor project at version 0.5.0.
I am not a lawyer, so, I’ll just raise a valid concern here — Are these licenses GPL compatible? Will all the sub module licenses by GPL compatible? What are we doing to make sure of that?
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 youstar the GitHub repositoryfor Gutenberg Boilerplate. To show support and to keep up with the updates — with time this article may become outdated but not the repository!
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.
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.
At one hand, it will make for a new an incredible WordPress Editor and will make developers happy for using ReactJS and new cutting edge modern tooling.
On the other hand, it will confuse a lot of users and will make life harder for developers. Especially for those who make extensive use of meta boxes in their themes and plugins.
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!