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.
Table of Contents
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.
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:
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.
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 
. 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 
. 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.
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.
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:
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.
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.
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.
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. 
. When you move the cursor over it, a pointer appears to simply snap the block and move it to the desired location.
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.
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.
I 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 . 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 . 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 click. 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 . Furthermore, you can work with the content as if you created it in a block editor.
Hey there,
Thank you for mentioning our Otter plugin in your post. Happy too the name in your post. 🙂
Hi,
You are welcome 🙂