Aerial photo of someone typing on a laptop with an additional screen

After watching the presentations at WordCamp Europe 2021 and, in particular, the talk between Matt Mullenweg and Matías Ventura that included a video of the new features coming to us in the block editor, I was eager to give a try to this new version of WordPress 5.8 that is about to be released in mid-July.

So I have installed the WordPress 5.8-beta2 version to be able to tell you about the new features that are coming. Keep in mind that I have tested this version with the Twenty Twenty-one theme from and it may happen that some of the features mentioned, depending on the theme you have installed on your site, may not be available.

Nested Blocks and Block Patterns

With the arrival of WordPress 5.5, the block editor included the concept of block patterns. The idea of a block pattern is very simple: they are predefined sections or snippets made up of a group of blocks that you can use in the creation of pages and posts. Block patterns can be something as simple as a section displaying two buttons or a pricing section with eye-catching and complex layouts, or even the layout of an entire page.

A lot of work is being done to make editing blocks and block patterns easier and more comfortable. And, in particular, to make inserting and moving them faster. To begin with, now we can, from the list of blocks and patterns that are shown in the left side menu bar, select them and drag them to the area of the page to insert them.

Screenshot of selecting and inserting a pattern in Gutenberg
From the list of blocks and patterns you can select and drag the block or pattern you want to insert it directly on your page.

Recently, the drag icon (6-dot icon) was also added so that we could move any block within the container where it is located.

Option to drag a block in the Gutenberg editor
By clicking on the drag icon, you can move the cover block that is inside a column type block.

When you are in a block, press Esc to switch to selection mode and press Enter to return to edit mode.

Selection mode in the Gutenberg editor
In the Gutenberg editor you can switch from selection mode to editing mode with the Enter and Esc keys.

In selection mode (remember to press Esc), navigation between the block structure is optimized. By moving the mouse within a block we can see the boundaries of each of the blocks it contains. In this way, it is easier to understand the structure and drag blocks within the parent block.

Screenshot of selecting a nested block in the block editor
In Selection mode, when moving the mouse in the cover block, we can see the boundaries of each of the blocks it contains.

And now, with this new version, when you switch to edit mode (press Enter), when moving a block the boundaries of its container are also displayed, so that the process of selecting, dragging, and dropping is much easier and more intuitive.

Option to drag a block in WordPress 5.8 editor
Screenshot of dragging a block option in WordPress 5.8 editor.

Image Edition

Continuing with the idea of improving block editing, a critical block is the image type block. We have already seen that we can now insert images by dragging them into image, text and media type blocks, or into any container type block such as a column.

But the great novelty is that we can edit and modify inserted images in the editor itself, without having to go to the Media Library.

Image editing options in the block editor
Options for editing an image in the block editor.

In addition to the icons to center and add an image link, with WordPress 5.8 we have three new icons: Crop, Add Text and Duotone Filters.

Crop Image

By clicking on the crop icon, three additional menu options appear: zoom, change the aspect ratio and rotate the image.

Screenshot of editing an image in the block editor
After selecting the crop option, make the zoom, aspect and rotate modifications you want, and apply the changes.

As you can see, you no longer have any need to go to the media library to get your image to look the way you need it to.

Duotone Filters

Another new feature that comes with WordPress 5.8 is the ability to filter any image in duotone. Select the two colors of the filter that you want to apply to the image and that’s it, the image will only have two tones.

Screenshot of the image duotone option in WordPress
Display an image in just two tones with the image duotone option.

Add Text

This new icon, the one to add text to an image, is equivalent to transforming the image into a cover type block. And of course, after this change, you can add the text you want to the cover block as you have done in the past.

Screenshot of editing a background block in Gutenberg
Screenshot of editing a cover block in Gutenberg.

In addition, as you can see in the block properties, you can now also modify the spacing and add padding to the text, so that the text is exactly where you want it to be in the image. The padding can be defined the same or different for each of the 4 sides of the text.

Personally, I find it great that you can add and perform all these transformations directly in the editor without going to the media library. Still, if you want to optimize your images for SEO, I’m afraid you’ll still have to go to the library.

Block Transformations

Just as we have seen how to transform a block from image type to cover type, the block editor now incorporates other types of transformations. For example, you can select three paragraphs and transform them into headings, columns, a list, etc. And before performing the transformation, the new appearance of the transformation is previewed.

Similarly, you can change a set of image type blocks to an image gallery type block, or even a set of buttons, etc.

The Cover Block

With all these new features included in the editor itself, the cover block allows us to create very different designs to those we had so far. For example, now we can have two nested cover blocks (with a padding between the child and the parent) and each one with its own color, text, and focus.

Image showing two background blocks nested in Gutenberg
Image showing two nested cover blocks.

The Navigation Block

Another great new feature of the block editor preview in the video presented at WordCamp is the new navigation block. We see that this block is not included in the installed beta version but you will find it in the latest version 10.8.1 of the Gutenberg plugin.

Gutenberg's navigation block
Gutenberg’s navigation block.

This block allows you to add on any page, a menu of links so that your visitors can go to any other page. It is not intended to be a substitute for the navigation menus we already know from WordPress, but an alternative for when you want to insert an additional menu on a page.

Apart from indicating whether you want the menu horizontal or vertical, you have several options when creating the menu:

Create a navigation menu in Gutenberg
Options in the creation of a navigation menu in the block editor.
  • Create it from an existing menu: you can choose to display a menu that you already have created on your site.
  • Create it empty: this creates a blank menu for you to manually add each link that you want to show in the navigation.
  • Create it from all top-level pages – This will automatically add each existing page on your site as a link, which you can then edit and rearrange. Only top-level pages are added here.

To add a new link to the navigation, you have to click on the + icon that allows you to choose between:

Add item in navigation menu
  • Page link: a page on your site.
  • Post link: a post on your site.
  • Category link: all posts with a specific category.
  • Tag link: all posts with a specific tag.
  • Custom link: an external URL.
  • Social icons: icons for social networks.
  • Search: a search box for visitors to search your content.

Once you have created any menu, you also have the option to change its style (font, font, and background color), add submenus, move items around, etc.

Navigation menu properties
Navigation menu properties.

Thus, with this block you can create menu designs very easily.

Menu created with the navigation block
Menu created with the navigation block.

As you can see, this new type of block will offer many more possibilities in the design of our pages and posts.

Template Design

Another big change that comes to us with this new version of the WordPress editor is that the template design is fully integrated into the block editor. This way you can create a template from a created page, and it also adds the option that in the left sidebar you can list its structure.

Designing a template in WordPress
Design of a template in WordPress. On the left we can see the structure of the template.

We can move through the structure of the template and each element is highlighted in the editor, so that it is very easy to make changes where appropriate and you have a quick view of all the elements nested in each container block.

And There’s More…

And finally, in the video presented at WordCamp Europe, we were also shown the option to define directly in the block editor global styles of the theme to change the color palette, typography, etc. In case you still had any doubts, with this new WordPress 5.8 version we are getting closer and closer to the goal of not needing any other page builder for the creation of your website pages.

Featured image by XPS on Unsplash.

Leave a Reply

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

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.