Getting started Edit

Gutenberg is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. The project is right now in the second phase of a four-phase process that will touch every piece of WordPress — Editing, Customization (which includes Full Site Editing, Block Patterns, Block Directory and Block based themes), Collaboration, and Multilingual — and is focused on a new editing experience, the block editor (which is the topic of the current documentation).

Quick view of the block editor

Legend :

  1. Block Inserter
  2. Block editor content area
  3. Settings Sidebar

Using a system of Blocks to compose and format content, the new block-based editor is designed to create rich, flexible layouts for websites and digital products. Content is created in the unit of blocks instead of freeform text with inserted media, embeds and Shortcodes (there’s a Shortcode block though).

Blocks treat Paragraphs, Headings, Media, and Embeds all as components that, when strung together, make up the content stored in the WordPress database, replacing the traditional concept of freeform text with embedded media and shortcodes. The new editor is designed with progressive enhancement, meaning that it is back-compatible with all legacy content, and it also offers a process to try to convert and split a Classic block into equivalent blocks using client-side parsing. Finally, the blocks offer enhanced editing and format controls.

The Editor offers rich new value to users with visual, drag-and-drop creation tools and powerful developer enhancements with modern vendor packages, reusable components, rich APIs and hooks to modify and extend the editor through Custom Blocks, Custom Block Styles and Plugins.

Learn to use the block editor to create media-rich posts and pages.

Create a Block Tutorial Create a Block Tutorial

Learn how to create your first block for the WordPress block editor. From setting up your development environment, tools, and getting comfortable with the new development model, this tutorial covers all what you need to know to get started with the block editor.

Top ↑

Develop for the block editor Develop for the block editor

Whether you want to extend the functionality of the block editor, or create a plugin based on it, see the developer documentation to find all the information about the basic concepts you need to get started, the block editor APIs and its architecture.

Top ↑

Contribute to the block editor Contribute to the block editor

Everything you need to know to start contributing to the block editor . Whether you are interested in the design, code, triage, documentation, support or internationalization of the block editor, you will find here guides to help you.