Cloud Next Blog

WordPress and Gutenberg: What you need to know

You may already be familiar with the upcoming WordPress Gutenberg editor. While it’s currently available as a plugin, the community is planning to merge it with the much-anticipated WordPress 5.0, which may launch on 19 November 2018.

In essence, Gutenberg is a new WordPress editor that aims to simplify website creation and editing for the average non-technical user. It will operate a little more like a drag-and-drop website builder with movable building blocks

But what does this mean for your WordPress sites?

In this post, we’ll walk you through the basics of the new Gutenberg editor and the essential things that you need to know about it.

It’s a move forward for the WordPress visual editor

It’s been (too many) years since WordPress has made any significant changes to its visual editor. With the new editor, the goal is to make the interface more intuitive for its users.

In other words, WordPress wants to make it easy for anyone, especially for those just getting started with WordPress, to create, edit and customise the finer details that make a site just right.

It’s more than just an editor

Gutenberg isn’t just an editor replacement but a paradigm shift in how users edit content in WordPress. It’s a client-side interface that uses a block-based system to build up content.

Users don’t need to know HTML or how to write shortcodes. They can control a site’s entire layout – back end and front end – from a single interface.

Here’s how it looks:

A screenshot of the new WordPress editor, Guttenberg

The new editor aims to combine the best features from website builders with the power of WordPress. So, similar to these platforms, users can create and edit entire layouts from a single place.

Is it a page builder then?

Not quite. While it’ll make it easier for users to style regular content like blog posts or standard web pages, it’s not a substitute for page builders. At least not in its current form.

Why?

First of all, it lacks the true drag and drop feature. While it does allow you to rearrange blocks, it’s still not free-form like most page builders.

Second of all, unlike popular page builders, it doesn’t offer things like responsive design settings, a variety of pre-made templates, advanced styling options, to name a few.

So, while the goal is to offer many of these features in subsequent releases, in its initial release form it wouldn’t be the best choice for building more complex pages, like a landing page, for example.

What’s different from the current editor

The purpose of the Gutenberg editor is to provide a simpler, easier to use alternative to WordPress’ current open text editor where you don’t have to:

  • Import images, multimedia and files from the media library or add HTML shortcodes
  • Copy and paste links for embeds
  • Create features images to be added at the top of a post or page
  • Add excerpts for subheads
  • Add widgets for content on the side of a page

In other words, Gutenberg doesn’t actually change how WordPress functions. What it does change, however, is the way users interact with it, whether they’re creating a web page or just editing it. So instead of shortcodes and meta boxes, with the new editor, users will be using simple blocks.

What are blocks?

Gutenberg is a block-based editor. It essentially replaces the single edit fields of the current WordPress TinyMCE editor with lots of individual “blocks” that you can use to customise your content and layout.

These blocks can be pretty much everything. For example, you can have blocks for:

  • Headings
  • Paragraph
  • Quote
  • List
  • Images or image galleries
  • Video embeds
  • Tables
  • And more

To add a block, click on the “+” sign located on the upper left corner and select the block you’d like to add to the page:

Creating a block in Guttenberg

You can use the arrows (on the left side of each block) to move any block vertically.

This not only makes the creating and editing processes easier but it also cuts down on the use of widgets, shortcodes and plugins that can slow down a website.

Formatting is retained when copy and pasting text

In earlier versions of Gutenberg, copy and pasting content onto a page made a complete mess. Formatting was lost in the process, but not anymore.

With the new editor, you can paste paragraphs, lists, headings, and more, and the editor will automatically create the appropriate blocks and retain formatting. It’ll also retain text markup like italics and bold.

Compatibility concerns

There are many concerns over backward-compatibility or compatibility with older themes, that don’t style HTML5 output. Gutenberg blocks output content using HTML 5 tags like section and figure. So, since many older themes don’t have CSS to address styling these tags, margins and padding for these tags will probably be non-existent.

In other words, there are probably going to be lots of broken sites across the web as this transition unfolds. As soon as a site is updated to WordPress 5.0, users will have a broken experience the next time they edit a post, if that site relies on custom meta boxes.

This means that site owners should take the time to prepare their sites to prevent this from happening and to ensure they aren’t affected by Gutenberg.

Will Gutenberg be optional?

If clients are wondering if Gutenberg will be optional or not, the answer is no. When Gutenberg roles out officially into WordPress 5.0, you won’t be able to turn it off as it will become the official editor for WordPress. (You will, however, be able to “rollback” to the old WordPress editor via a plugin, at least at first.)

Archives

Categories