Introduction to Block Development: Build your first custom block

Welcome

Hi, and a very warm welcome to this step-by-step tutorial on building a Gutenberg block. We’re thrilled that you’re interested in learning about block development.

The tutorial that you’re about to embark on is a progressive sequence of lessons that will take you from first steps to mastery.

Via a practical example project the course will provide you with a solid foundation in developing custom blocks for Gutenberg and will arm you with the concepts and knowledge that you will need to go on to work on your own Gutenberg block projects.

Since this is a progressive tutorial we recommend that you follow the lessons in sequence, as each lesson builds on what was learned earlier.

So, what will you be building in this course? You will start by ensuring that you have a suitable development environment for creating blocks and then scaffold your first plugin that registers a block with a simple terminal command. Once you’ve taken a look at the structure of the scaffolded project you will go on to build a static block that implements a “newspaper columns” layout that can contain headers, paragraphs and images as child blocks.

As well as being a good vehicle for learning block development this will also be a useful and usable block that you can actually use in posts and pages on your own, or on your clients’, sites. The final result will enable you to add a block to your post or page that looks something like this:

An example of the “newspaper columns” block that you will be developing in this course.

As you can see, the block renders content to look exactly like an article in a newspaper. As you work through the project you will add configuration options that enable the user to customise the look and feel of the block to their liking or to match a style guide.

This project, which forms the core of this tutorial, covers the key concepts that you will need to know in order to go on to develop your own blocks in the future. These concepts will be introduced to you gradually as you build and refine the project, thereby providing you with a solid foundation in block development.

Before you get started properly on this course we would like to draw your attention to the Block Editor Handbook. You will find this to be an essential resource as you develop your skills and also for when you want to take things further after completing this course. We will be making frequent references to it throughout this course.

We hope that you are as excited as we are about the learning experience that you’re about to embark on, so without further ado let’s get started!

Module 1 – Getting Started

This first module will guide you through the steps to get you started with block development. From setting up your development environment to scaffolding the plugin and understanding its structure, you’ll be up and running in no time.

Lessons

What is a block? Set up your development environment Scaffold your first block Understand the structure of the project Build and run your project Start editing the project

Module 2 – The basics of block development

Here we guide you step by step through the very basics. You’ll enable the user to add their own content and provide them with some basic customisation options.

Lessons

Make the block interactive Add 'Block Supports' controls Define default settings in block.json

Module 3 – Adding customisation options

In this module you’ll deepen your knowledge further as we guide you through the process of creating your own options that will enable the user to customise the block in the editor.

Lessons

Create custom inspector panel controls Add more configuration options Configuration options for the separator

Module 4 – Taking things further

The example project really starts to take shape in this module. The InnerBlocks component allows the user to add child blocks, and you’ll add style variations and other refinements.

Lessons

Work with the InnerBlocks component Refining the project Add style variations Add configuration options for the style variations Conditionally display controls

Module 5 – Wrapping up

That’s it, you’re done! You’re ready to be cast adrift and to go on to create something awesome with your new knowledge and skills.

Lessons

The finished project Debugging and troubleshooting Finding information when you need it