53 Resources for Developers & Designers building Blocks for Gutenberg

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.

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

Visual Code Power User

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.

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

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.