Building a custom block editor Edit

The purpose of this tutorial is to step through the fundamentals of creating a custom instance of a “block editor”.

The editor you will see in this tutorial (as above) is not the same Block Editor you are familiar with when creating Posts in with WordPress. Rather it is an entirely custom block editor instance built using the lower-level @wordpress/block-editor package (and friends).

Following this tutorial #Following this tutorial

To follow along with this tutorial, you can download the accompanying WordPress plugin which includes all of the examples for you to try on your own site.

Top ↑

Code Syntax #Code Syntax

Code snippets are provided using JSX syntax. Note it is not required to use JSX to create blocks or extend the editor, you can use plain JavaScript. However, once familiar with JSX, many developers tend find it is easier to read and write, thus most code examples you’ll find use that syntax.

• Start custom block editor tutorial