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 WordPress.org 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.
Recently, the drag icon (6-dot icon) was also added so that we could move any block within the container where it is located.
When you are in a block, press Esc to switch to selection mode and press Enter to return to edit mode.
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.
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.
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.
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.
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.
Nelio Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
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.
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.
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.
Preview of the transformation from paragraphs to columns. Preview of the transformation from paragraphs to list.
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.
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.
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 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:
- 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.
Thus, with this block you can create menu designs very easily.
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.
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.
Leave a Reply