Heads up, Performance Foundry friends! There’s are big, beautiful changes ahead with the introduction of the upcoming WordPress version 5.0!

Project Gutenberg, the block editing experience named for Johannes Gutenberg, inventor of the printing press, is coming of age. Gutenberg the beta program is wrapping up, and the WordPress Block Editor is here with WordPress 5.0.

What is Gutenberg?

A block editor supreme, Gutenberg is a content creation editor – meaning whenever you create or edit a post or page, you have increased control of your content and its design and visual impact on your visitors. This is possible through the introduction of content blocks.

gutenberg editor

Three major things to be aware of:

1. Everything is a block of content

Each individual piece of content (titles, subtitles, paragraphs, images, etc.) in the editor is now broken down into movable and customizable blocks, with its own unique characteristics. This means you can alter properties or the type of block right in the editor – select a section of text, change the font, apply a background colour, give it a drop cap at the beginning of your paragraph, modify the colour of the text.

Gutenberg gives us the ability to reorganize content without having to cut and paste, moving it to a different spot within your text, or on your page or post. You can also drag images and other media content around, aligning left, right or centre.

WordPress 5.0 block editor

2. Choose your context: Page and Block editing

WordPress Gutenberg offers two different contexts that you can choose to work in: Pulsed or page context, to view your post in its entirety or Block Content to focus in on each individual block.

If you want to ease into the Gutenberg experience, you’ll find all the classic WordPress editing controls in the pulse or page context – such as categories, tags and featured images.

The block context includes a block navigational system, which is used to access child and parent blocks within nested blocks, and also has controls for each individual block, giving you more power over every aspect of your content, and how it appears on the page.

Each block has inline controls to align and block type, which appears when you hover over type, and there is also a context menu allowing you to edit as HTML, duplicate or even share blocks so that they can also be used in other pages and posts on your site.

3. This idea is growing and evolving

Gutenberg will evolve. In WordPress 5.0, Gutenberg acts as a block editor, however, the bigger plan is to expand this block concept from the editor to the customizer, and eventually to the whole view. Don’t worry, this won’t happen right away, but as users get more accustomed to the block experience, WordPress will roll out this new way of creating collections of configured and curated blocks, rather than static posts and pages.

The Gutenberg/WordPress 5.0 Block Editor Experience

For now, let’s look at the new WordPress 5.0/Gutenberg block editor experience. The block editor was designed to be as user-friendly as possible – however, we know that the transition from the classic WordPress editor can be daunting, so we wanted to give you a brief tour to help you get started.

Kickin’ it old school

First, the Gutenberg Block editor is a smart editor which anticipates behaviour and offers options based on those predictions – but don’t worry, if you like to draft your texts directly in the WordPress editing field, the block editor will get out of your way so that you can write in peace.

Adding blocks

If you want to work in this new Block style of editing there are three ways to add new content as blocks. You can place the cursor at the end of a block of text and hit return, or you can hover your cursor where you want the block to be, a line will appear, you can click on that line and your new block will be placed there. The third way to place a block on your page is to place your cursor where you want the block to appear, click on the block button in the top left corner of your screen.

Choosing block types

Once you’ve placed your block, click on the plus symbol of that block to reveal the drop-down menu of suggested block types, a full list of available blocks, and a list of options to embed into your content. If you’ve already created shared blocks, they’ll also be listed here.

gutenberg block settings

Working with content inside blocks

There are a few ways to work within the blocks. On the right-hand side of any given block is a menu where you can access settings like edit as HTML, duplicate, convert to a shared block, transform and delete.

To alter the type and/or properties of a block you’ve created, click anywhere inside that block to focus on that block, then open the block toolbar on the left-hand side where you can alter the appearance of your block content – like alignment or heading levels, and use the drop-down menu to apply that change other related blocks.

Columns and layouts made simple!

This new interface supports multi-column layouts, giving you added functionality, and cutting down on the need for widgets, shortcodes, and plugins which ultimately slow down your site.

There is also a smart function of the block editor, which comes into play as you write. For example, if you know you want to write in columns when you begin typing in the column context, all the options for columns will appear.

In order access the more advanced properties of a block, select it and go to the block component panel in the sidebar, which will give you access to more features such as these to customize your content.

Content stats, out of the box, with plugins to add more functionality

Gutenberg has some other really interesting features such the ability to access the stats of a current post – like word count, heading count, paragraph count, and block count, along with a full structural outline with all your headings that you can use to navigate your posts, and get a holistic view of your content.

For those of you using meta boxes, such as the Yoast SEO plugin, which allows you to enter keywords to be associated with your blog posts – don’t fret! This option is implemented in the drop-down menu of “Extended Settings”.

Revert to classic styling

And if you just need to go back to the old WordPress TinyMCE version editor and toolbar, you can either select this as you create a new post or create a new block by click on the plus symbol and searching for classic, which will reveal all the features you are currently accustomed to.

Concerned about change?

There are a few concerns, of course, with the release of Gutenberg, most notably that of backward compatibility, and that some of your beloved themes and plugins may no longer be compatible with this new editing experience.

Don’t worry, our developers are working hard to find solutions and alternatives to make this transition as smooth as possible. There have also been some improvements to the WordPress Rest API which allows our devs to create new features and applications, and use this new platform as a framework.

What will happen to my old content, you ask? Well, it will remain in a single classic block, just the way you created it. If you are absolutely in love with the new Gutenberg system and want to convert your existing content to the block experience, go to the block settings in for that post, and select convert to block and all the sections of content will be converted to individual blocks for you to work with.

Editing content is going to become even more creative. Enjoy!