Gutenberg: Understanding Blocks in the New Editor

Sometime in 2018, WordPress expects to release Gutenberg, the first major change to its longstanding TinyMCE content editor in years. Named for Johannes Gutenberg, inventor of the printing press, Gutenberg promises to revolutionize the way content is created in WordPress and make online publishing even easier.

The Gutenberg editing interface is based on a system of blocks—movable, editable “containers,” for creating rich posts with both text and multimedia elements. The block structure promises to make content creation easier and more intuitive for users of all skill levels, but it also represents a major departure from the rich text editor WordPress users already know.

What Makes Gutenberg Different?

WordPress is the world’s most popular website builder, and it’s also a complete content management system with a robust set of tools for creating both static pages and dynamic posts. To create content of any kind, users access the WordPress content editor, which offers options for working in a visual (WYSIWYG) or text-based mode. In either mode, users have access to a rich set of word processing tools similar to those found in platforms like Microsoft Word.

Within this editor, it’s possible to insert different kinds of content elements from a variety of sources, but that involves a variety of approaches. Along with text, a page or post could include acceptable media files from the site’s own media library, pasted links from external sites, shortcodes for various specialized elements from plugins, and sidebar or footer widgets that can contain both text, plugin assets, and embeds from external sites. Managing and integrating all these things can be cumbersome and require multiple actions in order to get a page or post to look and perform as it should.

Gutenberg promises to change all that, with a new type of block-driven content editor that, according to WordPress.org, will make it easy for anyone—from beginning users with no experience in coding to seasoned developers—to create rich pages and posts quickly and easily. For new users, Gutenberg’s block structure provides a way to organize content visually and add a variety of media without having to make adjustments for multiple file types and interfaces. For developers, the block system allows for customizing existing block types as well as for creating new ones for specific kinds of functionality.

What Are Blocks in Gutenberg?

The existing WordPress content editor is simply an open editor into which a user loads any and all relevant content from a variety of sources. In that way, a single post or page can contain not only text but also a wide range of multimedia elements. But Gutenberg’s blocks act like templates for different kinds of content, so that they can be placed in their own blocks and moved, rearranged, deleted, and modified to get the layout and visual appearance a user is looking for.

On the technical side, a WordPress block is a JavaScript object that is also rendered on the back end in PHP, the programming language used to create WordPress itself. Each block is a self-contained unit designed to hold a certain kind of content.

How Are Blocks Used?

In Gutenberg, every post or page consists of a combination of relevant block types, filled with appropriate content. In the current WordPress editor, a user selects either Post or Page from the site’s admin dashboard and a single window opens with all available tools for formatting text and placing images or other content within it. But in Gutenberg, creating a new page or post begins with selecting the blocks you’ll need for the kind of content you plan to include.

Gutenberg comes with a set of default blocks for adding basic elements such as text, headers, and images. All a user has to do is to select the desired block type from the Add Block menu when starting either a new page or a post. Once a block is selected, it appears in the editor, ready to be filled. Selecting a block opens all the available tools related to the block, such as editing tools for header or paragraph blocks or sizing and placement options for images added to image blocks either from external sources or from the media library.

The block library also includes blocks premade to handle specialized content such as embedded videos, content for sharing, and galleries. It’s also possible to add custom blocks to add features specific to a site’s unique needs. Users with development experience can create their own custom blocks, but any user can access the expanding library of custom blocks that are being produced by members of the WordPress community. And, much like plugins and themes, custom blocks may be purchased from third-party developers taking advantage of a new and growing market for new WordPress assets.

Gutenberg’s block system can streamline the content creation process in many ways, with benefits for new and experienced users alike. Blocks can fill many functions previously provided only by added plugins, such as creating galleries or slideshows, and they can work with any theme. There’s no limit to the number of blocks that can be added to a post or a page, and blocks can be moved, copied, or edited at any time.

Like any other aspect of the WordPress platform, blocks can be modified by any WordPress user and shared among the WordPress community. That makes it possible for developers to create new block types with specialized functions or customize existing block types even further to meet specific needs.

The full version of Gutenberg is expected to be included with the upcoming release of WordPress 5.0 in late 2018. But it’s now available as a WordPress plugin that can be installed alongside the “classic,” content editor for anyone who wants to take this new content creator for a test drive before the full release. Gutenberg’s block-based content creation system may take some getting used to—but its developers promise that this new, seamless page builder is the next step in the quest to make online publishing easy and accessible to everyone.

%d bloggers like this: