WordPress 5.7: New Features from the newest Release

WordPress 5.7: New Features from the Latest Release | 10Web

Each WordPress release brings new features and enhancements to the editor. WordPress 5.7 also will ship with some exciting new features and enhancements to enhance your editing experience.

In this article, we’ll show you what’s coming in WordPress 5.7 with features.

When will WordPress 5.7 be officially released?

It’s already out. The official release date was on March 9, though its beta version had been unrolled before that.

What’s new in WordPress 5.7?

A bunch of things. But to chop it short, Gutenberg improvements simplify the editing workflow, allowing users to make professional blocks with less coding and more drag-and-drop. Users even have more customization options that are easier for users to seek out.

You could say that WordPress 5.7 is under the general theme of simplified editing, advanced color palettes with “fresh” colors, and other improvements which will be welcomed by developers everywhere. to call a few: a replacement and fast 1-click migration from HTTP to HTTPS, an enormous jQuery update, and a replacement filter-based Robots API.

Matt Mulleweg, WordPress 5.7’s release lead, introduces the new updates like this:

With this new version, WordPress brings you fresh colors. The editor helps you work in a few places you couldn’t before without getting into code or hiring a pro. The controls you use most are right where you need them. Layout changes that should be simple, are even simpler to make.

Sounds interesting enough to zoom in on the details and take a look at them one screenshot at a time, don’t you agree?

Now let’s explore what advantages WordPress 5.7 has over its predecessors, WordPress 5.45.5, and 5.6!

The WordPress 5.7 Block Editor

  • Drag and Drop Blocks from Inserter

You can create or edit a page way faster than before because the time-consuming process of coding is replaced by an easy drag-and-drop. you would like to put a block somewhere in your post? Easy, just drag it there. you would like to pick a block pattern for a selected section? Again, just drag it there. Easy enough to recollect, right?

WordPress 5.7: New Features from the newest Release
  • Adjust Font Size in More Blocks

Another improvement within the block editor is that the ability to regulate the font size in additional blocks including the list and code blocks.

WordPress 5.7: New Features from the newest Release
  • Reusable blocks

Using reusable blocks is much easier now. once you save a post, your reusable block is automatically saved, too.


Now, that we all know all this, let’s explore more ways during which this improvement saves you from writing custom codes and provides you more control:

  • Social Icons block

Now users can change the size of social icons.

WordPress 5.7: New Features from the newest Release
  • Buttons block

Here you can now decide between a vertical and horizontal layout. And there are preset percentages for the width of a button.

WordPress 5.7: New Features from the newest Release
  • Full-height alignment

The name gives it away, you can now have a block that covers the entire window.

WordPress 5.7: New Features from the newest Release

All right, all right, all right, as Matthew McConaughey would say in his cool and soothing voice. Knowing all of this, you’re all set to get acquainted with the new color palette.

Color Palette of WordPress 5.7

WordPress 5.7: New Features from the newest Release

Next to editor enhancement, there’s a brand new streamlined color palette for the admin. This is all part of the effort to “clean up” WP admin CSS, which now consists of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white.

Basically, the variety of colors in the WP source code is now bundled in 7 colors and 56 shades that comply with the WCAG 2.0 AA recommended contrast ratio against white and black.

WordPress 5.7: New Features from the newest Release

What do users get out of this? Consistency. Developers of plugins and themes can now pick a color from this standardized palette to ensure that their product is in line with WordPress Core.

In any case, note that the WP core color classes have been updated with this new release according to this new color palette. And make sure to update your color pattern if you happen to have existing plugins and/or themes.

Robots API Changes in WordPress 5.7

Granted, this one’s a doozy, especially for non-developers. But bear with us, maybe we can help you make sense of it.

With WordPress 5.7 comes a filter-based Robert API, giving you centralized control over the robots meta tag that now has a default max-image-preview:large directive. Side note: with this directive search engines can feature image previews for a site thereby improving user experience. It’s automatically included in pages that wish to be indexed in search engines.

By introducing the robots meta tag, developers can precisely determine how a page is indexed and delivered to users via search engines. This tag is placed in the head of a page.

<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="max-image-preview:large" />
</head>

The wp_robots function() in WordPress 5.7

To get the meta tag, WordPress 5.7 rolls out the wp_robots() function. It’s automatically added to the wp_head tag to include the robots meta tag in the frontend, and is generally available in all important sections of the WordPress core. That’s why WordPress advises against plugin and themes manually calling this function. For the rare cases where a frontend template doesn’t feature wp_head(), this function can be filtered using the following hook.

add_action( 'my_custom_template_head', 'wp_robots' );

How to hook into the Robots API

Use the wp_robots hook to filter the robots meta tag attributes.

Here’s what you need to know about the wp_robots function: it’s fully filter-based. What this means is that the robots meta tag will be neglected completely if there’s no filter included in the wp_robots function. Because a lack of filters means a lack of directives.

If you’re a plugin developer and like to add your individual robots meta tags, we (and by that, we actually mean WordPress) recommend you to hop on board and use the new Robots API.

Default robots meta tag values

So, we mentioned earlier that the robots meta tag is automatically added to the wp_head. Here’s what that looks like:

<meta name="robots" content="max-image-preview:large" />

Should you wish to disable this directive, here’s the PHP fragment to use:

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

There are several values that enable the Robots API to make robots meta tags on certain screens:

  • For starters, a noindex,nofollow directive is added to the robots meta tag whenever the “Discourage search engines from indexing this site” option is selected. But that’s not news. The max-image-preview:large directive isn’t included in instances like these.
  • Also, the robots meta tag of sites features a noindex directive in the Customizer preview.
  • The robots meta tag of your WP login page (wp-activate.php) features a noindex,noarchive directive and a
  • There’s a site activation page (wp-activate.php) in multisite so that new users can verify their new site. This page features a noindex,noarchive directive in the robots meta tag and a tag.

Include custom values in robots meta tag

There’s a lineup of value pairs that the wp_robots filter takes. You can use this filter to include custom values in the robots meta tag:

function wporg_wp_robots_add_follow( $robots ) {
$robots[‘follow’] = true;
return $robots;
add_filter( 'wp_robots', 'wporg_wp_robots_add_follow' );

This will also include the follow value on top of available values. Since the max-image-preview:large directive is featured automatically, the mentioned fragment produces this:

<meta name="robots" content="max-image-preview:large, follow" />

You can also disable available values via:

function wporg_wp_robots_add_follow( $robots ) {
unset( $robots[‘max-image-preview’] );
$robots['follow'] = true;
return $robots;
}
add_filter( 'wp_robots', 'wporg_wp_robots_add_follow' );

Deprecated functions

With WordPress 5.7, the individually inserted robots meta tags are now interchanged with the wp_robots filter, which now manages the Robots API. With this in mind, here are the functions that don’t work anymore because they’ve been deprecated:

  • noindex(); just hook the wp_robots_noindex() function into the wp_robots filter.
  • wp_no_robots(); just hook the wp_robots_no_robots() function into the wp_robots filter.
  • wp_sensitive_page_meta(); this function features 2 replacements:
  1. In case of the noindex,noarchive robots directive; just hook the wp_robots_sensitive_page() function into the wp_robots filter.
  2. In case of the additional referrer tag, call the wp_strict_cross_origin_referrer() function.

The new “Switch to HTTPS” feature

Let us describe to you what it used to take to switch from HTTP to HTTPS before the WordPress 5.7 release: First you had to refresh URLs fixed within your content. If you missed out on updating, you would face a mixed content error.

WordPress 5.7

With WordPress 5.7, there’s no such thing. Just head over to Tools → Site Health and then click Update your site to use HTTPS under Site Health Status. That’s all. Just one click will update your URL, switching the settings of your WP and site URL while making sure URLs in your content are up-to-date to use HTTPS.

Lazy-load update

Just to make sure that everybody is on the same page: lazy loading is a way to ensure that your site runs fast and without any hang-ups by having browsers load an image only when it’s seen by users.

Now the automatic inclusion of lazy load for images has existed since WordPress 5.5. WordPress 5.7 uses lazy loading by default for iframe embeds allowing iframes, such as YouTube videos to have the same advantages as images. For that, WordPress 5.7 uses the browser-level loading attribute.

WordPress 5.7

This is great news for developers because, now, they can provide awesome-looking websites without having it negatively affect their websites’ speed performance. No more sacrificing visual excellence for a higher PageSpeed score. You can have both!

The iframe lazy loading reduces your page rendering time, improves your network usage and loading speed. You should lazy-load every iframe if there’s no need to load it initially with a page.

For iframe tags that have width and height attributes, WP includes loading=”lazy” so that there are no bad repercussions for layout shifts.

How to customize lazy-loading iframes

Basically, this new update allows you to customize your lazy-loading iframes by deciding whether you want your iframes to lazy-load like images and how they’re supposed to do it. Your main filter is wp_lazy_loading_enabled which automatically returns true for iframe tags.

This code fragment, for instance, allows you to switch off automatic lazy-loading for iframes within post content:

function disable_post_content_iframe_lazy_loading( $default, $tag_name, $context ) {
if ( 'iframe' === $tag_name && 'the_content' === $context ) {
return false;
}
return $default;
}
add_filter(
'wp_lazy_loading_enabled',
‘disable_post_content_iframe_lazy_loading’,
10,
3
);

Besides that, you have the wp_iframe_tag_add_loading_attr filter with which you can customize particular iframe tags.

In case you want to switch off the lazy-load of iframes embeds for YouTube videos, use this code fragment:

function skip_loading_lazy_youtube_iframes( $value, $iframe, $context ) {
if ( 'the_content' === $context && false !== strpos( $iframe, 'youtube.com' ) {
return false;
}
return $value;
}
add_filter(
‘wp_iframe_tag_add_loading_attr’,
'skip_loading_lazy_youtube_iframes',
10,
3
);

But confine mind that you simply shouldn’t use iframe lazy loading if you employ another mechanism of lazy loading. Say, for instance , your website features a billboard that’s built by a billboard agency. In such an instance, you can’t have iframe lazy loading as long as the ads use iframes that they need their own lazy loading mechanism. For now, the sole thanks to do that is by writing alittle PHP code to filter that iframes and disable their lazy loading.

Another thing to require under consideration is that there’s an open Elementor issue with lazy loading. The Elementor editor hasn’t added the lazy-loading features natively yet, meaning that users need to either install a plugin for this or add the attribute within the original markup by Elementor. We don’t recommend counting on the plugin option because it’s a bulky process of parsing and changing the markup of the whole page. Better avoid it if you’ll.

One last note: Currently, not all browsers support the loading attribute, so inspect this matrix to seek out out more:

WordPress 5.7

Changes based on notes from WordPress developers

WordPress 5.7 comes with some “dev notes” that include some extra updates. Check them out!

Login & registration screens changes

  • When resetting a password, two separate buttons are available: “Generate Password” and “Save Password” to avoid confusion.
WordPress 5.7
  • A lostpassword_user_data filter allows developers to filter the user data object when a password reset is requested.
  • The retrieve_password function is transferred from wp-login.php to wp-includes/user.php, allowing the admin to provide users a password reset link.
WordPress 5.7
  • With the new login_site_html_link hook people can now modify the “Go to site” link features in the login page footer.

Further reads : 

Top Technology Trends to watch in 2021

subscribe

The latest tips and news from the industry straight to your inbox!

Join 30,000+ subscribers for exclusive access to our monthly newsletter to get the latest news, updates and special offers delivered directly to your inbox.

Lalit Bisht

I love to explore about tech updates and to teach in a simple and understable way. "Life is a garden, dig it"

Leave a Reply