As of WordPress 5.0, users of this CMS system have a new web content authoring editor. When creating a site, it uses the so-called blocks. Individual blocks can be edited. In the following tutorial, we will talk about how to use the Gutenberg editor to create website content.
What is Gutenberg?
Gutenberg is the new default editor for WordPress . It works on a different principle than the TinyMCE editor used so far. It offers a whole new web design experience by creating blocks using blocks. In individual blocks it is possible to work with text as in a text editor.
Blocks can be moved and grouped on the page according to the user’s specific ideas. Thanks to Gutenberg, the user has the opportunity to better customize the appearance and layout of the page.
What is a block?
Blocks are pieces of content on a page . You can create a block for text, widgets, images, video, citations and the like. It is possible to continue working with each block. The benefit of creating a website is the drag and drop function, which can be used to easily move blocks.
How to create a page in the Gutenberg editor
To create a new page, go to Pages ›Add New in the page administration. The following page will open:
Write a title in the displayed block. You will also find the option to edit the site service . You can edit the slug at any time by clicking on 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 preset text entry block, or you can insert your own block. To do so, click on the plus icon:
. Here you can select the type 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 an icon for inserting a link. At the end of the block editing toolbar, you’ll find a button for more editing options
. For example, you can use it to hide block settings, duplicate, edit as HTML, add to reusable blocks, and remove a block.
You can find more options for the text on the right side of the screen . Font settings are available. You can choose a font size from several preset options or set your own. You can also choose a background color, text color, or set your own advanced adjustments.
The options for editing blocks directly above the block as well as in the right part of the screen differ according to the individual block types.
Change block type
You can change the block type at any time while creating the page. You do this by clicking on the first button above the active block. The character for the active block type is always displayed here. After clicking, a list of blocks will appear from which you can choose.
Block types
There are several types of blocks available when creating pages. They are arranged in a clear list, which is divided into several parts:
Most used – the most used block types such as paragraph, image, gallery and the like are displayed here.
Direct elements – there is a block for direct image.
Common Blocks – Here you will find blocks for images, video, file, list, citation and other commonly used parts of the page.
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 will find blocks for page breaks, buttons, columns or a block with a pre-created layout for media and text.
Widgets – thanks to the available options you can add shortcodes, categories, a list of recent comments and the like.
Embedded – Allows you to embed external content such as YouTube, Twitter, Instagram, Facebook and other content.
How to create a basic layout on a page
Let’s start with a simple page. It will suffice if it has a title, text, image, bulleted list and image gallery.
Add text
After entering the title, simply start writing in the preset block. Gutenberg creates a separate block for each paragraph. You don’t have to add it to the page every time. All you have to do is press Enter. The new paragraph block is created by itself.
Add an image
To add an image, select the appropriate block from the block list. The list of blocks is displayed by clicking on 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 has been uploaded. In the right part of the screen, set the image size, fill in the alternative text, or insert a link.
Add a bulleted list
Select the appropriate block from the list. When editing text, you also have the option of choosing a numbered list, inserting a link, and so on.
Add image gallery
Select a block for the gallery from the list of blocks. Then upload the pictures. In the gallery block, you can adjust the alignment, insert or remove an image. In the right part of the screen you will find functions for setting the number of columns and cropping images in the gallery.
How to move blocks
Individual blocks can be moved on the page. The necessary buttons appear when you hover over the block you want to move. There are two up and down arrows to move. These always move the selected block one position higher or lower. Between the arrows you will find an icon for the drag & drop function
. When you move the mouse over it, a hand will appear, which you can simply hold the block and move it to the desired location.
How to reuse created blocks
If you have created a block that you would like to use again later, click the More Options icon. You will find it in the function menu at the top of the block. Select Add to Reusable Blocks here.
This way you will have access to the created blocks every time 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 a normal block or remove them from the menu.
Additional features
There are several more handy features available for creating pages or articles. First, let’s look at the buttons at the top of the page.
I have already mentioned the first of the icons. Used to add a block to a page.
The back and forward arrows do not need to be represented – they will take you one step forward or backward.
i – here you can see the structure of the content.
An interesting function is offered by the last button – block navigation . In addition to displaying the order of individual blocks, it is also used to quickly jump to the selected block.
You’ll find more features on the right side of the page. You may already know some from previous work with WordPress. Others are new.
Document – Allows you to access document settings such as editing the page URL, adding an illustration image, and enabling comments. Assignment of categories and tags is also available on the posting page. You can also add text for the summary.
Block – I have already mentioned some of the functions of this button above in the section Creating blocks. They differ 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 are editing an existing page, an Refresh button appears instead of the Publish button.
Permalink – Edit the text portion of the URL here.
Page Properties – Used to set page šablóny and assign a parent page.
Show more tools and options – the last button in the upper right corner of the page is Show more tools and options . Here are some features like spotlight mode to help you focus on the content of a specific block when creating a page.
You will also find the switch between the visual editor and the code editor, as well as the full screen mode. In addition, you’ll find keyboard shortcuts, the ability to manage reusable blocks, and other page setup options.
Advanced Tips
I will also mention a few more advanced editor functions:
Quick block creation
You can make your work easier so that you don’t always have to search for a specific block in the list. All you have to do is enter a slash and the first letters of the block name in the preset block :
/názov bloku
As soon as you start typing, you will see a list of matching options.
Editing the source code
You can edit the source code of a page at each step of its creation. You can do so by clicking on the icon . Look for the code editor option here.
Activate full screen mode
In the Gutenberg editor, you can work without unnecessary distraction by offering the page menu. Scroll to the top right of the page and click . Here you will find the Full Screen Mode function. You can also select Spotlight Mode to focus even better on a specific block.
Using keyboard shortcuts
Gutenberg allows you to use many special keyboard shortcuts in addition to the usual shortcuts. For example:
- Show or hide Sidebar settings Ctrl + Shift +
- undo your recent changes Ctrl + Z
- make revoked changes again Ctrl + Shift + Z
Use Ctrl + Shift + H to open a list of shortcuts.
Extend options with plugins
If you want to expand your design possibilities, install one of the plugins for Gutenberg. The Stackable plugin , for example, offers a collection of pre-prepared blocks. You will create interesting main pages. Otter Blocks is also a great plugin. Create blocks like prices, Google Maps, and more.
Here are some 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. All you have to do is install the WordPress plugin Classic Editor .
Will the old content change?
All content you already have on the site will remain unchanged. Gutenberg places a specific page or article in one block. Gutenberg is available for this purpose 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 . You can also work with the content as if you had created it in a block editor.
