Building Web Apps with WordPress, 2nd Edition

Chapter 11. Project Gutenberg, Blocks, and Custom Block Types

When the new WordPress editor was proposed in January 2017, Matt Mullenweg wrote:

The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Less than two years later, the block editor (aka the Gutenberg editor) was included in WordPress version 5.0, bringing with it a new way to edit posts and a new way to develop experiences with WordPress.

Note

The original project to build the block editor was codenamed “Gutenberg.” We now prefer the term block editor or simply WordPress editor, but many people and posts you run across will refer to the editor itself as Gutenberg.

The Gutenberg team has put together the Block Editor Handbook to help both users and developers get up to speed with using Gutenberg. The Block Editor Handbook is a tight, well-written, and evolving piece of documentation that you should read. Like, right now go read it, and then come back here. We will reference specific sections of this handbook later on.

In this chapter, we briefly cover the general features of the block editor, build a minimal block as a starting point, and then dive a bit deeper into the features most relevant to application development.

The block editor is built primarily in JavaScript (using the UI), and managed as a Node.js project. Though the ...