Get Started With the New Gutenberg Editor in WordPress

WordPress 5 is here with a brand new editor that changes the way posts and pages are created and edited. Here we provide an overview on how to use the new editor and what to do when upgrading existing sites.

The new Gutenberg editor uses a block-based system to provide flexibility with how content is displayed. This allows you to insert text, images, multimedia content, code, quote, buttons, and much more, with ease.

Gutenberg is installed with WordPress 5

You don’t need to install a separate Gutenberg plugin. If you’re using WordPress 5, the new editor automatically appears when you create a post or page.

The editor presents a clean page with some simple buttons. The little plus sign on the top left of the lighter area lets you add blocks.

On the right-hand side of the page, a little cog gives you access to settings.

This opens a panel with access to many of the familiar WordPress settings.

It is here that you can:

• edit the permalink
• add the page/post to categories
• add tags
• set a featured image
• edit the excerpt
• control the comment and pingback settings

If you want a very simple page layout, you get started with the default block by clicking on “Add title” or the text block below.

As soon as you start typing, you can access basic tools to format the text and add links.

The three dots on the right of this toolbar gives you access to the block structure, letting you add a new block before or after the current block, edit the current block as HTML, or add it to the library of reusable blocks.

Reusable blocks are very helpful if you want to add something to several pages or keep a format across all pages. More on this in another post. Reusable blocks are indicated with two intertwined arrows.

Once you have created two or more blocks, you can re-order them by moving your mouse to the left. Arrows will appear that will allow you to move the blocks up or down.

To delete a block click on the three little dots and choose ‘remove block’.

At the bottom of each page are a few icons that allow you to easily add blocks. By default these are headline, image and gallery blocks, but these shortcuts change to reflect the blocks you have most recently used.

To find a wider variety of block types, click on the little plus sign at the bottom and left of existing blocks.

This launches a searchable popup with a wide variety of block types.

This is open at the Most Used block but if you scroll down you will find many different types of blocks.

More on this in a later post.

Upgrading to WordPress 5 and Gutenberg

If you are upgrading an existing site to WordPress 5, make sure your theme supports it and upgrade your theme first.

Pages and posts will be converted to simple text blocks with a link labeled ‘Classic’.

By clicking on ‘Classic’ you can access formatting tools for your block.

A little plus sign appears below this block (and on the top left) and this lets you add new blocks to existing pages. You also have the icons to add simple blocks on the right. These may change depending on which other plugins you have installed on your site already.

If you prefer to stick with the familiar Classic editor, you can install the Classic Editor plugin, which restores the previous WordPress editor and the Edit Post screen. Go to the plugins page search for Classic Editor, then install and activate.

An alternative is to install the “Disable Gutenberg” plugin. More to come on the possibilities of Gutenberg soon.

More Gutenberg Reading

• Gutenberg is the Biggest Ever Open Source Software Launch
• How to Use Columns in WordPress Gutenberg Editor
• How to Reuse Blocks in WordPress Gutenberg Editor

{snippet gutenbergvideo}