See the big changes coming to WP 5.7 before you upgrade – including iFrame lazy load, HTTPS, Gutenberg updates, jQuery modifications, and more.
Transcript highlights and images are below the video too!
Let’s start with the biggest changes that may impact or even break your site.
iFrame Lazy Load
In WP 5.7, lazy loading of iFrames will be added to the core. And even though it is also done the same way browsers do it, there is a potential conflict with the way 3rd party ad agencies insert ads via iFrames.
Some of the bigger ad agencies, like Mediavine, have their own lazy load mechanism for deferring the load of their ads via JS. This is to improve site speed. And the way they do it fires after the PHP method used by WordPress. So, there will be no conflict.
But, not all ad agencies use this best practice. So, be sure to check with yours prior to updating to WP 5.7 to ensure nothing will break.
It’s also worth noting that only the Chrome browser supports this type of lazy loading of iFrames. Firefox and Safari only support lazy loading of images when done with this attribute.
This is another reason to consider sticking with a plugin that lazy loads via JS instead. It’s a bit more resource intensive, but it works on all browsers and displays a placeholder image for the iFrame.
Lazy Load Plugins
There are plugins that either add or control lazy loading from a nice interface so that you don’t have to get into your site’s code.
It’s critically important that your site is fully encrypted and has an HTTPS URL.
But, some folks with older sites have resorted to trickery that redirects all of the HTTP links in their database to HTTPS rather than trying to convert all links to HTTPS.
In an attempt to make it easy for all sites to convert to HTTPS, WordPress has added a scanner in the Site Health Check feature to determine if you have an SSL certificate available, and what the status is of the links in your database.
As you can see, it says I have an issue with my HTTPS setup. This is actually a false warning and is being triggered because I have this test site in Maintenance mode. Once turned off, it’s fine.
If you really do have an HTTP site, your message will look a little different and there will be a button to convert it to HTTPS.
While this tool will convert the HTTP links to HTTPS, it won’t convert every link to your canonical. In other words, on older sites, you could have a mix of www or non in there too, and those likely won’t get changed.
Plus, conversion of the database links is only one-third of the process.
You also need a forced regex to redirect all HTTP hits to the encrypted HTTPS port.
And you need 5 HTTPS security headers – Chrome is already calling for 3 of them and these are part of your Core Web Vitals now too.
And for extra brownie points, it’s a good idea to submit your site to the Chrome HSTS preload safe site list, that all other browsers copy, with Chrome’s blessing.
Now, if you are using some form of HTTPS trickery already, such as a plugin or some setting provided by your host, I doubt you’ll see this HTTPS message in the Site Health Check module on your WP Dashboard.
But that doesn’t mean you have all you need for good HTTPS, or the Core Web Vital security header checks that’s one these days too.
Get Your HTTPS Done Right
BlogAid offers real, and full HTTPS conversion service that covers everything – with no plugins and no trickery anywhere.
Over the course of the WP 5.5, 5.6, and 5.7 releases, major changes have been made to how WP handles/supports the jQuery coding language that so many of our plugins use.
The 5.5 update broke millions of sites and it took 2 weeks for WP to release a plugin patch for those affected.
But this also served to put plugin developers on notice about how critically important it was for them to bring their plugin’s code up to par with WP coding standards. Since then, many plugins have been recoded and site owners no longer need that interim plugin.
But, if you did have an issue, you will want to take special precautions when updating to WP 5.7, as WP is removing support for how that plugin bridged things.
If anything in WP 5.7 will break your site, this is likely to be it.
Get WP Update Instructions
My BlogAid News subscribers will receive the steps to take for doing their WP 5.7 update so that their site is safe and avoids breaks, and/or the steps to take if something does go sideways.
There were several impressive Gutenberg features rolling into WP 5.7 too.
Full Height Blocks
One of the features exclusive to Gutenberg, that you can’t do in the Classic Editor, is full width image display.
In WP 5.7, you’ll now also have an easy way to turn on full-height blocks too.
This will be great for background images on the Cover and Group blocks.
You’ll find the new option in the block toolbar.
Just click it to go full height.
And the image will be fully responsive and adjust itself to the screen size of the device on which the site is being viewed.
Block Transform to Variation Feature
There are several blocks in WP 5.7 that have the new Transform to Variation feature applied to them, which allows more layout or style choices.
For example, now you can choose to align buttons vertically with the Transform to Variation feature in the Buttons Block properties.
You’ll now see a drop-down and you can select Transform to variation that has selections for Horizontal and Vertical layouts.
We will expect to see more Transform to variation choices coming to other blocks in the future.
Buttons Width Feature
Now you also have more control over the size of your buttons too.
In 5.7 you’ll be able to set a percentage for the width that will auto vary based on screen size so that they layout will hold on both desktop and mobile.
Native Social Icons Block Improvements
While many site owners still use plugins for social follow buttons, Gutenberg does have a native Social Icons block.
In WP 5.7, as part of the new Block Variations feature, you’ll now be able to control the overall size of the individual buttons from sizes:
I can’t see that this is working as expected though, so maybe they will be tweaking on it a bit more.
And when you link one of those buttons to the social platform, they will show the platform’s icon when you view it in the block inspector preview now too.
Plus, you can apply your theme’s color palette to your social icons too.
More Blocks Have Font Sizes
While font size choices have been included for the paragraph, header, and other text blocks for some time, the poor little Lists block had no such feature.
But, font size choices have now been added to both the Lists block as well as the code blocks for more consistent formatting through your content.
Drag and Drop Blocks
While it’s super fast to add blocks via keyboard shortcut keys, some site owners who have switched to Gutenberg from other builders are used to a drag and drop interface.
In WP 5.7 you will now be able to drag and drop blocks from the Add New Block drop-down into your content area.
This new drag and drop feature works for Patterns as well.
Reusable Blocks Get Attention
I believe that Reusable Blocks are one of the most powerful features of Gutenberg.
But, they have been a bit unstable.
WP 5.7 introduces more enhancements for them, like saving a new Reusable Block when the post or page it was created in is saved.
And, Reusable Blocks are more stable when editing in a post or page in which they were inserted.
Become a Gutenberg Ninja
You’ll be a Gutenberg Ninja in no time with my fun and fast course that teaches all about the block editor, including how to make any type of page layout you want.
New Features in WP 5.7
Let’s have a look at other new features and options in WP 5.7.
New Robots API for Indexing Control
The robots meta tag can include directives for how search engines should regard certain aspects of the page, or the entire page itself.
WP 5.7 will include a new Robots API with a new wp_robots() function which outputs a robots meta tag in the head area of the site. And it can be filtered with a new wp_robots hook.
And they are deprecating older ways of controlling bots.
So, all plugins that add directives for search engines are encouraged to switch over to the Robots API way of doing things.
Those plugins may include:
- SEO plugins
- Nofollow link creation
- Coming soon and/or maintenance mode
- Image preview size controls
Check with your plugin developer if you have any questions about their compatibility with the new Robots API.
And FYI, Yoast SEO already supports this feature, but you’ll want to ensure you’re on at least Yoast 15.9.1 before you update to WordPress 5.7.
Accessibility Improvements in WP 5.7
WordPress continues to strive for better accessibility compliance.
Let’s jump to the WP 5.7 welcome page.
Simplified Admin Color Palette
The color choices on the backside of WordPress, which you see on the admin pages when you login, have been significantly reduced from a color scheme including 199 colors to only 99 that are derived from a handful of basic colors.
Let’s scroll down so you can see the new palette.
The color schemes also now have much higher contrast between light and dark colors, and that should make seeing highlights and such much easier for those who are color blind too.
Let’s scroll up and move this slider so you can see the changes.
They are super sutlbe with this default color setting.
I can see a bit of change on the blue button.
And then a bit of change on the pending comment, but that’s about all.
This color palette change is the first step in a bigger project to change the CSS, or styling of the admin area to meet accessibility standards.
I hope you’ve enjoyed this tour of What’s New in WP 5.7.
Be sure to subscribe to BlogAid News so you’ll get update instructions for WP 5.7.