Earlier this year we were introduced to the Gutenberg WordPress Editor which is slowly being rolled out in beta version.

While the Gutenberg WordPress Editor is not yet fully complete, users are being encouraged users to download the plugin and become familiar with the new functionality and for developers to contribute to its improvement.

Building Pages & Posts with Gutenberg Blocks

Pitched as a revolutionary editor experience, Gutenberg is supposed to make adding images, multimedia and social embeds to posts and pages a much more intuitive and more straightforward process.

“The goal is to create a new post and page editing experience that makes it easy for anyone to create rich post layouts.” Source: WordPress

The new editor embraces the concept of “blocks”, which in simple terms are building blocks for pages and posts that can be dragged, dropped and easily configured with available settings, displayed down the right-hand side.

WordPress hopes that the new editor will create a better user experience for content creators and bring about a better reading experience for visitors.

  • Light, fast and SEO friendly
  • Mobile friendly interface
  • Useful tools and features for writers
  • Easy embed content such as a YouTube video
  • Easily accessible tools organised in drop-down lists.

Exploring Gutenberg WordPress Editor Basic Functionality

Gutenberg Blocks & Settings

The screenshot below is a view of the Gutenberg WordPress Editor. (In this example, we are creating a new post for our blog.)

Learn how to create a post with the new Gutenberg WordPress Editor

Presented with an introduction to the ‘world of blocks’, this is where you can search or select from a library of predefined page elements including layouts, headings, image galleries, widgets, social media embeds and more!

Find the Gutenberg block that you need by using the search functionality.

In the right column, you can choose between document and block view. When you are in the block tab, you can customise the block, and in the document tab, you can find already familiar features like the categories, tags and the featured image.

Text & Formatting

Gutenberg allows you to drag and drop H1, H2 and H3 headers into your page for structured SEO, as well as seamless text formatting including colour selection.

Format your text quickly and simply with Gutenberg editor.

Images & Gallery

Focused around the integration of multimedia, adding images to pages is simple. You can upload your media and configure all settings right here within the one screen.

Upload images and edit galleries.

Social Media Embeds

Gutenberg provides easy integrate of social media accounts which allows you to display content pulled directly from your social feeds.

Embed your social media feeds into posts and pages using Gutenberg editor.

You can save, view as a draft, and preview your updates as normal via the buttons in the top right.

Custom Blocks

While Gutenberg provides you with a suite of useful blocks to get started, you may quickly find limitations and get frustrated with how some elements display within the page. But fear not, one of the most powerful features is the ability for web developers to create custom blocks.

In addition to the custom blocks, developers are already rolling out new and compatible plugins for users to integrate.

WordPress 5.0 & Gutenberg

While there is still a great deal of testing and bug fixing, WordPress is aiming for a role as part of their 5.0 update later this month, which means you will need to embrace the change at some point.

We recommend getting started by creating a duplicate or back up of your site and activate the plugin to get a feel for its functionality. This approach also allows you to see what happens and plan for changes to your template and or plugins.

CuroHosting customers can set up a demo version of their site by logging into their customer account area and navigating to CuroHub.

For further guidance check out the Gutenberg FAQ, or for advice and support about how Gutenberg may affect your WordPress site, please contact us.