Browse: Home / Block Editor Handbook

Block Editor Handbook Edit

Hi! 👋 Welcome to the Block Editor Handbook.

The Block editor is a modern and up-to-date paradigm for WordPress site building and publishing. It uses a modular system of Blocks to compose and format content, and is designed to create rich and flexible layouts for websites and digital products.

The editor consists of several primary elements, as shown in the following figure:

Quick view of the block editor

The elements highlighted in the figure are:

  1. Inserter: A panel for inserting blocks into the content canvas
  2. Content canvas: The content editor, which holds content created with blocks
  3. Settings sidebar: A sidebar panel for configuring a block’s settings (among other things)

Through the Block editor, you create content modularly using Blocks. There are a number of core blocks ready to be used, and you can also create your own custom block.

A Block is a discrete element such as a Paragraph, Heading, Media element, or Embed. Each block is treated as a separate element with individual editing and format controls. When all these components are pieced together, they make up the content that is then stored in the WordPress database.

The Block Editor is the result of the work done on the Gutenberg project which is aimed to revolutionize the WordPress editing experience.

Besides offering an enhanced editing experience through visual content creation tools, the Block Editor is also a powerful developer platform with a rich feature set of APIs that allow it to be manipulated and extended in a multitude of different ways.

This handbook is focused on block development and is divided into five sections, each serving a different purpose.

Getting Started

For those just starting out with block development this is where you can get set up with a development environment and learn the fundamentals of block development. Its Glossary of terms and FAQs should answer any outstanding questions you may have.

How-to Guides

Here you can build on what you learned in the Getting Started section and learn how to solve particular problems that you might encounter. You can also get tutorials, and example code that you can reuse, for projects such as building a full-featured block or working with WordPress’ data. In addition you can learn How to use JavaScript with the Block Editor.

Reference Guides

This section is the heart of the handbook and is where you can get down to the nitty-gritty and look up the details of the particular API that you’re working with or need information on. Among other things, the Block API Reference covers most of what you will want to do with a block, and each component and package is also documented here. Components are also documented via Storybook.

Explanations

This section enables you to go deeper and reinforce your practical knowledge with a theoretical understanding of the Architecture of the block editor.

Contributor Guide

Gutenberg is open source software and anyone is welcome to contribute to the project. This section details how to contribute and can help you choose in which way you want to contribute, whether that be with code, with design, with documentation, or in some other way.

Top ↑

Further resources

This handbook should be considered the canonical resource for all things related to block development. However there are other resources that can help you.

Top ↑

Are you in the right place?

This handbook is targeted at those seeking to develop for the block editor, but several other handbooks exist for WordPress developers under developer.wordpress.org: