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.
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 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
Inspired by Dan Abramov’s create-react-app toolkit, Ahmad Awais published the Create-Guten-Block Toolkit for developers giving them a head start on developing Gutenberg Blocks for their sites.
create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.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.
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.
Free and Low Cost Courses
- React For Beginners
- Learn Redux – core concepts of Redux & React Router, also a free course
Zac Gordon, WordPress teacher par excellence
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 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)
- 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
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
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
Changelog of this post
- 6/17 added article series by Jason Yingling
- 6/18 added link to video of talk at WordCamp Buffalo