There has been an increase in developer resources around Gutenberg. We collected quite a few here. We’ll update along the way. If you found one that’s not listed, let us know in the comments.
Disclaimer: Nowadays it’s hard to make a clear distinction between a designer and a developer when it comes to the work as a creative on the web. For the purpose of increased readability of this article, I use developer including anyone who deals with HTML, CSS, Javascript, and PHP on front end and back end.
Table of Contents
- Gutenberg Documentation
- Milestones for WordPress 5.0 integration
- Get a head start with tools and examples
- Free and Low Cost Courses
- Articles and Post Series
- Blocks Development at WordCamps
- Personal Blogs by Gutenberg (Core) Developers
- Changelog of this post
Gutenberg Documentation
Gutenberg Handbook – For getting acquainted with Gutenberg’s APIs start there.
The /docs/ directory of the GitHub repository – the most current Gutenberg documentation, should you need to chase down an issues shortly after API changes.
Milestones for WordPress 5.0 integration
- Feature Complete – Remaining high-level features to conclude the first version of Gutenberg.
- Merge Proposal: Editor – Tracks progress and tasks towards a merge proposal candidate
- Merge Proposal: REST API – Tasks needed to be done around the REST API. This is a separate milestone because it should not depend on merge proposal.
- Merge Proposal: Accessibility
- Merge Proposal: Plugins
- Merge Proposal: Media
- Merge Proposal: Back Compat
- Bonus Features – Contains features that could be included in the merge proposal if they are implemented but aren’t requirements.
Besides the official Gutenberg documentation and GitHub discussions developers and companies are putting additional resources together and comment on the various aspects of how one can approach Gutenberg as a developer.
Get a head start with tools and examples
Ahmad Awais
- Blog post: “Create Guten Block Toolkit: Build Custom Gutenberg Blocks“
- GitHub Repository of Create Guten Block
Generate Blocks with WP-CLI
Another way of making developer’s life easier is to use WP-CLI. One of the commands generates all the code required to register a Gutenberg block for a plugin or theme. Learn more on installing and using WP-CLI for Gutenberg Block development.

Examples
WordPress/gutenberg-examples – examples created by Gutenberg contributors for extending Gutenberg with custom blocks.
You could also browse the folder with all core blocks to see how they are implemented.
Another great resource to see Gutenberg Block implementation are all plugins that have already been published on the WordPress Plugin Repository. Download them, study them and contribute.
Q: Do I need to learn React to build a Gutenberg block?
Micah Wood answers this question in this blog post of April 23, 2018 and he also provides a great list of resources for your JavaScript Education.
Free and Low Cost Courses
Wes Bos, long time JavaScript educator
- Fullstack Advanced React and GraphQL
- React For Beginners
- Learn Redux – core concepts of Redux & React Router, also a free course
- a free JavaScript 30 course.
Zac Gordon, WordPress teacher par excellence
Zac Gordon – educator and evangelist for Matt Mullenweg’s 2015 advice: “Learn Javascript Deeply”, offers three courses for WordPress Developers
Ahmad Awais, creator of create-block
Learning Gutenberg w/ CSS Tricks
On May 21, 2018, Chris Covier announced this 7-part series of tutorials by Lara Schenk and Andy Bell, taking WordPress Developers on the journey from zero to building Custom Gutenberg Blocks.
- Part 1: Series Introduction
- Part 2: What is Gutenberg, Anyway?
- Part 3: A Primer with create-guten-block
- Part 4: Modern JavaScript Syntax
- Part 5: React 101
- Part 6: Setting up a Custom webpack
- Part 7: A Custom “Card” Block
WordPress VIP free video Courses:
VIP team offers two courses. Register for the free courses here
Converting Custom Content to Blocks
- Migrating from CMB2 to Blocks
- Migrating ACF to Blocks
- Managing ACF Content with Gutenberg
- Converting Shortcodes to Blocks
Access Control and User Permissions
- Controlling Access to Blocks
- Creating Block Templates
- Using Block Templates
- Controlling Access to Blocks Based on User Roles
Articles and Post Series
Jason Yingling on jasonyingling.me
- Building Custom Gutenberg Blocks with the RichText Component (Jun 15, 2018)
- Working with the Gutenberg Block API (Jun 8, 2018)
- Understanding Modern JavaScript in Gutenberg Development (May 19, 2018)
- Gutenberg Best Practices for Blocks and Themes (Apr 12, 2018)
Alex Mansfield, ModularWP
- How to Build a Gutenberg Block with Custom Styles (Mar 9, 2018)
- How to Build a Gutenberg Block with a Toolbar Control (Feb 27, 2018)
- How to Build Gutenberg Blocks Using JSX (Jan 29, 2018)
- Disable Default Toolbar Buttons in the Gutenberg Editable Component (Jan 25, 2018)
- How to Build Custom Gutenberg Blocks: a Beginner’s Guide (Jan 1, 2018)
Bill Erickson, Entrepreneur, Educator and WordPress plugin developer
- Disabling Gutenberg on certain templates (Mar 5, 2018)
- Getting your theme ready for Gutenberg (Feb 26, 2018
- Building a Gutenberg Block (Jan 22, 2018)
Roy Sivan on arcctrl.com
- How to create headless apps & awesome things with Gutenberg
(Apr 24, 2018)
Blocks Development at WordCamps
- Getting Started Building Gutenberg Blocks – WordCamp OC (Jun 2018)
- Creating Advanced Gutenberg Blocks – WordCamp Buffalo (May 2018)
- Gutenberg Developer Workshop at WordCamp Miami (Mar 2018)
Personal Blogs by Gutenberg (Core) Developers
If you only ever read one thing about Gutenberg and themes, though, know this: there is no “Gutenberg theme”, and as a theme builder, there’s nothing you have to do, to be compatible with the new editor.
Joen Assmussen, developer at Automattic
Of course, all of the contributors to Gutenberg are incredibly busy working on the editor itself. A bi-weekly release cycle requires extreme focus. Most of the Gutenberg related writing they post on Github or Gutenberg Handbook or the Slack channel #core-editor. Nevertheless there are a few gems I found on contributors’ personal blogs. The list is by contributor in alphabetical and in reverse chronological order. If I missed some, let me know if the comments.
Joen Asmussen on moc.co
- Masonry Galleries & Gutenberg (Feb 24, 2018)
- Gutenberg & Themes (Feb 7, 2018)
Riad Benguella on riadbenguella.com
- Efficient client data management for WordPress Plugins (Jun 7, 2018)
- WordPress Core, the next battles (Dec 30, 2017)
- With Gutenberg, what happens to my Custom Fields? (Dec 11, 2017)
- One thousand and one way to extend Gutenberg today (Oct 16, 2017)
- How Gutenberg is changing WordPress Development? (Oct 6, 2017)
Riad Benguella also published plugins for various use cases of Gutenberg
Miguel Fonseca on lamda.blog
- The Language of Gutenberg (Apr 22, 2018)
- Premises of WordPress content handling (Apr 3, 2018)
Tammie Lister on tam.blog
- Gutenberg design basics (Jan 8, 2018)
- Gutenberg inspired redesign (Dec 29, 2017)
- Sidetrack: Tammie’s recommended reading list
Matias Ventura on matiasventura.com
Gutenberg, or the Ship of Theseus (Oct 9, 2017)
Grzegorz (Greg) Ziółkowski on gziolo.pl
Starter kit and reusable scripts for Gutenberg – the new WordPress editor (Nov 7, 2018)
Photo by frank mckenna on Unsplash
Changelog of this post
- 6/17 added article series by Jason Yingling
- 6/18 added link to video of talk at WordCamp Buffalo
4 Comments
[…] Click here to view the original post: 53 Resources for Developers & Designers building Blocks fo… […]
Great list.
Thanks
[…] Bego Mario Garde (@pixolin) June 18, 2018 53 Resources for Developers & Designers building Blocks for Gutenberg View story at […]
Great write up..