WordPress Gutenberg

Resources for learning Gutenberg development. You may also want to refer to the Learn WordPress JavaScript page on this site.

Series

• Oliver Lindberg, Joe Casabona, Mel Choyce, Sarah James, Luc Princen, Dan Schutzsmith. Get Started with Gutenberg. HeartInternet, 11/2019. **
  • A PDF ebook, you have to give name/email in order to receive, but this is a really great intro. I’d particularly recommend Mel Choyce’s chapter Designing Your First Gutenberg Block.
  • Covers design, sketchpress, javascript blocks, acf blocks, and paths for upgrading if still on older WP version (<5.0).
• Going Gutenberg. Modern Tribe, 2018.
  • 1. Change is Coming – 1/2018
  • 2. Replacing Metaboxes – 2/2018
  • 3. Events Gutenberg Extension – 3/2018
  • 4. Design Challenges – 4/2018
  • 5. Block Dashboards – 5/2018
  • 6. Classic Blocks – 7/2018
  • 7. Rolling Your Own Redux – 10/2018
• Lara Schenk, Andy Bell, Chris Coyier. Learning Gutenberg. css-tricks, 2018-2019.
  • 1. Introduction.
  • 2. What is Gutenberg, Anyway?
  • 3. A Primer with create-guten-block.
  • 4. Modern JavaScript Syntax.
  • 5. React 101.
  • 6. Setting up a Custom Webpack.
  • 7. Building Our Custom Card Block.
• David Gwyer. WordPress Gutenberg Block API. envatotuts+, 2018.
  • 1. An Introduction.
  • 2. Block Look and Feel.
  • 3. Creating Custom Blocks.
  • 4. Extending Blocks.
• Jason Yingling. Gutenberg Series. 2018.
  • 1. Best Practices for Blocks and Themes.
  • 2. Enqueuing Scripts and Styles for Blocks.
  • 3. Understanding Modern JavaScript.
  • 4. Working with the Block API.
    • Found this article very helpful.
  • 5. Building Custom Blocks with the RichText Component.
  • 6. Building Dynamic Blocks.
  • 7. Using Create Guten Block to Build Plugin with Multiple Blocks.
  • 8. Reporting Gutenberg Bugs.
  • 9. Automatically Create Color Palettes.
  • 10. Notes on Building a Site with Gutenberg.
    • Yingling feels the block editor is an improvement over TinyMCE but sees some significant challenges with using it for page building and creating themes for it. Article is from 11/18, a lot has happened with Gutenberg since then.
  • 11. Working with Editor Styles.
  • 12. What You Can Do With Gutenberg.
• Josh Pollock. Learning React for WordPress Series. torque, 2018.
  • 1. Do You Need to Know React as a WordPress Developer?
  • 2. React Basics for WordPress Developers.
  • 3. Using React for WordPress Gutenberg Development.

General

• Leonardo Losoviz. Essentials for Building Your First Gutenberg Block. LogRocket, 7/2020.
  • Doesn’t show you how to create the block but offers a number of helpful hints on block construction. Worth a read.
• Peter Tasker. Creating a Custom Gutenberg Block in WordPress. Delicious Brains, 2018.
  • Good article, but was written in early beta stages of Gutenberg, so may not be the most current.
• Jason Bahl. Two Ways to Build Gutenberg Blocks. 2018.
  • Fairly extensive article that shows how to create blocks using ACF and also create-guten-block.
• Muhammad Muhsin. Getting Started With Gutenberg By Creating Your Own Block. smashing magazine, 2018.
  • Teaches how to create a testimonials slider block.
• Official WordPress Block Editor Handbook. wordpress.org.
• Zac Gordon. How to Use registerBlockType() to Create Blocks in WordPress. 2017.
  • Good article but may be behind current tech.
• Imran Sayed. Custom Gutenberg Block Using ES6, Webpack, Babel, @wordpress/scripts Tutorial. medium, 2019.
• Leonardo Losoviz. Setting Up Your First Gutenberg Project. logrocket, 7/2020.*
• Justin Foell. WordPress Blocks Backwards Compatibility. webdevstudios, 12/2020.

For Beginners

• Nick Schaferhoff. Why and How to Create a Gutenberg Block – A Tutorial for Beginners. Torque, 2019.
  • A basic introduction to creating a Gutenberg block using create-guten-block.
• Will Morris. How to Create Custom Gutenberg Blocks in WordPress. flywheel, 2019.
  • Basic introduction, shows how to create a block using the Block API and discusses briefly two third party plugins that can create blocks.
• Tom Rankin. A New Developer’s Guide to Creating Blocks. torque, 2019.
• How to Learn Gutenberg Development. wpdevelopment.courses, 2019.
• Bill Erickson. Building a Gutenberg Block. 2018.
• Shaumik Daityari. A Gutenberg Tutorial for Beginner Developers: Create Your First Block Plugin. codeinwp, 2020.
• Jan Koch. Coding Your First WordPress Gutenberg Block. liquidweb, 2020.

Philosophy and Opinions

• Craig Hewitt. Lessons Learned Redesigning a SaaS Website with Gutenberg. wp mayor, 2019.
  • Outlines some of the advantages, disadvantages, and roadblocks encountered when refactoring the Castos site with Gutenberg.
• Leonardo Losoviz. Implications of Thinking in Blocks Instead of Blobs. smashing magazine, 2018.
  • Leonardo highlights the ways in which blocks which change how we develop for the web, along with the advantages/disadvantages of Gutenberg as it is (or was at the time).
• Mel Choyce. Gutenberg Phase 2. wordpress.org, 2018.
  • Mel discusses the focus of Phase 2 of Gutenberg. If you want to understand where Gutenberg is heading, this helps.

Create Guten Block

• Ahmad Awais. create-guten-block. github, 2019.
  • Official repository for create-guten-block.
• Maedah Batool. Building Gutenberg Blocks with create-guten-block. envatotuts+, 2018.
  • Basic introduction to create-guten-block.

Extending Blocks

• Antonio Villegas. How to Add a Button to The Gutenberg Editor. Nelio Software, 2019.
  • Great article, includes code.
• Jeffrey Carandang. Extending Gutenberg Core Blocks with Custom Attributes and Controls. 2019.
  • Explains how to add custom attributes, create custom controls, and apply custom element classes.

Converting Shortcodes to Blocks

• Josh Pollock. How to Convert a WordPress Shortcode to Gutenberg Blocks. Caldera Forms, 2019.
  • Recommended by David Hayes.

Reusable Blocks

• Bill Erickson. Reusable Blocks Accessible in WordPress Admin Area. 2019.
• Rachel McCollin. Create Duplicate Content with Gutenberg. wpmudev, 2018.
• Randy A. Brown. How to Create Gutenberg Templates. elegant themes, 2018. *
  • Offers multiple ways to create templates out of a series of blocks, including through a CPT, code included.

Inner Blocks

• Igor Benic. How to Enable Inner Blocks in your Gutenberg Block. 2018.

Update Plugins to Use Blocks

• Igor Benic. How to Prepare Your Plugins for WordPress Gutenberg. envatotuts+, 2018.
  • Shows how to add a block to your plugin as well as disable the Gutenberg editor for your CPTs if necessary.
• Igor Benic. Integrating Gutenberg Blocks in Existing WordPress Plugins. 2018.
• Hardeep Asrani. How to Adapt Your Plugin for Gutenberg: Part 1 (Block API). codeinwp, 2018.
• Hardeep Asrani. How to Make Your Plugin Compatible with Gutenberg: Part 2 (Sidebar API). codeinwp, 2018.

Plugins to Build Blocks

• Colin Newcomer. How to Create a Custom Gutenberg Block in WordPress (Without Code). wplift, 2019.
  • Uses the Lazy Blocks plugin.
• How to Create a Custom Gutenberg Block in WordPress (Easy Way). wpbeginner, 2019.
  • Explains how to use the Block Lab plugin to quickly build Gutenberg blocks with minimal coding.
• Bill Erickson. Building a Block with Advanced Custom Fields. 2018.
• Sjardo Janssen. How to Create a Gutenblock with ACF. yoast, 2019.

Styling Blocks

• Bill Erickson. Block Styles in Gutenberg. 2019.
• Joe Casabona. Styling the Gutenberg Columns Block. css-tricks, 2018.
• David Gwyer. Create Style Variations for WordPress Gutenberg Blocks: Part 1. envatotuts+, 2018.
• David Gwyer. Create Style Variations for WordPress Gutenberg Blocks: Part 2. envatotuts+, 2018.
• Kjell Reigstad. Customizing Gutenberg Blocks with Block Styles. themeshaper, 2019.
• Jason Yingling. Enqueueing Scripts and Styles for Gutenberg Blocks. 2018.
• Zac Gordon. How to Add JavaScript and CSS to Gutenberg Blocks the Right Way in Plugins and Themes. 2017.
  • Article is a bit older but good enough to get David Hayes’ recommendation in April 2018.

Other Specific

• Zac Gordon. How to Use wp.i18n.__() to Allow for Translation of Your Gutenberg Block Text. 2018.
• Zac Gordon. Create Additional Search Keywords for Your Gutenberg Editor Blocks. 2017.
• Zac Gordon. How to Add Custom Icons to Gutenberg Editor Blocks in WordPress Using Dashicons or SVG. 2017.
• Bill Erickson. Building a Header Block in WordPress. 2019.
  • Uses ACF.
• Bill Erickson. “Tweet this” Blockquote in Gutenberg Block Editor. 2019.
• Bill Erickson. Block-based Widget Areas. 2019.
• Bill Erickson. Gutenberg Color Palette and Button Styling. 2019.
• Bill Erickson. Full and Wide Alignment in Gutenberg. 2019.
• Bill Erickson. Change the Width of Post Title in Gutenberg. 2018.
• Bill Erickson. Using Block Templates with Gutenberg. 2019.
• Bill Erickson. Disabling Gutenberg on Certain Templates. 2019.
• Bill Erickson. Access Block Data with PHP Using parse_blocks() and render_block(). 2019.
• Ryan Welcher. Extending Gutenberg with SlotFill and Filters. 10up, 2019.
  • Discusses a plugin built by 10up to provide custom meta box-esque functionality to the Gutenberg page editor.
• Igor Benic. How to Create a Repeater Field with wp.template(). 2017.
• Jeff Starr. How to Selectively Enable Gutenberg Block Editor. digwp, 2019.

Components

• RichText
  • Jason Yingling. Building Custom Gutenberg Blocks with the RichText Component. 2018.
    • How to build a custom block using the RichText component. Also shows how to create lists in a single block.
  • Official WordPress Block Editor Handbook. RichText Reference.
  • Official Gutenberg Github Repository. README for rich-text.
• Zac Gordon. How to Use the Tooltip Component in Gutenberg. 2018.
• Igor Benic. Gutenberg Components Series. 2018-2019.
  • ServerSideRender. 2019.
  • Form Token Field (Tags). 2019.
  • ColorPicker. 2019.
  • Modal. 2019.
  • Autocomplete. 2018.
  • BaseControl. 2018.

Resources

• Block Attributes Glossary Plugin
  • When installed on a WP site it generates a glossary of all the blocks available on the site and the attributes available to each.
• Hot Module Replacement for Gutenberg Blocks from HumanMade.

Gutenberg JavaScript

• Josh Pollock. Do You Need To Know React As a WordPress Developer? Torque, 2018.
  • Good overview of this topic, includes an example of a very basic Gutenberg block, explains how WP abstracts from React.
• Josh Pollock. Testing JavaScript: The WordPress Way. 2019.
• Antonio Villegas. Useful JavaScript Tools for WordPress Developers. Nelio Software, 2018.
  • Brief introduction to Prettier, ESLint, PostCSS, Babel, and Webpack.
• Jason Yingling. Understanding Modern JavaScript in Gutenberg Development.
  • Brief introduction, touches on what counts as modern, JSX, React’s relationship to Gutenberg, and some of the important JS libraries to use with Gutenberg.
• Manjunath M. React JS for WordPress Users: A Basic Introduction. elegant themes, 2018.

A Chronology of Gutenberg

Please see the page dedicated to a history of Gutenberg’s development.