Gutenberg – A Completely New Paradigm for Working in WordPress

Website interfaces have changed dramatically since the introduction of WordPress in 2003. We have been conditioned by rich, modular user-interfaces that adapt to us and let us build what we want to see. Now we want to swipe-right, pin, like and edit on-the-fly within our browser and WordPress pages.

In an effort to bridge the WordPress user-experience into the new world of clean, advanced user-interfaces and diverse devices, the open-source community that builds and maintains the WordPress CMS has introduced a new editing concept called Gutenberg. Harking back to the dawn of publishing, WordPress’ Gutenberg editor is a new way of thinking about how information is organized within your whole website.

Ultimately, we’re looking ahead to the next 15 years of WordPress, where visitors will be consuming your company’s information from any number of interfaces—not limited to computer screens and mobile phones. Maybe customers will be using information from your site on VR goggles, car windshields, or even internet-connected devices in the home like the kitchen countertop.

The primary goal of Gutenberg is to make your website modular—to change the editing experience from one static panel that you edit to an integrated set of pieces and groups of content that you can manipulate. Nashville Geek has been building modular interfaces for our WordPress customers for years, and starting with the upcoming 5.0 release, those custom, rich-content features are being built into WordPress core. That’s a major shift in the way you’ll be working with content in your website.

Enter “blocks”

Where you used to have one editor in WordPress, now the editing experience is broken down into smaller content areas called blocks (we affectionately call them “Gutenblocks”). Blocks can be any kind of content, from simple to complex.

On the simple side, WordPress comes loaded with blocks for headings, paragraphs, lists and images among other standard blocks you’d expect in a text editor. You’ll be familiar with these as soon as you start writing your content. Even if you paste your content in from another source, WordPress will interpret it as a series of blocks. More advanced types of content can be added as single blocks, like image galleries, video embeds or even lists of recent posts.

Where the real magic of Gutenberg happens is with layout blocks, from creating multiple columns to new content sections. These blocks are “nested”, meaning they allow you to define parts of your page layout that have other groups of blocks within them. This allows you full control over not only the formatting of the content, but the layout as well.

With that in mind, the WordPress team has developed a way for you to have pre-made sets of blocks called templates. These templates can be made so you don’t have to repeat yourself for every similar group of blocks. You simply add the block template, then insert your content into the pre-defined Gutenblocks that are there as part of the template.

Blocks aren’t only limited to what comes with WordPress. Now you can add new types of blocks via plugins or have them customized by your site development team (ahem, like Nashville Geek). WooCommerce is a great example of a plugin that will offer new blocks. With a product block, you can add a preformatted product display and add-to-cart button anywhere within the content of your site. Where you may have, in the past, used a shortcode to introduce dynamic content to your post, you can now use a custom block instead.

What does Gutenberg mean for your WordPress website?

Gutenberg is changing the way we think about the content in your site. Previously, the smallest unit of content in WordPress core was a whole page or post. The WordPress REST API could only access your content on that level, meaning you were limited to distributing your site’s data on a post-by-post basis. Now, Gutenberg will allow you to expose the blocks themselves to the API. WordPress will be able to redistribute your site’s data on many different levels, to be consumed by more than just the one screen we have been traditionally engaging.

A great example of this type of open web, distributed content would be a “recipe” block within your site, now set free of the single page, which can be displayed by our example countertop-of-the-future via the REST API. The countertop could project only the recipe contents while you cooked. Or the ingredients, now being a separate block, could be read by a recipe app and added to your grocery list. We are getting ready for a future where your website’s content can be used any number of ways beyond the web, but still editable and completely viewable in WordPress as a single page.

Blocks themselves even become reusable and distributable within the website itself. You won’t have to recreate the same piece of key information again and again. For instance, if you have a testimonial block in one article and you want to use it in another, you can convert that block to a “reusable” block. Now that block is available in the editor on any other page! If you edit any instance of the block, it will edit that information everywhere the block is reused. That’s mind-blowing.

What the web will look like in another 15 years is anyone’s guess, but with Gutenberg, you have a way to build a WordPress site that is ready for the world of distributable, structured content.