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.

Table of Contents


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

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

Create-Guten-Block Toolkit

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

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

Zac Gordon – educator and evangelist for Matt Mullenweb’s 2015 advice: “Learn Javascript Deeply”, offers three courses for WordPress Developers

Courses for Developers - JavaScript for WordPress with Zac Gordon
Check ’em out now!

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

Jason Yingling on jasonyingling.me

Alex Mansfield, ModularWP

Bill Erickson, Entrepreneur, Educator and WordPress plugin developer

Roy Sivan on arcctrl.com

Blocks Development at WordCamps

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

Riad Benguella also published plugins for various use cases of Gutenberg

Miguel Fonseca on lamda.blog

Tammie Lister on tam.blog

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 thoughts on “53 Resources for Developers & Designers building Blocks for Gutenberg

Comments are closed.