Subscribe to a Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

Gutenberg is all that you hear about nowadays. Plugin developers want to understand how to build custom blocks for the new Gutenberg editor in WordPress.

For that purpose, I wrote a boilerplate which is heavily documented and will help you kick-start with developing custom blocks, built in ReactJS, ESNext, with Webpack, etc.

I also wrote an introductory article → Introducing Gutenberg Boilerplate For Third Party Custom Blocks!

🚀 GITHUB: ★ 781 ⑂ 89 →

PRE-DEPRECATION NOTICE

Instead of this deprecated and no longer-maintained boilerplate, I now recommend you to use my new toolkit called 🔥 ⚛‏ 📦 create-guten-block


Gutenberg Boilerplate
An easy to understand and heavily documented️ WordPress Gutenberg Boilerplate!
A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais. How to Build a Custom Block for Gutenberg WordPress Editor? 1 Community

Gutenberg-Boilerplate How to Build a Custom Block for Gutenberg WordPress Editor? 2 Community GitHub release How to Build a Custom Block for Gutenberg WordPress Editor? 3 Community

gutenberg-boilerpalte Build your first Gutenberg Editor block! A boilerplate to build WP Gutenberg blocks and stuff! ✊

⚡️ Getting Started

  1. ✅ Install & activate the Gutenberg WordPress plugin
  2. ✅ Then download and install/activate this Gutenberg Boilerplate plugin ← Just click this link to download.
  3. 🙊 All blocks added by this boilerplate are prefixed with GB as in Gutenberg-Boilerplate. Take a look at the GIFs below to see how to try 'em out.
  4. 🎯 To try the ESNext block, i.e. 02-basic-esnext go to it's directory i.e. gutenberg-boilerpalte/block/02-basic-esnext and run npm install. Make sure you have Node and npm installed. Then in the 02-basic-esnext directory run npm run dev for development or npm run build to build the production code.
  5. 💯 Now read the source code to learn how to build blocks. It's heavily documented.

RECOMMENDED READING: Read the blog post I wrote → Gutenberg Boilerplate For Third-Party Custom Blocks.

⚡️ What Can You Learn?

This is a todo list for this boilerplate which also states the progress of what you can learn from it.

🍩 GIF Me Some Proof!

Sure thing! Here are a few examples of how you can use this WordPress plugin. When you install it after installing the Gutenberg plugin, this plugin gives you following four additional blocks.

📦 Block #1

Build a Custom Gutenberg Block — with custom CSS for editor and front end.

block1

📦 Block #2

Build a Custom Gutenberg Block — with ES6 or ESNext and a Webpack build process.

🎯 To try the ESNext block, i.e. 02-basic-esnext go to it's directory i.e. gutenberg-boilerpalte/block/02-basic-esnext and run npm install. Make sure you have Node and npm installed. Then in the 02-basic-esnext directory run npm run dev for development or npm run build to build the production code.

block2

📦 Block #3

Build a Custom Gutenberg Block — with editable content.

block3

📦 Block #4

Build a Custom Gutenberg Block — to click Tweet the contents of that block.

block3

⚡️ License & Attribution

Code is licensed under GPL v3.0. The content and documentation is copyrighted to the WordPress Gutenberg team and WGA - AhmadAwais.com (especially the content in the blog post). 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. I went ahead, studied the source code and received a lot of help from Gutenberg project and its contributors (Matias Ventura, James Nylen, Riad Benguella, Andrew Duthie, Joen, etc.) to finally build this. I started with three different repos which now co-exist as the Gutenberg examples and added more examples and documentation, using the Gutenberg code as a reference. Thanks to the Gutenberg team for a lot of help along the way.

I also wrote about it Gutenberg Boilerplate For Third-Party Custom Blocks.


🙌 Hello, from the TheDevCouple! I (Ahmad Awais) am a Full Stack Web Developer and a regular core contributor at WordPress. My wife (Maedah Batool) is a WordPress Journalist/Dev/Core Contributor. 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!


🎩 Support Ahmad's Open Source Projects!

If you'd like me to keep producing professional free and open source software (FOSS). Consider paying for an hour of my time. I'll spend two hours on open source for each contribution.


🙌 THEDEVCOUPLE PARTNERS

This open source project is maintained by the help of awesome businesses listed below. What? Read more about it →

How to Build a Custom Block for Gutenberg WordPress Editor? 4 Community How to Build a Custom Block for Gutenberg WordPress Editor? 5 Community
How to Build a Custom Block for Gutenberg WordPress Editor? 6 Community How to Build a Custom Block for Gutenberg WordPress Editor? 7 Community


Follow me 👋 on TwitterTweet to say Hi



For anything else, tweet at @MrAhmadAwais

I have released a video course to help you become a better developer — Become a VSCode Power User →


How to Build a Custom Block for Gutenberg WordPress Editor? 8 Community
VSCode
_VSCode Power User Course →_

It’s free and open source. Issues/PR’s are welcomed on GitHub. Let me know what you think about this 🙂

🚀 GITHUB: ★ 781 ⑂ 89 →

🙌

SUBSCRIBE TO DEVELOPERS TAKEAWAY!

A Premium Development Newsletter by TheDevCouple! What is TheDevTakeaway?

Meet Ameer Dagha the man behind ReviewsPK Platform Improvements by Kinsta Hosting That You Should Not Miss Hacktoberfest 2019 Meetup — DigitalOcean, JAMstack, & Everything Else!
  • It’s a good start! But I don’t find in any doc how to make that divs in every block and fields that has to be filled…

🙌 You must have something to say here...