- Apr 27, 2021
0- by A2 CMS Team
A major version release of WordPress always means exciting new features, performance improvements, and bug fixes. However, upgrading isn’t always a smooth ride – and the path to WordPress 5.7 may be bumpier than most.
Fortunately, by taking some simple precautions, you can make the transition to WordPress “Esperanza” as hassle-free as possible. Once you complete your upgrade, you can explore all the latest features and improvements bundled with WordPress 5.7.
In this article, we’ll examine why this new version is causing issues for some website owners and the steps you can take to upgrade safely. Then we’ll explore the new Block Editor features, performance enhancements, and everything else noteworthy in WordPress 5.7. Let’s get started!
An Introduction to WordPress 5.7 (And Why It’s Causing Problems for Some Websites)
With WordPress 5.6 closing out 2020, WordPress 5.7 Esperanza is the first release of 2021. Named in honor of musical prodigy Esperanza Spalding, this release brings exciting new functionality to the Block Editor, plus a range of performance and usability improvements.
However, WordPress 5.7 also introduces a change that could impact thousands of themes and plugins. Over the years, WordPress has fallen behind on its jQuery updates.
Prior to version 5.5, WordPress bundled version 1.12.4 of this popular JavaScript library. To put this into perspective, jQuery 1.12.4 was released in 2016 and supported Internet Explorer (IE) 6, 7, and 8. In this release, WordPress finally makes the leap from jQuery 1.12.4 to jQuery 3.5.
To give users a chance to prepare, this jQuery migration began back with WordPress 5.5. Since then, the WordPress team has actively engaged with the community, including requesting feedback regarding their approach to updating jQuery. They have also published jQuery upgrade guide resources, and publicized the upcoming change extensively on the Make WordPress Core blog.
However, WordPress estimated that this change could impact around 2,400 WordPress plugins and 250 themes. That’s a huge number! When you also consider that WordPress now powers 40 percent of the web, it’s almost inevitable that some website owners will experience issues while upgrading to version 5.7.
If you update your WordPress installation, there’s a chance that some of your plugins or even your theme might stop working as expected. This may create issues with how your site displays or functions. Fortunately, there are steps you can take to protect your site against these jQuery conflicts.
Before you take steps to update your site safely, it may help to know what changes to expect. In the next section, we’ll discuss the features introduced with WordPress 5.7.
8 New Features of the WordPress 5.7 Esperanza Update
Upgrading WordPress can be a daunting process, but it’s also your chance to experience the latest functionality offered by the Content Management System (CMS). Below are eight of our favorite WordPress 5.7 features.
1. One-Click Switch From HTTP to HTTPS
HyperText Transfer Protocol Secure (HTTPS) is a protocol that encrypts the data sent between your server and a visitor’s browser. Switching to HTTPS can help keep your users safe, particularly if you collect sensitive information, such as customers’ payment details.
There’s also evidence to suggest that HTTPS may improve your Search Engine Optimization (SEO). After analyzing one million Google search results, Backlinko concluded that switching to HTTPS positively impacts search engine rankings.
Migrating your site from HTTP to HTTPS hasn’t always been straightforward. In WordPress, you would typically start by navigating to Settings > General, and then updating your WordPress Address (URL) and Site Address (URL):
However, content with embedded HTTP URLs would sometimes remain unchanged in the database, leading to mixed content warnings. Previously, updating these references required you to perform a search and replace using a plugin such as the WP-CLI command line tool or the Better Search Replace plugin.
In WordPress 5.7, you can switch your site from HTTP to HTTPS with a single click. When you make the switch, WordPress will update all of its database URLs automatically. This means you’ll no longer have to manually fix all these hard-coded URLs.
You can determine whether your site is currently using HTTPS using the Site Health Check tool. Introduced in the WordPress 5.1 release, this feature scans for common security and performance issues that may be impacting your site:
To perform a Site Health Check, navigate to Tools > Site Health. Health Check will then automatically run a security and performance analysis and verify whether you need to migrate to HTTPS:
If this is the case, Site Health Check will display a button that enables you to make this change with a single click. Once you click on it, WordPress prompts you to log back into your admin account, and then displays a notification letting you know that the switch is complete.
2. iFrames Are Lazy-Loaded by Default
Lazy loading is an optimization technique where images and embedded resources aren’t downloaded and rendered until they’re in the visitor’s viewport. This can significantly reduce page load times, particularly if your site features lots of high-resolution media.
Previously, you could lazy load images and iframes by adding the loading="lazy" attribute to the corresponding img and iframe tags. WordPress recently changed this default behavior. In 5.5 and higher, the loading="lazy" tag is automatically added to img tags when the width and height attributes are specified.
Now, WordPress 5.7 is extending automatic lazy loading to iframe tags. By default, WordPress will add an loading="lazy" attribute to the following iframes:
- Those within post content (
the_content) - iFrames within post excerpts (
the_excerpt) - Those within text widgets (
widget_text_content)
This means that iframes will receive the same performance benefits that WordPress 5.5 introduced by lazy loading images. To avoid any perceived negative impact on layout shifting, WordPress will only add a loading="lazy" attribute to iframe tags that have both the width and height attributes specified.
It’s also worth noting that many iframes come from WordPress’ oEmbed integration. Here, the integration automatically transforms the resource’s URL into the referenced embedded media when pasted into the editor. The respective web service defines the markup of these iframe tags.
In this scenario, WordPress can only add the loading="lazy" attribute if the web service has followed the best practices of providing a width and height attribute. Therefore, there’s no guarantee that your oEmbed resources will be lazy-loaded by default.
3. Easier Password Reset Links in WordPress 5.7
If a user forgets their WordPress password, they may struggle to perform their work. This can result in missed deadlines and a drop in productivity.
Misplaced login credentials can be particularly disastrous if there’s a significant delay between the user realizing they cannot access their account and you (or your admin) issuing them with a new password. To help streamline this process, admins can now manually send a password reset link to existing users via email. This gives users the freedom to reset their passwords manually, which is also far safer than an admin directly changing their login credentials.
To send a reset email as an admin, you can simply navigate to Users > All Users. Next, hover over the name of the person who requires a new password and select Send password reset when it appears:
Alternatively, you can open the person’s profile for editing, and then scroll to Account Management and click on Send Reset Link. Sometimes, you may need to issue multiple password reset emails.
For example, you might require all users to reset their passwords once every six months for added security. You can distribute the emails as part of a bulk action:
WordPress 5.7 also makes some changes to the password reset screen. Previously, it only displayed a Reset Password button.
For some users, this was confusing as they assumed the automatically-generated password was their new password and not merely a suggestion. To remove this point of confusion, WordPress changed the screen to feature two separate buttons: Generate Password and Save Password.
4. A Streamlined Color Palette
WordPress 5.7 introduces a new color palette that aims to simplify the colors included in the CMS source code. The new palette collapses the options down to seven core colors, and a range of 56 shades that meet WCAG 2.0 AA’s recommended contrast ratio:
Half of the range has a 4.5 or higher contrast ratio against white, and the other half maintains the same contrast ratio against black. The colors are perceptually uniform from light to dark in each range, meaning that each core color starts at white and gets darker by the same amount with each step.
By standardizing the color palette, WordPress 5.7 hopes to help theme and plugin developers make more coherent design decisions. In particular, this should ensure greater consistency between third-party products and the WordPress User Interface (UI).
5. A New Robots Application Programming Interface (API)
WordPress 5.7 introduces a filter-based Robots Application Programming Interface (API). This API gives you greater control over the robots meta tag, including how individual pages are indexed and served to users in search engine results.
By default, the Robots API includes the max-image-preview: large directive, which enables search engines to display larger image previews. This can positively impact your SEO and boost your traffic by helping your content stand out in search results. In WordPress 5.7, the following robots meta tag is automatically added to wp_head for sites that wish to be indexed by search engines:
<meta name="robots" content="max-image-preview:large" />
WordPress 5.7 only omits this directive if you specifically ask for it to discourage search engines from indexing your content. If required, you can make this request by navigating to Settings > Reading:
After you select the Discourage search engines from indexing this site option, remember to click on Save Changes . If you want to explore this API in more detail, the WordPress team published a guide to customizing the robots meta tag using an array of key-value pairs.
6. A New Dynamic Hook
In WordPress, the render_block() function is responsible for rendering each block into an HTML string. Some themes and plugins use filters to modify how this happens. For example, render_block_context filters the default context that’s provided to a rendered block.
These filters give developers control over how their blocks render. However, before they can perform any modifications, the hooked functions need to verify that the block is of a compatible type – for example, whether it’s a button block.
WordPress 5.7 introduces a new dynamic filter: render_block_{$this->name}. Here, “{$this->name}” represents the block’s name or slug as it was registered. This ensures that the function can only hook to blocks of a compatible type.
For example, a paragraph block registered with the name of “example/paragraph” can be filtered using render_block_example/paragraph. This should reduce the amount of code you need to write to target the rendering of specific block types.
7. Updates to the WordPress 5.7 Block Editor
WordPress 5.7 merges many versions of the standalone Gutenberg editor plugin into WordPress core. This includes a wide range of tweaks and fixes that aim to improve the overall Block Editor experience.
First, in WordPress 5.7 reusable blocks save automatically along with the post itself. This means you won’t lose all your hard work because you forgot to save a block separately.
You can also drag blocks and block patterns from the inserter and drop them anywhere on your canvas. However, be aware that this drag-and-drop feature only works if your theme supports block patterns:
You can also access font-size controls inside the List and Code blocks. Simply select the block in question to open the inspector:
Then you can select an option from the Typography: Font Size drop-down menu. If you’re using a code block, this new feature makes it possible to use global style variables in the CSS of your code blocks.
To help you find the perfect block, icons and descriptions display in the inspector. To view this information, you can click to select any block within your page canvas:
You can also change the size of the icons in the Social Icons block. To make this adjustment, click on the Size button and choose from Small, Normal, Large, or Huge:
You might also want to apply a custom color to the social icons, which can help you style icons, such as Facebook and Twitter, to complement your WordPress site better. Alternatively, you could draw attention to these important buttons by choosing a color that stands out from the rest of your website.
8. Improved Support for Block Variations
Introduced in WordPress 5.4, block variations are a way to select different instances of the same block. For example, if you add a Column block to your page, it presents you with several configurations. In this scenario, each column layout is a different block variation.
In WordPress 5.7, you can quickly and easily switch between block variations using a Transform to variation drop-down menu. This menu appears in the inspector whenever you select a block that supports variations:
In addition to this change, the Buttons block now supports vertical alignments and horizontal variations. While we’re taking a look at the Buttons block, it’s also worth noting that you can set the width of the buttons to a preset percentage:
The available percentages are 25, 50, 75, and 100 percent. However, this refers to the percentage of the buttons inside the parent container, and not the entire page width.
How to Safely Upgrade to WordPress 5.7
If you’re concerned about upgrading to WordPress 5.7, we recommend creating a full backup of your website before proceeding. You can then restore this backup if you encounter any issues.
You can back up your website using a range of third-party software. This includes the BackupBuddy solution or the UpdraftPlus plugin:
If you’re an A2 Hosting customer, we provide a choice of built-in backup tools. You can access our dedicated Backup Wizard and Server Rewind solutions by logging into your cPanel account or you can get step by step instructions from our Guru Crew!
To download a copy of your site using the Backup Wizard, simply click on Backup. If you encounter any issues following the upgrade, return to the Backup Wizard and select Restore. You can then choose the backup you created:
Alternatively, you can restore an earlier version of your site using Server Rewind. As the name suggests, this tool rolls back your server to a former state, as specified by you:
To start, select a date from the drop-down menu and click on Restore. You’ll then need to select the Restore Databases tab and repeat this process.
You can also determine whether your site might encounter any issues following the upgrade using the Test jQuery Updates plugin. This tool mimics what will happen when you update from WordPress 5.6 to WordPress 5.7. To protect your live site, we recommend using a staging version of your website for the jQuery test.
If you’re hesitant about upgrading to WordPress 5.7, it may be worth considering a managed hosting solution. As part of our managed WordPress hosting packages, we’ll perform all essential maintenance tasks for you. This includes ensuring that you’re running the latest and greatest version of WordPress without issues.
Conclusion
Updating WordPress may seem daunting, particularly when Esperanza has the potential to cause issues with so many themes and plugins. However, WordPress 5.7 features some important block editor updates and performance improvements.
Installing the latest update is also important for keeping your site safe, so it’s vital that you upgrade as soon as possible. To ensure a stress-free update, we recommend creating a complete backup before installing WordPress 5.7. You can also test to see how your site will function following the jQuery change using the Test jQuery Updates plugin.
For many website owners, switching to the latest version of WordPress is a source of stress. If you’re in the bad habit of delaying your updates, you may benefit from managed hosting. As part of our managed WordPress hosting, we handle these upgrades for you, so you can be confident that you’re always running the latest software. Check out our plans today to learn more!
Related Resources
- Enabling Automatic Updates for WordPress Plug Ins
- How to Clear the Cache in WordPress
- PHP 8 and WordPress Compatibility: Everything You Need to Know
- How to Use Mailchimp with WordPress
Image credit: Pexels.
