WordPress: updates in the latest version

WordPress 5.7, the first major release of 2021, brings with it interesting new features. I will report in detail on those concerning the Gutenberg block editor.

Create a full height cover with WordPress Gutenberg

One of the design innovations that I find most interesting is the possibility of setting a full-height cover.
Simply add a cover block and insert a photo and optionally also a text and an overlay. The new block must be set to full width and height. You can also choose the alignment of the image in relation to its container.

Customising buttons with Gutenberg

With the latest version of Gutenberg it is possible to set both the size of the buttons and their alignment horizontally or vertically.

There are currently four sizes to choose from: 25%, 50%, 75% and 100%.

If we have several buttons, we can choose to keep them on a single line (horizontal) or to stack them one below the other.

Changing the font size for Gutenberg blocks

At the typographical level, the content editor of a WordPress site can choose to change the size of the text to a list block or a code block, as well as to paragraphs.

WordPress will add a class or a custom style to the block.

Adding spacing between contents on a page with Gutenberg

Those who use page builders to layout the content of a page in WordPress know the options for adding padding or margin to separate content.

In an entirely different but much simpler way, spacing between contents was added between Gutenberg blocks.

WordPress will add a full-width div element to the parent element. The block uses the wp-block-spacer class and adds a custom style that contains the chosen height in px.

Custom sizes and colours for the WordPress social icon block

The social icon block gains the possibility of choosing the size and setting custom colours.

News for developers of WordPress themes and plugins

In WordPress, add a link to the parent page of a post: has_post_parent() and get_post_parent().

Two functions have finally been added to the WordPress core to determine whether a post has a parent and to obtain the information.

In WordPress 5.6 and earlier the solution for determining the title, permalink and id of the parent page required the following:

<?php
$parent_title = get_the_title($post->post_parent);
$parent_id = get_the_ID($post->post_parent);
$parent_url = get_permalink($post->post_parent);
?>

<a class="page_<?php echo $parent_id; ?>" href="<?php echo $parent_url; ?>" title="<?php echo $parent_title; ?>"><?php echo $parent_title; ?></a>

In WordPress 5.7, however:

<?php if ( has_post_parent( get_the_ID() ) ) : ?>
	<a href="<?php the_permalink( get_post_parent( get_the_ID() ) ); ?>">
		<?php
		echo esc_html( sprintf(
			__( 'Back to parent page: %s', 'text-domain' ),
			get_the_title( get_post_parent( get_the_ID() ) )
		) );
		?>
	</a>
<?php endif; ?>

Checking in WordPress whether a piece of content is really public to everyone

Two other functions have also been added to the WordPress core to help correctly determine the visibility of a piece of content (a page or a post).

Until WordPress 5.6, the is_post_type_viewable function simply determined whether or not a post type was visible to anonymous users.

With the new function is_post_status_viewable() it is possible to determine whether a specific post is publicly viewable or not. As password-protected content is also considered viewable, a second function has been introduced: is_post_publicly_viewable(). This latter function allows the developer to determine whether the post can also be viewed by logged-out users.

Other new features in WordPress 5.7

Among the many new features of WordPress 5.7, two are worth mentioning:

• The Drag & Drop: the user can insert blocks and patterns by simply dragging them towards the page.
• And the HTTP to HTTPS tool: one click is all it takes to upgrade database URLs from HTTP to HTTPS.

What had happened previously with version 5.6?

Compared to version 5.5, the most striking new feature is the renovation of the Widget area, which can now be modified with Gutenberg.

New Widget area

After the pages and articles, Gutenberg also extends its presence to the Widget area. With WordPress 5.6 compatible themes, adding new content to widgets will be much easier for the site administrator.

Gutenberg blocks in Widget for graphic designers

For designers, the design work will change little compared to the past. It will continue to be possible to provide sections common to all pages, such as the <footer>, or sections to be used on certain pages.

The greater flexibility of the new Widget area will, however, lead the graphic designer to have to predict the style of potential blocks that the site administrator will want to insert independently at a later date.

Gutenberg Blocks in Widget for developers

The work of the developers will change. In the past, many new widgets had to be created from scratch. Now the main focus will be on CSS, which will be responsible for the layout of the blocks.

The site administrator will find himself in a less rigid environment and will therefore be able to add much more content more easily. The greatest effort for the developer will be to anticipate, in collaboration with the graphic designer, possible scenarios and ensure that the theme is ready to support the interventions.

Pay attention to the terms and conditions in the contracts for the creation of a website with WordPress

Since the first version of WordPress 5 was released, creating a fully Gutenberg-compatible WordPress theme requires more effort. This means that it will be necessary to decide with the end customer right from the start how the theme should be designed.
The theme can have a "rigid" layout, i.e. with a layout and areas decided jointly according to precise objectives. With this strategy, the initial development cost will be lower.

On the contrary, allowing the uncontrolled insertion of any available block both in the pages and in the areas prepared to host the widgets, is more complex and therefore more expensive.

Let's suppose, for example, that during the design phase you decide to include the company logo, a navigation menu and newsletter subscription in the <footer> block.
The three contents can be paginated one under the other in the mobile version, and in the column in the desktop version. The developer will make sure the layout works correctly.

What happens if the site administrator decides to add content not initially planned?

It is therefore very important to decide these aspects with the customer right from the start.

Other WordPress 5.6 improvements

The other new features are of a technical nature: Gutenberg and Customizer have been updated; and WordPress gains support for PHP 8.

What had happened previously with version 5.5?

Compared to version 5.4, the team had focused mainly on Gutenberg's usability, the correction of minor errors, the updating of the many libraries that make up the core of WordPress, and three important new features.

The main improvements of Gutenberg

Starting with WordPress 5.5 you can edit images directly in the editor with the cropping, format selection and rotation tools.

The choice of blocks is made via the new sidebar which opens to the left of the editor and also includes the search box. The "Patterns" section has also been added, which includes ready-made example components.

The preview display has also been revised. You can now view the page for Desktop, Tablet and Mobile.

Three important news

WordPress 5.5 includes three important new features.

Sitemap

The first one is about sitemaps. You no longer need to install third-party plugins to create sitemaps. WordPress itself will generate a sitemap for us already divided by posts, pages, taxonomies and users. The sitemap for images has not been planned but will be available in the future. The file name of the sitemap to be reported to search engines is domainname/wp-sitemap.xml, but the path is already integrated directly in the robots.txt file.

Lazy Loading

The second interesting new feature is the loading of images using the native browser lazy loading. Introduced not long ago, the loading tag allows you to display the image only if it is in the area visible to the user. In the past this was made possible by JavaScript. Now a simple HTML tag is enough:

<img src=“psd-to-html.png” loading="lazy" alt="An image with native lazy loading" width="800" height=“360">

The loading tag is compatible with most browsers. In Safari it will be supported in version 14 but only as an experimental feature to be activated manually.

Automatic updates

The third major new feature is the automatic theme and plugin updates. Keeping an installation of WordPress updated is essential, but you can disable the auto-update, a feature that I find useful because a theme or plugin may not be compatible with the latest version of WP and consequently generate errors complicated to fix.

What had happened previously with version 5.4?

The most relevant news in WordPress 5.4 is mainly about graphics. New blocks or new elements can be used in the next graphic layouts to be converted into WordPress themes.

Social icon block

One of the first novelties is the addition of a social icon block with a ready-to-use set.

Simply add it in the location you want and for each social you add the relevant reference page. In addition to the actual socials, there are other types of icons, such as Dropbox, Amazon, or the simple link to any other type of page.

This block already works on all themes, even proprietary ones. Icons are added in SVG format.

This is the current complete list:

• WordPress
• 500px
• Amazon
• Bandcamp
• Behance
• Link
• CodePen
• DevianArt
• Dribbble
• Dropbox
• Etsy
• Facebook
• RSS feed
• Flickr
• Foursquare
• Goodreads
• Google
• GitHub
• Instagram
• last.fm
• LinkedIn
• Mail
• Mastodon
• Meetup
• Medium
• Pinterest
• Pocket
• Reddit
• Skype
• Snapchat
• SoundCloud
• Spotify
• Tumblr
• Twitch
• Twitter
• Vimeo
• VK
• Yelp
• YouTube

Here is an example of the HTML code generated by one of the icons:

<button class="components-button wp-social-link wp-social-link-wordpress">
        <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable=“false">
            <path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path>
        </svg>
</button>

Buttons block

The button lock has been updated and now multiple buttons can be inserted side by side.

You can insert both background and border buttons. The settings panel allows you to change the colours of backgrounds, including gradients, and text. The border colour is taken from the text colour. You can also change the radius of the border. Interesting warning about contrasts: if the text colour is not well readable due to poor contrast with the background colour, WordPress warns us by suggesting choosing another colour.

Even the buttons work independently of the chosen theme. Their style also works on proprietary WordPress themes.

Text colour

In WordPress 5.4 you can also assign a colour to a short selection of text. The user can then select a portion of text and give it a different colour. In addition to the default colours, you can also choose a custom colour. This can be done thanks to the colour table, hexadecimal value, RGB, HSL.

This option is also available for all themes, none excluded.

Background colours

For the column block, covers, and groups, as is already the case for text, you can choose a background colour (even gradients) and a text colour.

Last articles block

The block that allows you to insert the last posts immediately has been improved with the addition of images. Thumbnails can be aligned left, centre, or right. You can also choose the size.

This block works with compatible themes. With the themes created ad hoc, CSS instructions must be written for correct operation. Old themes will then need to be updated if you want to use this feature.

Caption table

One of the minor novelties concerns the table that gains the addition of the caption, which must be formatted via CSS in the new WP themes.

TikTok Widget

Among the content that can be embedded in WordPress blocks, e.g. YouTube or Facebook, with the latest version you can also integrate TikTok content.

Usability

With this latest version of WordPress, its usability also benefits. Very interesting is the upload of the elements. If before you always had to use the library interface, with version 5.4 you will be able to upload elements directly from a block.