getButterfly
Resume

A Collection of Gutenberg Tutorials & Resources for WordPress

This article is a curated collection of Gutenberg tutorials, code snippets, and resources dedicated to the upcoming Gutenberg editor in WordPress 5.0.

Gutenberg is a brand new content creator and editor coming soon to WordPress 5.0. The Gutenberg editor uses blocks to create all types of content, replacing a half-dozen inconsistent ways of customizing WordPress, bringing it in line with modern coding standards, and aligning with open web initiatives. These content blocks transform how users, developers, and hosts interact with WordPress to make building rich web content easier and more intuitive, democratizing publishing — and work — for everyone, regardless of technical ability.

Visit the official Gutenberg page for more info on the project. You can download Gutenberg here and take it for a spin. Read below for a selection of Gutenberg tutorials.

Gutenberg Tutorials

Gutenberg Tutorials and News

What Will Gutenberg Mean For My WooCommerce Store?

Tuesday April 03, 2018
Matteo Duò gives you four helpful tips on how to prepare your WooCommerce-powered site for Gutenberg.

Auditing Your WordPress Plugin for Gutenberg

Tuesday April 03, 2018
Kevin Hoffman has written an article about how to audit your plugin in anticipation of the upcoming Gutenberg block editor.

Drag and drop merged into Gutenberg

Tuesday April 03, 2018
Drag and drop functionality, which many have been looking forward to, has been merged into Gutenberg and will soon be ready for use and testing in the next version.

Zac Gordon releases v2 of his Gutenberg course

Tuesday April 03, 2018
Zac Gordon has released an update to his Gutenberg courses that how how the Gutenberg editor works under the hood, how to build custom blocks, and much more.

‘Try Gutenberg’ Prompt Pushed Back to A Later Release

Monday April 02, 2018
The ‘Try Gutenberg’ notice that was expected to appear in WordPress 4.9.5 will now be pushed back, potentially to version 4.9.6.

What’s new in Gutenberg? (29th March)

Thursday March 29, 2018
This release has a strong focus on developer APIs, introducing new and improved tools to extend and interact with the editor. On the user side, there are updates to shared blocks, font size UI, accessibility, mobile, stability, and many bug fixes.

Try Gutenberg notice coming to 4.9.5

Wednesday March 28, 2018
WordPress 4.9.5 will feature a call-out prompt that has links to information about Gutenberg and a button to quickly install the plugin if user permissions allow.

WebDevStudios, Gutenberg, and Planning for WordPress 5.0

Wednesday March 28, 2018
Brad Williams and Lisa Sabin-Wilson write about integrating the Gutenberg editor into their agency and look at the future of WordPress with the new editor.

5 Ways the WordPress Gutenberg Editor Can Boost Revenue

Wednesday March 28, 2018
Eric Karkovack shares five ways you might utilize the new block editor to generate more revenue for your business.

Getting Ahead of Gutenberg

Wednesday March 28, 2018
Janna Hilferty gives a brief overview of Gutenberg and how to prepare your site and expectations.

Accessibility of Gutenberg, the state of play

Wednesday March 28, 2018
The Accessibility team set up a list of minimum requirements, did code reviews and research, gave recommendations and set up user tests.

Testing Gutenberg: An Empathy Challenge

Wednesday March 28, 2018
Mark Uraine takes Gutenberg for a spin to try and recreate an existing post and shares his initial impressions.

Gutenberg on Mobile

Wednesday March 21, 2018
The WordPress mobile team is exploring how Gutenberg might shape the mobile editing experience.

How to Create Your First Block For Gutenberg

Monday March 19, 2018
Antonio Villegas walks you through the architecture of a Gutenberg block and shows you how to create your first block.

How To Get Started with Attributes in Gutenberg Blocks

Monday March 19, 2018
Jay Hoffmann goes into detail about attributes in Gutenberg blocks and why they are both essential an excellent starting point for a new block.

How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes

Monday March 19, 2018
Zac Gordon shows you how to enqueue block JavaScript and CSS to work with the Gutenberg editor.

Go Gutenberg

Thursday March 15, 2018
Dave Warfel of WP Smackdown has create a site that aims to help WordPress site owners & editors better understand Gutenberg, and how to use it.

Take Gutenberg for a spin right now with Frontenberg

Wednesday March 14, 2018
Frontenberg is a front-end install of Gutenberg that let’s you tinker around with the new block editor without having to install it on your own site.

What’s new in Gutenberg? (14th March)

Wednesday March 14, 2018
The latest update to Gutenberg includes lots of improvements to the writing flow and inserting of block elements.

A Big Collection Of Gutenberg Editor Resources

Monday March 12, 2018
Colin Newcomer of WPLift has written a post with lots of resources to help you get started with Gutenberg.

Block Options: Your Complete WordPress Gutenberg Management Tool

Monday March 12, 2018
Block Options is a free plugin that’s available on the plugin directory to help you have complete control over your Gutenberg Editor blocks.

Getting your theme ready for Gutenberg

Friday March 09, 2018
Bill Erickson gives you a few quick tips to help you make the most of Gutenberg and your themes.

Building a Gutenberg Block with Custom Styles

Friday March 09, 2018
Alex Mansfield has written a tutorial showing you how to add block-specific styles to a Gutenberg block.

Designing Themes with Gutenberg Blocks and Sketch

Wednesday March 07, 2018
Kjell Reigstad discusses the changes that Gutenberg will bring to themes and how Automattic has begun to prepare for Gutenberg by reevaluating theme design and development processes.

How Will WordPress Gutenberg Affect the Enterprise?

Tuesday March 06, 2018
Karim Marucchi goes into detail about what the Gutenberg update actually means for large-scale businesses.

Creating A Custom Gutenberg Block In WordPress

Tuesday March 06, 2018
Peter Tasker walks you through creating your first Gutenberg editor block with code examples and really good explanations along the way.

How to Add Theme Colors to the Gutenberg Editor

Monday March 05, 2018
Brian Gardner has written a handy and comprehensive guide to creating theme color palettes for the block editor.

How I Follow Changes in Gutenberg Development

Monday March 05, 2018
Zac Gordon shares some of the best ways to keep up to date with the new Gutenberg block editor.

Disabling Gutenberg on certain templates

Monday March 05, 2018
Bill Erickson shows you how to disable Gutenberg on certain page templates to help the transition into the new editor.

Customizing the Future

Monday March 05, 2018
Mel Choyce gives a talk about where she see’s customization going in a post-Gutenberg world.

How The REST API And Gutenberg Work Together

Friday March 02, 2018
Josh Pollock covers how the REST API works within Gutenberg to save posts, meta data and more.

What’s new in Gutenberg? (2nd March)

Friday March 02, 2018
This release includes significant progress in consolidating the codebase and refining aspects of the experience.

Building a Gutenberg Block with a Toolbar Control

Wednesday February 28, 2018
Alex Mansfield shows you how to add an alignment control to the toolbar of a Gutenberg block.

The Value of WordPress Designers and Developers in the Gutenberg Era

Wednesday February 28, 2018
B.J. Keeton explores the introduction of Gutenberg and where it leaves designers and developers.

Masonry Galleries & Gutenberg

Monday February 26, 2018
Joen Asmussen shows you how to leverage the additional classes feature of Gutenberg to create a masonry-style gallery with minimal styles.

Project Gutenberg – Technology decisions

Monday February 26, 2018
CSSIgniter explores the many technology decisions every WordPress developer will soon have to make regarding Gutenberg and block development.

Gravity Forms + Gutenberg

Wednesday February 21, 2018
The Gravity Forms team is working on bringing their form builder into the new WordPress editor, Gutenberg. Check out the progress on their Github repo.

Implementing Gutenberg Image Alignment Options into your Theme

Wednesday February 21, 2018
Jason Yingling shows you a method of adding wide and full size image alignments to your WordPress theme.

Going Gutenberg: Chapter II

Tuesday February 20, 2018
George Gecewicz details how The Events Calendar and its add-ons will be impacted by the new block editor.

Gutenberg: A JavaScript developer’s perspective

Monday February 19, 2018
Andy Bell has written about the introduction of Gutenberg from a JavaScript developer’s perspective.

What’s new in Gutenberg? (16th February)

Friday February 16, 2018
Among the many additions and improvements in this update includes block nesting, page template support, previewing saved blocks, and more.

Gutenberg Interview Series with Ahmad Awais

Friday February 16, 2018
The second of four interviews that focus on the upcoming block-based editor coming to WordPress 5.0. The first interview is with Ahmad Awais, author of the create-guten-block toolkit.

Styling Themes for Gutenberg

Friday February 16, 2018
Laurel Fulford has written a handy guide to help you integrate Gutenberg into your WordPress themes.

Andrew Roberts: The What and Why of Gutenberg

Thursday February 15, 2018
Learn the history and design philosophy behind Gutenberg, the new editor in WordPress, from one of the Gutenberg team members.

A Guide To The Gutenberg WordPress Editor

Thursday February 15, 2018
Cat Crawford has put together a handy introductory guide, to help you get to know Gutenberg and its fantastic new features.

Gutenberg with Tammie Lister and Matias Ventura

Tuesday February 13, 2018
Join Tammie Lister and Matias Ventura as they discuss all things Gutenberg on Shop Talk Show.

Gutenberg Interview Series with Joost de Valk

Tuesday February 13, 2018
The first of four interviews that focus on the upcoming block-based editor coming to WordPress 5.0. The first interview is with Joost de Valk, founder of Yoast.com.

Announcing the Google Maps WordPress Block

Thursday February 08, 2018
Pantheon has just released a Google Maps block, which lets you easily place a map in any post or page.

Gutenberg & Themes

Wednesday February 07, 2018
Joen Asmussen covers some of the new Gutenberg features that themes can opt into such as wide alignment for images and galleries.

Gravity Forms adds beta Gutenberg support

Wednesday February 07, 2018
Gravity Forms just released an update that provides a new Gravity Forms block for the upcoming WordPress post editor (codenamed Gutenberg).

Block nesting merged into Gutenberg

Tuesday February 06, 2018
Block nesting, a highly anticipated feature that will let you nest editable blocks for richer layouts, has just been merged into the plugin and will be available for use soon.

How to create a Gutenberg Block for Displaying a Post

Monday February 05, 2018
Igor Benic wrote a tutorial to build a Gutenberg block that displays a post in your editor.

The Advanced WordPress Gutenberg Interview Series

Saturday February 03, 2018
Matt Cromwell is launching a 4-part interview series focused on Gutenberg and its significance and what the future of WordPress development will be like after Gutenberg is merged into Core. Interview guests include Joost de Valk, Ahmad Awais, Tammie Lister, and Matt Mullenweg.

Intro to Gutenberg Blocks – Part One and Two

Friday February 02, 2018
Lara Schenck has made some helpful Gutenberg block editor videos to introduce you to blocks and walks you through the anatomy of a block.

Rendering Dynamic Gutenberg Blocks in Theme Template Parts

Thursday February 01, 2018
John Blackbourn shows you how to use a theme’s template part to render a dynamic block, letting you render more complex blocks without having to store the complete output when the block is saved.

How to Convert a Shortcode to a Gutenberg Block

Tuesday January 30, 2018
Daniel Bachhuber walks you through how to convert a WordPress shortcode to a dynamic Gutenberg block.

Future of the Web – Gutenberg is Facebook and WordPress is MySpace

Tuesday January 30, 2018
Robby McCullough suggests Gutenberg and the new block/view paradigm sets WordPress up to be the go-to CMS for the next 10+ years.

How to Build Gutenberg Blocks Using JSX

Monday January 29, 2018
Alex Mansfield walks you through the syntax and compilation requirements of React/JSX, which is at the core of Gutenberg block development.

Discussion on the “Gutenberg” name

Sunday January 28, 2018
There’s an active discussion happening on the Gutenberg Github repo about whether or not the new editor will remain to be called Gutenberg when it’s launched or if the name should be changed.

What’s new in Gutenberg? (25th January)

Thursday January 25, 2018
The latest Gutenberg update iterates further on some design and writing flow details — lighter up/down movers, engaging the UI-less focus mode more often, etc. It also brings many extensibility API improvements.

What’s Next for WordPress: Why the Future is Great with Gutenberg

Monday January 22, 2018
Ahmad Awais speculates how the WordPress industry will change for the better for everyone involved once Gutenberg is introduced into WordPress core.

Building a List Subpages Gutenberg Block

Monday January 22, 2018
Bill Erickson walks you through his development of a Gutenberg block to display subpages of the current page you’re on. This is a good example of working with API data along with Gutenberg.

Zac Gordon and Joe Casabona host a live Gutenberg Q&A

Monday January 22, 2018
Join Zac and Joe for a live Q&A session where you can ask questions about Gutenberg and the changes it will bring to your site.

Gutenberg on humanmade.com

Monday January 22, 2018
Matt Haines-Young gives his thoughts on Gutenberg following his work to implement it on a live site, humanmade.com.

Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More!

Saturday January 20, 2018
Ahmad Awais has launched Create Guten Block, a great developer’s toolbox to help you start building Gutenberg blocks without having to configure or setup anything. The setup required to code Gutenberg blocks efficiently can be daunting and requires JSX, Webpack, Babel and other dependencies. Ahmad’s tool simplifies this greatly.

Going Gutenberg: Chapter I

Friday January 19, 2018
George Gecewicz of Modern Tribe explains why his company is embracing Gutenberg and preparing the popular Events Calendar for the new editor.

Diving Into the New Gutenberg WordPress Editor (Pros and Cons)

Friday January 19, 2018
Brian Jackson of Kinsta goes on a deep dive into the Gutenberg editor. This is a really great post for beginners who are looking for a good overview about Gutenberg and what it can do.

Gutenberg Comes in 5 Phases to WordPress Ecosystem

Wednesday January 17, 2018
Birgit Pauli-Haack gives you a rundown of the Gutenberg release phases, which includes extensive testing, documentation, theme and plugin adoption, and merging into WordPress core.

Block Templates (Gutenberg Handbook)

Wednesday January 17, 2018
The Gutenberg Handbook recently added block templates to its documentation. A block template is defined as a list of block items that can have predefined attributes, placeholder content, and be static or dynamic. Block templates allow to specify a default initial state for an editor session.

Rethinking Meta Boxes with the new WordPress block editor: Part 1

Tuesday January 16, 2018
Edwin Cromley demonstrates how we might approach meta boxes with the new Gutenberg editor. He provides code samples for both the old way of doing meta boxes, as well as a Gutenberg block approach.

Matt Mullenweg’s Q&A About Gutenberg at WordPress Orlando

Tuesday January 16, 2018
Sandy Edwards took some great notes at the Orlando WordPress Meetup where Matt Mullenweg answered questions about Gutenberg’s release, backwards compatibility, accessibility, and more.

How to build a Gutenberg block plugin

Monday January 15, 2018
Gareth Harris of Catapult Themes has written a detailed tutorial on creating a Gutenberg block with InspectorControls, AlignmentToolbar, and other important attributes for a block.

Gutenberg Custom Fields

Sunday January 14, 2018
Gutenberg Custom Fields allows you to control the content of the Gutenberg edit screen by creating pre-filled templates.

How to Set Custom Gutenberg Color Schemes in Your WordPress Theme

Sunday January 14, 2018
Zac Gordon shows you how to set your own custom color palettes for Gutenberg blocks in your theme. Pre-defined color palettes help users choose colors that match the design of the theme.

How to Add Block Templates to Your WordPress Theme or Plugin

Sunday January 14, 2018
Zac Gordon shows you how to add block templates to your WordPress theme or plugin. Block templates let you have certain blocks show up by default for a new post, page or custom post type.

What’s new in Gutenberg? (12th January)

Friday January 12, 2018
The first Gutenberg update of the year, 2.0, is rather big, with updates across the board. The highlights cover several pasting improvements, a more polished publish flow, block API tweaks and extensibility additions, various accessibility improvements, block library updates, and more.

Gutenberg Handbook

Thursday January 11, 2018
This handbook gives you a great overview of blocks, templates, coding guidelines, code examples and more.

Gutenberg Block Examples

Thursday January 11, 2018
A github repository of various Gutenberg block examples. Examples include editable blocks, controls, and media buttons.

Gutenberg Courses

Thursday January 11, 2018
Learn what you can do with the new Gutenberg Editor as a user and a developer. Each course comes with videos to help you learn along the way.

Is Gutenberg the End or a New Beginning for WordPress?

Thursday January 11, 2018
Iain Poulson takes a deep look at the ramifications of adding Gutenberg to WordPress core in version 5.0.

What’s new in Gutenberg? (11th December)

Wednesday January 10, 2018
This release introduces global reusable blocks as the main highlight, but there are also improvements to templates, versioning block attributes, and many extensibility additions as well as bug fixes.

One thousand and one ways to extend Gutenberg today

Tuesday January 09, 2018
Riad Benguella takes a closer look at extensibility in Gutenberg and what can be achieved out of the box.

How We Created A Custom Block For The Gutenberg Editor

Monday January 08, 2018
Organic Themes takes you through the process of creating a custom block in the new Gutenberg editor.

Gutenberg design basics

Monday January 08, 2018
Tammie Lister writes a guide to introduce you to some of the elements you’ll find in the Gutenberg editor.

How to Use the Tooltip Component in Gutenberg

Monday January 01, 2018
Zac Gordon shows you how to add a helpful tooltip to your Gutenberg block components. Zac’s post includes a description of the tooltip feature as well as code examples.

How to Build Custom Gutenberg Blocks: a Beginner’s Guide

Sunday December 31, 2017
Alex Mansfield shows you how to to build custom blocks for the new Gutenberg editor in WordPress.

Getting Ready for Gutenberg

Sunday December 31, 2017
Getting Ready for Gutenberg is an initiative to help the WordPress community prepare for launch of Gutenberg.

How to Add JavaScript and CSS to Gutenberg Blocks the Right Way

Tuesday December 26, 2017
Zac Gordon gives you a detailed rundown of how to properly enqueue javascript and CSS files to Gutenberg blocks.

How to add WordPress theme styles to Gutenberg

Wednesday December 20, 2017
Learn how to add styles to your WordPress theme to support the new Gutenberg editor when it launches in version 5.0.

Ready for Gutenberg?

Tuesday December 19, 2017
An in-depth look at how Gutenberg will affect businesses and the WordPress ecosystem as a whole.

Gutenberg and the Road Ahead

Thursday December 14, 2017
Eric Mann shares his take on WordPress’s new Gutenberg editor from a writer and developer perspective and proposes a “soft fork” of the project.

Gutenberg and the WordPress of Tomorrow

Sunday December 10, 2017
Morten Rand-Hendriksen gives a talk at WordCamp US 2017 about the future of WordPress and gives a detailed rundown of some of Gutenberg’s best features.

State of the Word 2017 Gutenberg Demo

Tuesday December 05, 2017
The State of the Word 2017 featured lots of discussion about Gutenberg and an editor demo from Matias Ventura.

Ads in a Gutenberg World

Friday December 01, 2017
Helen Hou-Sandi speculates what ads might look like in Gutenberg, such as adding dynamic, relevant ad blocks inline with your content.

Gutenberg myth-busting: 10 answers on the future of content creation in WordPress

Friday October 27, 2017
Are you a little hesitant about Gutenberg? Check out this myth-busting post by TinyMCE, which powered WordPress editing for over 10 years.

Gutenberg, or the Ship of Theseus

Monday October 09, 2017
Matias Ventura imagines what the future of WordPress looks like with a much more capable editor like Gutenberg.

We Called it Gutenberg for a Reason

Sunday August 27, 2017
Matt Mullenweg dives into the philosophy behind Gutenberg and how it will benefit developers and agencies, plugin developers, theme developers, web hosts and users.

Gutenberg Boilerplate For Third Party Custom Blocks

Wednesday July 12, 2017
A Gutenberg boilerplate to help WordPress theme and plugin developers get started developing with the upcoming new editor.


Leave a Reply


My Battle Tested Recommendations

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush

Disclaimer: These recommendations contain affiliate links.