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:
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!
