WordPress 5.7 Update- New features, Drag and Drop, Lazy Loading iframes, New Robots API, security and more

WordPress 5.7- New features, Improvements, release date

Release of WordPress 5.7 is right around the corner and it is the first major release of the year. This update will include 66 new features and enhancements and plenty of bug fixes.

WordPress 5.7 is stated to be released on 9th March 2021 and will include changes to Block Editor, Lazy Loading, streamlined migration from http to https and more.

Note– WordPress 5.7 has not yet been released and there are chances that some of the features that we will discuss in this article might not make it to the final release.

In case you are looking to try the latest WordPress version before it is released then you can install the Beta Tester plugin on a localhost or a Staging environment and see all the features.

Also, we do not recommend doing this on your main site as this is not a stable release and it can break parts of your site.

Having said that, lets dive into the articles.

WordPress 5.7- New features and improvements

As mentioned above WordPress 5.7 is a major update and it comes with a lot of new features and enhancements.

And below is a list of some of the topics that we have covered in this article

• Drag and Drop in WordPress editor
• Full height blocks
• Various improvements to social icons block
• Introduction of font size in code and list block
• Improvements to buttons block
• Seamless migration from HTTP to HTTPS
• Standardization of WP Admin colors
• New Robots API
• Lazy Loading extended to iframes
• Changes to reset password screen
• Revamped Preferences

And more.

Changes to the Gutenberg block editor in WordPress 5.7

WordPress is slowly and steadily moving towards full site editing and in this update you will come see some features that you might have come across while using page builder plugins.

Having said that,

This release of WordPress will include features and improvements from 7 versions of Gutenberg plugin starting from 9.3 to 9.9.

Also, performance improvements from the versions 10.0 and 10.1 are a part of this major update.

Keeping this in mind, lets get familiar with some of the changes.

Introduction of Drag and Drop feature in WordPress 5.7

As we know, to create posts and pages in the WordPress editor you need to select blocks from the inserter.

And the selected block(s) gets added to the canvas.

In WordPress 5.7, a new feature has been introduced using which you will be able to directly drag the blocks from the inserter to the post canvas.

This feature is known as drag and drop. And if you have used plugins like Elementor then I’m sure you will be familiar with this.

Before we move forward, it is important to know that the drag and drop can only be used if you are adding blocks from the main inserter which is on the left.

And not the one on the right which is on the canvas.

Also, using this feature you will be able to drag and drop patterns to your post as well.

Full height alignment in WordPress 5.7

If you have been using blocks to design your site then this feature is for you.

Using the Full height alignment you can set a block to be displayed in the full height covering the screen.

If you want to see this feature in action then Cover block is the one you need to add to your page or post.

And in the toolbar you will see the icon name Toggle full height. When you click it, you will see the block will take the full height of the screen.

As mentioned above, using this feature you can create really beautiful layouts.

Typography controls for List block in WordPress 5.7

List block is one of the most commonly used block and in previous versions of WordPress it did not come with a Font Size support.

This means there was no available option for you to change the font size just like you have in paragraph or any other block that supports it.

in WordPress 5.7, this has changes and Font size support has been added to the list block.

And using this option you will be able to change font size of your lists easily with just a single click.

Font size support for Code block in WordPress 5.7

Just like the List block, in this WordPress update typography support has been added to the code block as well.

Now, using this option you will be able to change the font size of the code block.

Font size support in Preformatted block

Just like the List and Code block, now you will be able to change font size of content in Preformatted block as well.

To change the font size of the Preformatted block, all you have to do is select an option from the list of available presets or add a custom value in the space provided.

Spacer block is semi transparent

Spacer block is another popular block that you can use to add extra vertical spacing between 2 blocks.

Before WordPress 5.7, when the Spacer block was selected it had an opaque light grey color.

And in this release of WordPress this has changed. Now, when you will select the Spacer block you will notice it will have a semi transparent background.

This will make it easier for you to know if any layers are behind it.

Improvements to Button block in WordPress 5.7

In WordPress 5.7, Button block has received a few updates that will help you design your pages better.

The first update that we are going to discuss in this section is

Introduction of vertical layouts

If you have used the button block before when creating pages then I’m sure you already know that its layout is Horizontal by default and there is no option to change it.

And this has changed in WordPress 5.7.

Now, when you will add the Button block it will show an option that will allow you to change the layout depending on your requirements.

The second update that this block has received is

Addition of Button width

Another important thing you have to know about the button block is that, before WordPress 5.7 it used to rely on dynamic widths.

This means the width of the button is defined by the size of the content.

In WordPress 5.7, this has changed and a width selector is introduced that allows you select percentage width.

The last update that Button block has received in WordPress 5.7 is

Complete overhaul of Alignment and Justification controls

If you have used a button block before then you must have noticed the block alignment options which are

• Align Left
• Align Center
• Align Right

In WordPress 5.7 these options have been replaced by 2 new options

• Wide Width
• Full Width

Now, you might be wondering how will you change the alignment of the content which in this case is the button.

For the alignment of content in WordPress has introduced a new setting known as Change Content Justification.

This setting lets you align the content (button) to Left, Right or Center depending on your requirements.

Improvement to Social icons block

Just like the button block, Social icons block has received a few changes in WordPress 5.7 and these changes will allow you to create and add aesthetically pleasing social icons to your site.

Keeping this is mind, the first update that we are going to discuss is

Introduction of 3 new social icons

I’m sure you are familiar with the platforms

• Patreon
• Telegram
• TikTok

After this update, you will be able to add social links to these platforms on your site.

The next update that the social icons block has received in WordPress 5.7 is the

Ability to change social icon size

If you have been using the social icons block you are already aware of the fact that there are no settings that allow you to increase or decrease the size of social media icons.

In WordPress 5.7, a new option Size has been included in the block’s toolbar using which you can change the size of these icons with a single click.

As you can see in the screenshot above, it lets you pick between 4 icon sizes and these are

• Small
• Normal
• Large
• Huge

You can select one depending on your requirements.

Having said that,

The last change that has been in introduced in the social icons block is

Addition of Color settings

One of the basic settings that was missing in the social icons block was the Color.

And this means if you were to add social media icons on your site then you wouldn’t have been able to change the color of the icons and the background.

In WordPress 5.7, this has changed and you will be able to change the colors easily.

As you can see in the screenshot above, after the WordPress 5.7 update you can change the colors of both icons and their background.

Also, it is important to know just like the color settings in any other block, you can select a color from the predefined palette or the custom color picker.

Support for <kbd> tags

I’m sure you are familiar with the text formatting options in WordPress and these include

• Inline code
• Inline Image
• Strike through
• Subscript
• Superscript
• Text color

And more

In WordPress 5.7, a new formatting option has been introduced which is keyboard inputs.

And using this formatting option you will be able to display text that user must enter using the keyboard.

For example, if you want to let the users know that they can use CTRL + C command for copying then CTRL and C being inputs from the keyboard will use the keyboard input type formatting or <kbd> tags. Below is a screenshot for reference.

Block transformation preview

Block transformation is a feature using which you can convert any block into a different block.

For example, if you want to change the paragraph block into a list block then you can do that by clicking the paragraph block icon in the toolbar and it will show you various blocks, it can be transformed into.

And you need to select the list block from the option.

Now, it is important to know here that when you hover your cursor over these options, it will not show you the block preview.

However, in WordPress 5.7 this has changed and you will be able to see the preview of the block when you hover your mouse pointer over it.

As you can see, it gives you a glimpse of how your block might look when transformed and based on this you can make a selection.

Display block information matching block variations in WordPress 5.7

Block Variations API was released in WordPress 5.4 and it gave developers a new way to create variations of a block.

These variations have their own characteristics and hence are listed in the inserter as individual blocks. Some of the common blocks that uses block variations are social icons, embeds, columns and more.

To understand this a little better, lets take the example of a social icons block and when you add this block to your page it gives you an option to pick from its variations such as Facebook, Twitter, Instagram and more.

These variations are similar yet very different from each other and have their own identity.

Keeping this in mind, on adding social icons blocks you must have noticed that block card, list view and the breadcrumbs display the name as social links instead of the name of the service / platform.

As you can see in the screenshot above, we have selected Facebook, Twitter and Instagram icons yet the list view, block card and block transform display the name and icon of social links.

This has changed in WordPress 5.7 and now if you select a block variation then the editor will match the block being used and will show you the correct icon, description, name and breadcrumbs. See the below screenshot for reference.

The next change that we are going to discuss is very closely related to this one and it is

Display matching variation icon in block switcher

As we have discussed above, in the versions of WordPress prior to 5.7, if you add a block that uses block variation such as social links or embed then on selecting the block variation it displays the blocks generic icon. See the below screenshot for reference.

In WordPress 5.7 this has changed and now when you select a variation, it displays the icon of the variation instead of the generic one.

As you can see in the screenshot above, we have selected a YouTube embed block and in the block switcher, it displays the icon of the variation.

Post formats sorted alphabetically in WordPress 5.7

In WordPress 3.1 a new theme feature was introduced known as Post Formats and it is an optional value or meta information that is used by a theme to customize a post presentation.

The supported Post Formats in WordPress are

• Aside
• Gallery
• Link
• Image
• Quote
• Status
• Video
• Audio
• Chat

It is important to know that there are chances that you may or may not find each of these Post Formats in your editor as it is not necessary for themes to support all of them.

Keeping this in mind, if you want to change the Post Format then you will find it under Post settings in your WordPress editor.

Now, if you click the Post Format drop down menu, you will see the options are not sorted alphabetically.

In WordPress 5.7, this has changed and you will notice the Post Format look much organized as these are now sorted alphabetically by translated name.

This means be it you are using WordPress in English or any other language, these will be ordered alphabetically.

Preferences Redesigned

In WordPress 5.6, the name of the options modal was changed to Preferences and on top of that it was optimized for accessibility where below each setting, a small description was added to make it for easier for beginners to understand the working.

In WordPress 5.7, this Preferences modal has been completely redesigned.

Now, to enable or disable any option you will have to use a toggle button which has replaced the checkboxes.

After this change the Preferences modal looks much more organized, clean and less intimidating.

Display button labels in block toolbar

To make WordPress more accessible and easy to use for beginners, in WordPress 5.6 a setting known as Display buttons as labels was released that converted text instead of buttons in the main WordPress toolbar.

In WordPress 5.7, this functionality has been extended to the block toolbar as well.

And this means when you enable this option, the block toolbar will also display text instead of buttons.

If you want to enable this option then you need to Appearance under Preferences

And there you will see the option to enable it.

Standardization of WP Admin colors

Did you know WordPress has a feature using which you can change the WP Admin color scheme and this setting can be found under Profile in Users.

In WordPress 5.7, the admin color schemes have been streamlined and all the colors that used to be in the WordPress CSS have been collapsed to seven core colors namely

• Blue
• Green
• Red
• Yellow
• Grey
• Black
• White

And a range of 56 shades. These meet the WCAG 2.0 AA recommended contrast ratio against black and white.

It is important to know this change might not be as clearly visible but it is a definite improvement and you will definitely feel it.

Also, it will provide developers with a broader and contrasting color palette helping them make consistent and accessible design decisions.

Easy migration from HTTP to HTTPS in WordPress 5.7

After you start a blog or a website, it is recommended that you secure your site from the very first day.

And one of the first things you have to do is to install SSL certificate. Most of the web hosting companies these days offer free SSL certificates and these are very easy to install.

See- How to enable FREE SSL certificate on SiteGround

On doing this, you will notice that your site will display a padlock on the browser address bar and it is a sign that your site is secure.

Keeping this in mind, while browsing the internet you might have also come across sites that have NOT SECURE warning in the address bar.

There can be 2 reasons behind this

• The site is not using an SSL certificate, or in some cases it has either expired or invalid.
• The website is using an SSL certificate. But some of the resources (HTML, CSS, JS or images) are still loading over insecure connection.

In case the situation is the first one then you will have to install a valid SSL certificate and then migrate it to HTTPS.

However, if it is the second one then you will have to fix the mixed content errors. If we talk about fixing these errors then it involves redirecting URL’s from HTTP to HTTPS.

And this is a slightly technical process and if you are new to WordPress then you might find yourself struggling.

To simplify the process for beginners, WordPress has improved the HTTPS detection and migration process in WordPress 5.7.

As this is a two step process, in the first step WordPress will check if the environment that you are using supports HTTPS.

If you are on a test environment that does not support SSL then it will just show you an error in the Site Health with the message “Talk to your web host about supporting HTTPS for your website”.

On the other hand, if it is on an environment that supports HTTPS then it will show you exactly the same error with a different message that states “HTTPS is already supported for your website” and an option to resolve it.

Now that you know that the environment you are using supports HTTPS, its time we jump to the second part and that is migration.

For this all you have to do is click Update your site to use HTTPS

And it will move all the URL’s from HTTP to HTTPS. Also, will change the WordPress and Site URLs to the secured versions.

Lazy Load iframes in WordPress 5.7

When it comes to optimizing your site for performance, there are a few practices that you have to follow one of which is Lazy Loading.

In case you are not familiar with lazy loading then let me tell you briefly about it.

On a webpage text is the lightest element and hence it loads the fastest. Media and other files being heavier takes time to load.

This means when a user lands on your age, the text will load first and then the other resources. And if you let the page load every every image and media element simultaneously then it can take a while for the site to be interactive which will lead to poor performance.

Now, the solution to this problem is simple and that is to only load the media element of the page that are on the screen. Be it an image or an embed.

And this is what lazy loading does.

In WordPress 5.5, lazy loading feature was released for images and in this version and in this update it will be extended to iframes.

This means when you embed content on your WordPress site, it will by default contain an attribute loading="lazy"

If you are using a performance optimization and cache plugin like WP Rocket and wondering if this feature might cause your site to break then let me tell you, you don’t have to worry one bit. Just keep the plugin up to date.

See- What is WP Rocket

New Robots API in WordPress 5.7

If you have been running and managing websites then I’m sure you must have definitely come across the term Robots meta tags a few times.

In case not then let me tell you bit about it. Robots meta tags are tags using which you let the search engines know which parts of the website to crawl and index.

Currently SEO plugins like Yoast, Rank Math, All in one SEO and more help you with managing these tags,

And after this update you will be manage them using WordPress filters.

In this release, WordPress has introduced a filter based Robots API that will give you control over the Robots meta tags.

Also, it will add max-image-preview:large directive to the sites by default. Furthermore a new function wp_robots() has been introduced in WordPress 5.7 that is automatically integrated with relevant areas in the WordPress core such as wp_head().

And it will output the robots meta tags on your site.

If you are a developer then you can manage these tags by adding filter to the wp_robots(). Below is an example

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

And the output of the above code fragment will be

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

As mentioned above, this function automatically adds the max-image-preview:large directive to pages and in case you want to disable it then you can add the below mentioned code fragment in functions.php or a site specific plugin.

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

Read more on the New Robots API

Reset password links in WordPress 5.7

If you run a multi-author blog on WordPress or a site that accepts registrations then at some point of time you might have faced this problem where a user might have lost the password and was somehow unable to reset it.

In such situations, you being the site administrator have to set a new password for them. This is process is insecure and that is why not recommended.

And keeping this in mind, a new feature has been introduced in WordPress 5.7 that allows site administrators to send the reset password links.

These links are sent via email that the user has used to register on the website. Once the email is received the user can click on these links and reset the password easily and securely.

You can find the option to send reset password links when you hover your mouse pointer over a user in the user list.

Also, you can find this option in the user profile under Account Management when you edit any profile.

It is important to know you can send reset password links to multiple users at the same time using the bulk actions as well.

Changes to login and registration screen in WordPress 5.7

When it comes to resetting passwords in WordPress, the process is pretty simple. However, things can get slightly confusing when you click the reset password link that you have received in the email.

If you have reset passwords before then you already know that after selecting a password, it is required that you click the Reset Password button or the changes will not be saved.

Now, if you are a beginner and have not done this before then there are chances that you may not click this button as it sends a confusing message.

Keeping this in mind, in WordPress 5.7 the reset password page has been improved and 2 new buttons have been added.

• Generate Password- Using this you can generate a safe password.
• Save Password- Once the password is selected, you can save it by clicking this button

Now, this change makes the reset password page much more streamlined and user friendly.

Improvements to import/ export in WordPress 5.7

WordPress comes with built in Export / Import feature that lets you move your site’s content including Media files easily.

A good example of usage of this feature will be migration of a site from another platform to WordPress.org.

It is important to know when you export content from a WordPress site it creates a WXR file which is an XML file.

From the very beginning this export file uses the parameters post_content and post_excerpts have had specific filters for exports. However, post_title used the_title_rss filter.

This filter behaves very differently as it

• Strips the HTML tag from the string
• HTML encodes the title string

This means the exported post titles do not match the existing titles in the post tables resulting in loss of data and post duplication on import.

Keeping this in mind, in WordPress 5.7 a new export specific filter for post titles the_title_export has been introduced to make this process more streamlined. Below is a usage example

function wporg_edit_exported_title( $post_title ) {
    $post_title = sprintf(
        /* Translators: the post title. */
        __( '[IMPORTED] %s', 'text-domain' ),
        $post_title
    );
    return $post_title;
}
add_filter( 'the_title_export', 'wporg_edit_exported_title', 10 );

Moving forward, Export / Import in WordPress has received another update in this version

And in this 2 new fields post_modified and post_modified_gmt have been added to the generated WXR export file.

These will help determine the latest version of the post making it possible to implement import logic involving updating and adding revisions to existing posts and pages.

Other changes for developers in WordPress 5.7

• New Post parent related functions have been introduced in WordPress 5.7 namely get_post_parent() and has_post_parent(). These will be replacing get_parent_post() and has_parent_post()

Read more on these Post Parent related functions

• To check if a post is publicly viewable, WordPress 5.7 has introduced 2 new functions and the first one is is_post_status_viewable(). This function will help developers determine if a post is publicly viewable or not.

For built-in post statuses, the public attribute is checked and for custom statuses public_queryable attribute is checked.

Usage example

<?php
global $post;
$current_post_status = get_post_status( $post );
if ( is_post_status_viewable( $current_post_status ) ) {
    echo 'This post uses a public post status';
} else {
    echo 'This post uses a non public post status';
}

The second function that WordPress has introduced is is_post_publically_viewable(). This function will check if post can be viewed by a logged out user.

A post will be considered viewable if both is_post_status_viewable() and is_post_type_viewable() return the value true for post attributes.

Usage example

<?php
if ( is_post_publicly_viewable() ) {
    echo 'This post is publicly viewable';
} else {
    echo 'This post is not publicly viewable';
}

Read more on these new functions

WordPress 5.7 Release schedule

• 02-02-2021- Release of Beta 1
• 09-02-2021- Release of Beta 2
• 16-02-2021- Release of Beta 3
• 23-02-2021- Release Candidate 1
• 02-03-2021- Release Candidate 2
• 09-03-2021- Release WordPress 5.7

How to update WordPress 5.6 to WordPress 5.7

Whenever a stable version is released you will see a notification in the updates section of your WordPress dashboard.

Before we move forward, it is important to know if you are using Managed WordPress hosting then the hosting provider will automatically update your site to the latest version.

On the other hand, if you are on shared hosting then you will have to do it yourself.

Updating WordPress might seem like a complicated process if you are starting out. However, it is pretty straight forward and the first step is to take a complete back up of your website.

For this you can use the Updraftplus plugin.

After you have taken a complete backup, the next step is to navigate to Updates section in your WordPress dashboard.

There you will see an option to update your WordPress site to the latest version. Here all you have to do is click the Update Now button.

Once the process is over, the last step is to visit your site and see if everything is working as expected. If yes, then you have successfully updated your site from WordPress 5.6 to 5.7

Having said that,

I hope you will find this tutorial helpful and now know What’s new in WordPress 5.7. If you have any queries feel free to reach out via the comment section.

Do let us know which feature or improvement you like the most in this update. Also, don’t forget to share this post with your friends and colleagues on social media.

Before you leave, feel free to check the best deals and discounts on Blogging tools and our Blogging and WordPress Glossary. Also, to stay up to date with our content, join our Facebook group, sign up for our newsletter, and follow us on social media.