•  
  •  

WordPress 5.7: New Features from the Latest Release

WordPress 5.7 New Features from the Latest Release

“I know that you know but I’ll sing it again,” WordPress has a new release and this time around it honors yet another jazz genius Esperanza Spalding, the original source of that quote.

Before diving into the nitty gritty of WordPress 5.7, let’s answer two important questions upfront:

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 rolled out before that.

What’s new in WordPress 5.7?

A bunch of things. But to cut it short, there are Gutenberg improvements that simplify the editing workflow, allowing users to create professional blocks with less coding and more drag-and-drop. Users also have more customization options that are easier for users to find.

You could say that WordPress 5.7 is under the overall theme of simplified editing, advanced color palettes with “fresh” colors, and other improvements that will be welcomed by developers everywhere. To name a few: a new and fast 1-click migration from HTTP to HTTPS, a big jQuery update, and a new 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.4, 5.5, and 5.6!

The WordPress 5.7 Block Editor

What you get out of the editor enhancements is more simplicity and more control.

What’s so simple about it?

  • Inserter drag-and-drop:

You can create or edit a page way faster than before because the time-consuming process of coding is replaced by a simple drag-and-drop. You want to place a block somewhere in your post? Easy, just drag it there. You want to select a block pattern for a specific section? Again, just drag it there. Easy enough to remember, right?

inserter drag-and-drop in WordPress 5.7

  • Font-size adjustments everywhere (well, almost):

Before this release, you probably had to open a new screen to change your font size, right? Now, you will find the font-size controls in the List and Code blocks to save yourself the trouble of looking for them elsewhere.

font-size adjustments inn wordpress 5.7

  • Reusable blocks:

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

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

  • Social Icons block:

Now users can change the size of social icons.

social icons block in wordpress 5.7

  • Buttons block:

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

buttons block in wordpress 5.7

  • Full-height alignment:

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

full-height alignment in wordpress 5.7

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

color palette of wordpress 5.7

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.

streamlined color palette for the admin in WordPress 5.7

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.

migrate http to https in 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.

browser-level loading attribute in 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.

Here’s an example of an iframe tag that features a loading=”lazy” attribute:

iframe tag with a loading lazy attribute

With the added wp_filter_content_tags() function the attribute is included in page output.

These iframes will get the loading=”lazy” attribute by default:

  • iframes in post content (the_content)
  • iframes in post excerpts (the_excerpt)
  • iframes in text widgets (widget_text_content)

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 keep in mind that you shouldn’t use iframe lazy loading if you use another mechanism of lazy loading. Say, for example, your website features an ad that’s built by an ad agency. In such an instance, you can’t have iframe lazy loading given that the ads use iframes for which they have their own lazy loading mechanism. For now, the only way to do this is by writing a small PHP code to filter out that iframes and disable their lazy loading.

Another thing to take into account is that there is an open Elementor issue with lazy loading. The Elementor editor hasn’t added the lazy-loading features natively yet, meaning that users have to either install a plugin for this or add the attribute in the original markup by Elementor. We don’t recommend relying on the plugin option because it’s a bulky process of parsing and changing the markup of the entire page. Better avoid it if you can.

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

browsers that support the loadin attribute

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.

login and registration screens changes in 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.

how an admin can provide a password reset link

  • With the new login_site_html_link hook people can now modify the “Go to site” link features in the login page footer.

Introducing new Post Parent related functions

This new change blesses you with two new functions (get_post_parent() and has_post_parent()) that’ll tell you if there’s a parent for a post and access the linked parent Post object.

Here’s a code fragment example of combining both functions to present a “Back to parent page” link.

<?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; ?>

Introducing additional functions to check if a post is publicly viewable

Here are the functions for that: is_post_status_viewable() and is_post_publicly_viewable().

The first one checks if a post is publicly viewable, while the second one can be applied to single posts to see whether unregistered users can view it.

Miscellaneous developer focused changes

Some of the treats for developers also include:

  • An _update_post_term_count() function to filter the database for the number of objects within a certain term and to update the count property for that specific term in the database.
  • A new filter that allows the wp_mail() function to be shortened without having to create a custom version of the entire function.
  • A new $wp_error parameter added to all functions writing to the cron array.

But that’s only half of it. Click the link in the headline to get the deets.

This, more or less, is WordPress 5.7, named after the soul-wrenching jazz genius Esperanza Spalding. What’s your verdict? Yay or nay?

Don't forget to share this post!

Rebecca Ohanes
Rebecca Ohanes
Rebecca Ohanes is a content writer at 10Web. She’s a part-time PhD student and a full-time WordPress enthusiast. As an act of goodwill, she refrains from giving a humorous or ironic description of herself. You’re welcome!

Leave a comment

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

Your email address will never be published or shared. Required fields are marked *

COMMENT

NAME *

WEBSITE

Cancel reply

6 comments

Sort by recent
  • Avatar
    Abdullah Al Imran

    Nice article Rebecca! you have explained it very well. I am a new reader of your blog.
    Thanks for sharing your knowledge.

    Loading
    View all 1 replies
    • Rebecca Ohanes
      Rebecca Ohanes

      Thanks, Abdullah. And a warm welcome to our blog! 🙂

      Loading
  • Avatar
    Lynn Creger

    Great article. You have discussed all new features in WordPress 5.7 using much content and also images. It’s good to know the updated new feature in WordPress 5.7. Thanks for sharing.

    Loading
    View all 1 replies
    • Rebecca Ohanes
      Rebecca Ohanes

      Thanks, Lynn! Very happy to hear that! 🙂

      Loading
  • Avatar
    Amelia Lynch

    Very comprehensive and informative! Thanks for sharing this helpful content! Regards

    Loading
    View all 1 replies
    • Rebecca Ohanes
      Rebecca Ohanes

      Glad you found it useful, Amelia! 🙂

      Loading