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 in “ESNext”. ESNext refers to the next versions of the language standard, plus JSX syntax.

Note that it is not required to use ESNext to create blocks or extend the editor, you can use classic JavaScript. However, once familiar with ESNext, developers find it is easier to read and write, thus most code examples you’ll find use the ESNext syntax.

• Start custom block editor tutorial