| WordPress

Editing with Guttenberg

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 change comes when you create your first 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.

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.

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.

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.

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.

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.

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’.

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.

At the bottom of each page are few icons that allow you to easily add a headline, image or gallery

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

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 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.

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’.

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.

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.

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.

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


About the author

Born in Zambia but living now in Cape Town, South Africa, Libby Young started out as a journalist. She taught herself HTML when the company where she was an sub-editor made the transition from CD-Rom to the web 20 years ago. Since then she has developed content-rich websites using a variety of open source content management systems.