A Guide To The Gutenberg WordPress Editor

Last year, WordPress teased us with ‘a new way to WordPress’, also known as Gutenberg; a new editor due to replace the traditional publisher in Spring 2018.

Gutenberg aims to revolutionise and demystify the way we publish content through WordPress, so that people of all technical abilities can build beautiful sites and blogs with ease.

Gutenberg is currently available as a WordPress plugin, however, the new editor will replace the old one later this year. That’s why we’ve put together this handy introductory guide, to help you (and us!) get to know Gutenberg and its fantastic new features.

Content blocks

Current WordPress Editor

New WordPress Editor - (Codename Gutenberg)

Content blocks are one of the biggest changes introduced in the new Gutenberg editor, and they make editing and adding different mediums of content a whole lot easier!

The image above shows the content split into 3 blocks, and each of these individual blocks can be formatted independently. For example, block 1 is in H2 formatting, block 2 is in bullet points and the text in block 3 is aligned to the right. As well as this, blocks can be copied, pasted, and moved around to different points of the page, to make customising your content easy and stress free.

By clicking the small dots next to the block, you’ll also be able to view more options to edit your content, including the option to ‘edit as HTML’. This has taken over from the original ‘text’ tab that many WordPress users will be familiar with.

Previously, text and content could only be separated by spaces. The nature of the the old editor made it difficult for those with basic programming knowledge, to make posts stand out and look more visually pleasing for the reader. However, Gutenberg makes making posts look visually appealing really simple!

Content blocks continued...

In Gutenberg, blocks don’t have to be made up of just text, they come in a range of different formats. The screenshot above shows a few of the types of blocks that you can currently add to your pages and posts, however there are a many more options that make editing easier.

Text columns

You can now add the ‘text column’ block to split your content into different columns, and you can have up to four columns in a block. Each column can be edited independently, meaning you no longer have to code in your columns, which proved to be an issue for many beginner WordPress users.

CTA Buttons

The ‘buttons’ block lets you add CTA buttons anywhere within your content. You can edit the text on the button and link it to any webpage.

Previously, you would have to either code your CTA buttons into your WordPress site, download a button plugin or use an image with a hyperlink in order to have custom CTA buttons. This change means it will be even easier to create strong and beneficial CTAs on your pages and blog posts!

Gallery

Current WordPress Editor

Gutenberg 

Similarly to the old WordPress, you can choose the number of image columns that you would like, however, Gutenberg arranges your photos in a more user-friendly and visually pleasing format.

Tables

Easily add tables within your content with the ‘tables’ block. You also have the option to increase the table’s size and add rows and columns as you would in Google Docs or Microsoft Word.

Cover images

You now have more options when it comes to cover images. You can make attractive post header images within WordPress by adding text to your image. As well as this, you can use the URL function to link your header to another webpage, and change the alignment of the text on the image.

HTML

Rather than having to edit your whole blog post in HTML, you can now edit individual blocks. This means you no longer have to scroll through endless amounts of HTML code in order to find what you’re looking for. Simply select the block you’d like to edit and click ‘Edit as HTML’.

These are the main new features to play around with in Gutenberg. There are a range of other blocks to try out and this list is likely to expand in the future, so keep your eyes peeled for new additions!

Embedding

There are now a whole host of embedding options to take advantage of, so adding external content is now easier than ever! Simply choose a site and enter the URL, or add the embed code to a block.

Aside from the options in the image above, other sites you can embed content from include:

• Tumblr
• TED
• Slideshare
• Reddit
• Kickstarter
• Dailymotion
• Hulu

And the list doesn’t end there! There are already a wealth of embedding options in Gutenberg, however, if your preferred site isn’t on this list, it’s worth waiting to see if it will be in the full version of the editor.

Plugins

Major plugins such as Yoast work with the current version of Gutenberg. It may take some time before all plugins are fully compatible with the new interface, but the majority of the most popular and widely used plugins are working to create updates ready for the launch.

What will happen to the old WordPress Editor?

For those who are used to the current editor, Gutenberg may seem like an alien concept. But not to worry, the old WordPress editor isn’t going anywhere any time soon.

Right now, you can install the new Classic Editor plugin onto your WordPress site. This will mean that even after Gutenberg launches (expected Spring 2018) you will still be able to use the classic editor.

Whilst it is a huge change to the editor we all know and love, it’s certainly a step in the right direction in making the platform both easily accessible and easy to use. What are your thoughts? Leave us a comment below or get in touch via our contact form to see how we could help you!