Guide: How to work with new WordPress editor Gutenberg

Since WordPress version 5.0, users of this CMS system have a new editor for creating web content available – Gutenberg. It uses so-called blocks to create the website. Individual blocks can be edited. In the following tutorial, we will discuss how to use this editor when creating website content.

Guide: How to work with new WordPress editor Gutenberg

What is Gutenberg?

Gutenberg is the new default editor for WordPress. It works on a different principle than the TinyMCE editor used so far. By creating a page using blocks, it offers a whole new experience of creating a site. In individual blocks, it is possible to work with text as in a text editor.

Blocks can be moved and grouped by page according to user specific ideas. With Gutenberg, the user can better customize the look and layout of the page.

What is a block?

Blocks are parts of content on a page. You can create a block for text, widgets, images, video, citation, and so on. Each block can be further worked. The benefit of creating the web is the drag and drop function, which allows you to easily move blocks.

💡 Tip: Choosing the right hosting is crucial for a fast website ⏱ . I recommend betting on verified quality ➡️ Bluehost or SiteGround.

How to create a website in Gutenberg editor

To create a new page, go to Pages ›Add New in page administration. The following page will open:

gutenberg tvorba stranky

Type a title in the block displayed. You will also find an option to edit the slug page. You can edit Slug at any time by clicking the title. Just click the Edit button next to the page URL.
Upraviť url stránky

Creating blocks

After typing the title, you can add more text to the predefined writing block, or you can embed your own block. To do so, click the plus icon ikonka-plus. Here you can select the kind of content you want to add.

In my example, I chose to add a paragraph. In the paragraph block you will find font options, alignment, and a link insertion icon. At the end of the block editing toolbar, you’ll find an additional edit options button ikonka-viac-moznosti. For example, you can hide block settings, duplicate, edit as HTML, add to reusable blocks, and remove a block.

You can find more text options on the right side of the screen. Font setting is available here. You can choose a font size from several preset options or set your own size. You can also choose a background colour, text colour, or customize your own customizations.

The options for editing blocks directly above the block, as well as on the right of the screen, vary by block type.

gutenberg-uprava-bloku

Changing the block type

You can change the block type at any time while creating the page. To do so, click the first button above the active block. The character for the active block type is always shown here. Click to display a list of blocks to choose from.

💡 Tip for themes: From premium themes, I have good experience with themes Divi, Avada and with page builder Elementor.

Block types

When creating pages, you have several types of blocks available. They are arranged in a clear list, which is divided into several parts:

gutenberg-zoznam-blokov

Mostly used – the most commonly used block types such as paragraph, picture, gallery, etc. are shown here.

Direct elements – block for direct image is available here.

Common blocks – here, you can find blocks for images, video, file, list, quote, and other commonly used page sections.

Formatting – allows you to add formatted content such as table, code, custom HTML, but also a block in a classic WordPress text editor.

Layout elements – here, you can find page break blocks, a button, columns, or a block with a pre-created layout for media and text.

Widgets – with the options available, you can add shortcodes, categories, a list of recent comments, and more.

Embedded elements – allow you to embed external content such as YouTube, Twitter, Instagram, Facebook and other content.

💡 Do you want a faster ⏱ website? Website speed is important for both visitors and SEO. I got the best results thanks to the WP Rocket plugin, which I highly recommend.

How to create a basic page layout

To get started, we’ll create a simple page. All you need is a headline, text, image, bulleted list, and image gallery.

Adding a Text

After entering the title, simply start typing in a preset block. Gutenberg creates a separate block for each paragraph. You don’t have to add it to the page every time. Just press Enter. A new paragraph block is created by itself.

Adding an Image

To add an image, select the block from the list of blocks. The list of blocks is displayed by clicking the plus icon image at the top left of the screen. You can select an image from the media library or upload it to the page.

It will appear in the page layout as soon as it is uploaded. On the right side of the screen, you set the image size, fill in alternate text, or insert a link.

gutenberg-pridanie-obrazka

Adding a Bulleted list

Select the appropriate block from the list. When editing text, you also have the option of selecting a numbered list, inserting a link, and so on.

Adding an Image gallery

Select a gallery block from the block list. Then upload your images. You can edit the alignment, insert, or remove an image in the gallery block. On the right side of the screen you will find functions for setting the number of columns and cropping images in the gallery.

gutenberg-galeria-obrazkov

How to move blocks

You can move individual blocks on the page. The necessary buttons appear when you move the cursor over the block you want to move. There are two arrows for moving up and down. These move the selected block one position higher or lower. Between the arrows you will find the drag & drop icon. ikonka-drag-and-drop. When you move the cursor over it, a pointer appears to simply snap the block and move it to the desired location.

gutenberg-presuvanie-blokov

How to reuse created blocks

If you created a block that you would like to reuse later, click the More options icon. You can find it in the function menu at the top of the block. Select Add to reusable blocks here.

gutenberg-znovupouzitelny-blok

This way, you will always have access to created blocks when you create a new post. Saved blocks appear in the list of block types under Reusable. They can also be managed. You can convert them back to normal block or remove them from the menu.

Another features

There are a few practical features available when creating pages or posts. First, let’s look at the buttons at the top of the page.

ikonky-navrchu-strankyI mentioned the first of the icons. This is used to add a block to the page.

There is no need to introduce back and forth arrows – they will take you one step forward or back.

i – here you can see the content structure.

The last button – block navigation – offers an interesting function. In addition to displaying the order of individual blocks, it is also used to quickly jump to the selected block.

On the right side of the page you will find more features. You may already know some of them from previous work with WordPress. Others are new.

Document – provides access to document settings such as editing the URL of a page, adding an illustrative image, and allowing comments. Category and tag assignments are also available on the post creation page. You can also add summary text.

Block – I have already mentioned some of the functions of this button above in Creating Blocks section. They vary depending on the selected block type.

Preview – the preview button displays a live preview of the page or post.

Publish – Use this button to publish the page. If you’re editing an existing page, the Update button appears instead of the Publish button.

Permanent link – Edit the text part of the URL here.

Page Properties – Used to set up a page template and assign a parent page.

Show more tools and options – the last button in the top right corner of the page is Show more tools and options ikonka-viac-moznosti. Here, you’ll find several features like spotlight mode to help you focus on the content of a particular block as you build the page.

You’ll also find a switch between the visual editor and the code editor, as well as full screen mode. In addition, you’ll find keyboard shortcuts, the ability to manage reusable blocks, and other page setup options.

Tips for advanced ones

Let me name a few more advanced editor features:

Quick block creation

To avoid having to always search for a particular block in the list, you can make your work easier. All you have to do is type a slash and the first letters of the block name in the preset block:

/názov bloku

As soon as you start typing, you’ll see a list of matching options.

Editing source code

At each step of creating the page content, you can edit its source code. To do so, click on the icon ikonka-viac-moznosti. Look for the code editor here.

Enabling full screen mode

In the Gutenberg editor, you can work without unnecessary distractions by menu page menu. Navigate to the top right corner of the page and clickikonka-viac-moznosti. You will find full screen mode here. You can also select Spotlight Mode for even better focus on a particular block.

Using keyboard shortcuts

Gutenberg allows you to use many special shortcuts in addition to common shortcuts. For example:

  • show or hide sidebar settings Ctrl + Shift +
  • revoke your recent changes Ctrl + Z
  • re-do revoked changes Ctrl + Shift + Z

Use Ctrl + Shift + H to open the list of shorcuts.

Extending your options with plugins

To expand your design capabilities, install one of the Gutenberg plugins. For example, the Stackable plugin offers a collection of pre-built blocks. It will create interesting main pages. Another great plugin is Otter Blocks. It allows creating blocks like prices, Google maps, and more.

Several answers to frequently asked questions

What if I don’t want to use Gutenberg?

Some users ask if WordPress allows you to use the previous TinyMCE editor. Yes, it is possible. Gutenberg can be deactivated in this case. In this case, all you have to do is install the WordPress plugin – Classic Editor.

Will the old content change?

Any content you already have on the page will remain unchanged. Gutenberg places a specific page or article in one block. For this purpose, Gutenberg has a so-called classic block. This allows you to work with the original content as in the classic TinyMCE editor.

You can simply edit the original content in a classic block or convert it to blocks. You will find the required function under the More options icon ikonka-viac-moznosti. Furthermore, you can work with the content as if you created it in a block editor.

Was this article helpful for you? Support me by sharing, please. 👍

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here