Block Editor Handbook

WordPress Gutenberg Editor

Gutenberg is a visual style website builder designed to make building websites easier for publishers.

It’s called visual to describe the process of building a site using a drag and drop or point and click interface on a virtual canvas that can be visualized how it’s going to appear as you design it.

Instead of manipulating code, with this style of website building the publisher is manipulating web page elements like the header or footer. Those web page elements are called Blocks.

This is a way of building websites that’s been around for a long time in different forms, since at least the late 1990’s with the introduction of the Macromedia (now Adobe) Dreamweaver website building software.

Gutenberg 13.0 shows off new features that will be included in WordPress 6.0 in May 202

Read more here

*Personally, I don’t use Gutenberg, but everyone should get to know him.

History about Gutenberg link is here.

I believe you will enjoy reading this post and the music at the same time

  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.

Top ↑

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

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

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.

 

 

Source

If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.

Thanks for testing Gutenberg!

👋

Scroll to Top