Gutenberg: An Overview of the Interface

With WordPress 5.0 being released so soon, there has been some mixed reactions concerning the new editor that comes with the update – Gutenberg. It provides a more visual way of creating pages and posts on WordPress and it’s a huge change from the classic editor that we are all used to.

At Wibble we have been running Gutenberg on this website for quite some and have found, after some teething problems, that it is quite a useful tool to use for building content inside a WordPress page or post.

The classic content editor.
The new Gutenberg editor.

So let’s take a closer look at the interface of the new Gutenberg editor.

Quick Tour
Blocks
1. Common blocks
    • Paragraph Block
    • Heading Block
    • Image Block
2. Formatting blocks
    • Classic Block
    • Custom HTML Block
3. Layout blocks
    • Columns Block
    • Button Block
4. Widgets blocks
Block Settings
Rearranging Blocks
Document Settings

Quick Tour

The Gutenberg interface features a clean and minimal design, and elements, such as the document settings and blocks, are easily accessible.

A quick tour of the interface.

Blocks

WordPress aims to transform the publishing experience by making it hassle-free and effortless. This is clear from how Gutenberg replaces the need for using features, such as shortcodes, with blocks.

In fact, the core of what makes Gutenberg so appealing is the use of blocks which are pre-constructed components that can be used in the layout of a page.

Blocks in Gutenberg are divided into 6 categories:

1. Common blocks

This contains the blocks that are normally used in a page, such as heading, images, paragraph text etc.

● Paragraph block
Similar to the previous content editor, paragraph blocks can be used to add text to a page or post.

Formatting a paragraph block.

● Heading block
The heading block can be used to add headings and subheadings.

Adding different types of headings.

● Image block
Images can be added to a post or page using this block. Through the Block settings in Gutenberg, it’s much easier to customise the image size, add an image description and link the image.

Adding a new image.

2. Formatting blocks

This covers formatting tools, such as tables or the classic content editor.

● Classic block
This gives us the classic content editor that we are already familiar with.

Typing into the classic block.

● Custom HTML block
This block allows us to add custom HTML, giving us a little more control of the page or post. Using the ‘preview’ button, we can also see what the code will look like on the actual page or post.

Using the custom HTML block.

3. Layout blocks

This consists of blocks that control the layout of the page or post.

● Columns block
Columns allows us to easily split content on a post or page into separate columns (from a minimum of 2 to a maximum of 6 columns).

Adding content to columns.

● Button block
With Gutenberg, it’s now much simpler to create a button without needing plugins or custom HTML. The button block allows us to create a button and control the text and link. It also gives us the ability to change the colours and style of the button.

Creating a button.

4. Widgets blocks

With widgets blocks, we can add shortcodes and list our latest posts, among other blocks.

Block Settings

As we have already seen, when a block is selected, we can open the Block tab to view settings for that specific block.

This can help us customise it.

Using block settings to edit a paragraph.

Rearranging Blocks

The Gutenberg editor makes it easier to control the layout of a page or post.

To rearrange blocks, we can use the up and down arrows next to the block to move it above or below neighbouring blocks by one.

Using the arrows to move a block.

Or, alternatively, we can hold down on the six dots next to the block and drag the block to where we want it to go.

Dragging the block to move it.

Document Settings

The Document tab contains all the settings associated with a page or post.

When editing a page, the document settings contain elements from the previous classic editor:

  • Status & Visibility
  • Revisions
  • Permalink
  • Featured Image
  • Discussion
  • Page Attributes
Document settings on a page.

When editing a post, the document settings contain:

  • Status & Visibility
  • Revisions
  • Permalink
  • Categories
  • Tags
  • Featured Image
  • Excerpt
  • Discussion
Document settings on a post.

Although Gutenberg is huge step forward from the familiar classic editor, it offers a flexible way for everyone to build pages and posts, from casual users to developers.

Summary

In general, we feel WordPress has taken a step forward in terms of content management, it opens the CMS up to a huge variety of layouts and functions. Yes, the learning curve may be slightly steep but it will improve the WordPress offering and this can only be a good thing.

Leave a Reply

Your email address will not be published. Required fields are marked *

Would you like to work with us on your next project?

Let us know about your project and we can see how we can help

Work with us