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.
- 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.
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
.
- A basic introduction to creating a Gutenberg block using
- 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.
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.
- Jason Yingling. Building Custom Gutenberg Blocks with the RichText Component. 2018.
- 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.