WordPress Block Development Tutorials

Developing with WordPress Gutenberg presents new challenges for developers, especially with the introduction of Full-Site Editing. WordPress developers should become familiar with Gutenberg development as this feature becomes more essential.

However, navigating this learning curve can be challenging, primarily due to the complexities of installing and configuring the development environment. To effectively tackle Gutenberg development, a solid understanding of JavaScript, Node.js, React, and Redux is required—these are the core pieces of this process.

While the official WordPress Block Editor Handbook contains plenty of information, it may be overwhelming to beginners. If you’re not sure where to start or are feeling lost, we’ve compiled a list of tutorials to help you navigate WordPress Gutenberg Block development.

Gutenberg Block Development Prerequisites

Before diving into Gutenberg Block development, make sure you understand the following:

HTML
CSS
JavaScript
React
WordPress plugin development

These prerequisites will lay a solid foundation for your journey into WordPress Gutenberg development.

21 WordPress Gutenberg Development Tutorials for Developers

Staff Pick

Ryan Welcher Codes

Ryan Welcher works for Automattic as a WordPress Core Contributor and Developer Relations Advocate for Gutenberg and WordPress. Every Thursday at 10:30 a.m. Eastern Time, he streams on Twitch. He is highly knowledgeable in Gutenberg development. You'll be astonished to learn that all of these useful resources are completely free.

Creator: Ryan Welcher
Staff Pick

Developing blocks without React

In depth step by step tutorial for creating Gutenberg Blocks for WordPress with plain JavaScript. In this series you will learn to build block without installing Node.js/npm, no build steps and no node_modules folder to wrangle.

Creator: Jonathan Bossenger
Build an Accordion Block

Create an accordion WordPress block with @wordpress/create-block. In this video, you will learn how to use --variant dynamic for building a dynamic block.

Creator: Damon Cook
Staff Pick

Creating Custom Attributes on Dynamic Blocks

Create a WordPress dynamic Gutenberg block with easy and simple steps. You will learn how to create a php shortcode and turn it into a dynamic block.

Creator: Rob Ruiz
viewSource

Aurooba Ahmed and Brian Coords discuss technology, web development, and WordPress on a weekly basis. This channel contains in-depth tutorials such as "Getting Started with React Inside WordPress", "Digging into ACF Blocks for the Block Editor", and many more.

Creator: Aurooba Ahmed and Brian Coords
Advanced Gutenberg Block Development

Advanced Gutenberg Block Development series by Imran Sayed. Imran is a WordPress Developer at rtCamp.

Creator: Imran Sayed
Building Native WordPress Gutenberg Blocks

Laurence Uchiha, a WordPress Developer at Freemius, has a YouTube channel with an extensive collection of WordPress video tutorials. In his "Building Native WordPress Gutenberg Blocks" series, you'll learn about tooling, sidebar setup, adding Rich Text Content, and registering Block Format Types.

Creator: Laurence Uchiha
Gutenberg Block Development

Phil Sola of BRIGHT and James Koussertari of Gutenberg Market created wpBros Academy. In their YouTube channel you will find a tutorial on Gutenberg Block Development, that cover topis such as Gutenberg Block Editor UI, Creating a Multi Block Plugin, Building a "RichText" Paragraph Block, Adding block settings to the Settings Sidebar (Inspector Controls) and Inner Blocks.

Creator: Phil Sola and James Koussertari
Create WordPress Block Plugins for Block Editor

When learning block development, new developers fears that there will be too many inconsistencies because of all the rapid changes made by WordPress Core team. Krishna's videos contains the most recent approach for creating a Gutenberg block, along with thorough explanations. This will help you comprehend the changes made by the WordPress core team later on.

Creator: Krishna Kant Chourasiya
Let’s Build a Custom Block in One Hour

Over the years, Nick Diego, a WordPress Core developer and Developer Relations Advocate, has published an overwhelming number of tutorials on block building. Encouraging developers in adopting the Gutenberg block by generating in-depth explanation articles, videos, WordCamp talks, and so on. This video will teach you how to make a WordPress block in 1 hour.

Creator: Nick Diego
How to create a WordPress Gutenberg Custom Block

Joshua Herbison's step-by-step WordPress development tutorial on how to make a Gutenberg Block. It can be a good starting point for anyone interested in learning Gutenberg block development. If you know a little HTML, CSS, and JavaScript, you are good to go.

Creator: Joshua Herbison
Automate Gutenberg block development in WP projects

Learn how to use JavaScript developer tools to create WordPress plugins and blocks. Greg Ziókowski's webinar is useful for WordPress agencies and developers aiming to streamline their WordPress development workflow.

Creator: Greg Ziółkowski
Level Up Block Building Skills

Greg Ziókowski's WordCamp Europe 2022 session will teach you how to improve the block editing experience by using custom blocks. The presentation not only covered advanced programming techniques, but it also provided valuable insight into the process of submitting a new plugin to the Block Directory.

Creator: Greg Ziolkowski
WordPress Block Editor Development

Aurooba Ahmed, co-host of the viewSource show and a WordPress Core Contributor, has plenty of useful videos on WordPress-related topics. These videos cover a variety of topics, such as using theme.json in WordPress themes, ways for locking down or activating objects in the WordPress Block Editor, and the simple process of adding several blocks to a WordPress plugin.

Creator: Aurooba Ahmed
Custom Responsive Settings in Gutenberg Blocks

Brian Coords, HDC's Technology Director and co-host of the viewSource show, has a YouTube channel with videos on a variety of topics, including Easy custom blocks with InnerBlocks in Gutenberg, WordPress Custom Lists with Register Block Style, Gutenberg Blocks Custom Responsive Settings, Tutorial ACF Blocks Post Carousel, Image management in Custom Gutenberg and many more.

Creator: Brian Coords
WordPress Gutenberg Sidebar Plugin Development

Robiz Show was created by Rabiul Islam Robi, a WordPress Engineer at rtCamp. His videos cover a wide range of topics, including WordPress, Gutenberg, Vue.js, and many others. WordPress Gutenberg Sidebar Plugin Development by Rabiul is a fantastic contribution, and you'll be surprised to realize that it's a free tutorial rather than a paid course.

Creator: Rabiul Islam Robi
Custom Gutenberg Block Development

Zakaria has a considerable number of WordPress Block plugins that are hosted on the WordPress plugin repository. You can learn from a developer with hands-on experience maintaining WordPress block plugins used by thousands of users. His YouTube channel contains A Complete Video Course on Developing the Custom Gutenberg Block with Native Components.

Creator: Zakaria Binsaifullah
Gutenberg Times

Birgit Pauli-Haack is a WordPress developer advocate, curator of Gutenberg Times, and podcast host of the Gutenberg Changelog. Birgit Pauli-Haack hosts a bi-weekly podcast where she discusses things Gutenberg block editor.

Creator: Birgit Pauli-Haack
Block Development with Scaffolding

"How to Start Block Development with Scaffolding" is a fantastic WordCamp talk by Greg Ziókowski, a WordPress Core contributor. Greg demonstrated how to make the most of the Gutenberg core team's scaffolding command.

Creator: Greg Ziółkowski
Blazing fast block development

Lee Shadle of blockHandbook shares advice on faster and easier Gutenberg block development. It is, in my opinion, one of the most insightful talks of WordCamp Europe 2021.

Creator: Lee Shadle
Plugin Development in a Block Editor World

Joshua Copeland, CTO of Remote Dev Force, described the foundations of Blocks and the power of creating custom blocks for special content in this WordCamp Las Vegas 2019 talk.

Creator: Joshua Copeland