Gutenberg editor in WordPress 5

How to use Gutenberg editor in WordPress 5: let’s take a tour

If you ask a WordPress developer what’s new with the CMS, you will almost certainly hear the word “Gutenberg.” This content editor arrived in WordPress 5.0 and brought brand-new editorial experiences. Let’s learn more about it, and see how to use Gutenberg editor in WordPress 5.x.

What is Gutenberg editor?

Gutenberg is the new default content editor for WordPress 5. It was named after Johannes Gutenberg, the printing press inventor. The editor allows users to create, arrange, and style rich WordPress pages.

Gutenberg editor uses a block-based approach. It lets you shape a WordPress page with 60+ ready-made blocks, among which:

  • paragraphs
  • images
  • headings
  • lists
  • tables
  • buttons
  • quotes, audios
  • videos
  • pull quotes
  • social media embeds

and others that we list further in this article.

 Gutenberg editor in WordPress 5 - embedded tweet

 

Everyone with a website on WordPress 5 will need to learn how to use Gutenberg. The good news is that it’s easy. The editor is intuitively understandable and full of hints. In any case, you can always switch to the classic editor if that is your choice.  

How to use Gutenberg editor in WordPress

Gutenberg works with WordPress posts, pages, media, and users. This means that old and new items open in the Gutenberg interface.

If we want to add a new post, we click “Posts — Add New” in our WordPress admin dashboard. The Gutenberg interface looks minimalistic, and has plenty of white working space. People with small screens will especially love it. 

 Gutenberg editor interface in WordPress

 

The working area can be extended further — the right sidebar has a dropdown menu that lets us choose the fullscreen mode. 

  • Gutenberg blocks: building like Legos

It is easy to start building immediately by clicking the “+” icon at the top toolbar or directly in the working area. We can also just start to type, and it will be a “Paragraph” block by default. Gutenberg remembers our choices and offers us to add our favourite blocks. 

Here are current Gutenberg blocks in main categories to choose from. In addition to them, Gutenberg offers the “Most Used” category that changes with our actions.

Common Blocks:

Common blocks in Gutenberg editor WordPress 5

Formatting:

Formatting blocks in Gutenberg editor WordPress 5

Layout Elements:

Layout Elements blocks in Gutenberg editor WordPress 5

Widgets:

widgets blocks in gutenberg editor wordpress 5

Embeds (34 total):

embeds blocks in gutenberg editor wordpress 5

Blocks can be moved up and down, as well as aligned left, right, or center. It is also possible to duplicate a block, insert it after or before, add it to reusable blocks, or remove it. All this is available in two ways:

  1. with “up,” “down,” and “settings” icons near each block
  2. in an extended toolbar for each block that we can pin at the top of the page (by checking the “Top Toolbar” option in the dropdown menu of the right sidebar).
top toolbar enabled in gutenberg editor wordpress 5

 

options of the top toolbar in gutenberg editor wordpress 5

The right sidebar contains specific block settings. We can go to them by clicking on the block. These settings include colors, font sizes, CSS styles, dimensions, number of items, image cropping, linking to content, ALT text, and so on — depending on the block type. An interesting “Drop Cap” option for textual blocks lets us capitalize the initial letter.

button settings in gutenberg editor wordpress 5

If we have an image, we can drag its edges to quickly resize it. 

image settings in gutenberg editor wordpress 5

The “Columns” block has the number of columns to configure, but each column opens a separate paragraph with its text settings.

columns settings in gutenberg editor wordpress 5

 

To quickly navigate between the blocks, we use the top sidebar. It also lets us undo changes, save posts, count content items, and more.

Visual editor and code editor

Among the options offered in the sidebar, there is one to switch between the visual and the code editing mode. So those familiar with HTML can always switch to using it.

Get help with Gutenberg editor in WordPress

These are just the basics of how to use Gutenberg editor in WordPress 5. It has plenty of other options for configuring the pages.

It should also be noted that custom post types may open or not in Gutenberg. They may need some adaptation related to their REST parameters, outdated metaboxes, and so on. You can entrust this to our WordPress developers.

We want your editorial experiences to be smooth and handy. So if you need help with:

  • building pages with Gutenberg
  • adapting your custom post types to use Gutenberg
  • updating your WordPress site to WordPress 5
  • switching back to the classic editor
  • fixing compatibility issues that could be caused by Gutenberg

you can always feel free to contact our WordPress team!

Follow WishDesk

Join our Newsletter

Check out our Privacy Policy for more information.

Join our newsletter to get blog updates straight to your inbox.

Follow WishDesk

Join our Newsletter

Check out our Privacy Policy for more information.