WordPress 5.7 — Road to Full Site Editing

Let’s get excited! The first new WordPress release of 2021 is here. WordPress 5.7 named “Esperanza” after Esperanza Spalding, a modern musical prodigy. This new WordPress version comes with fresh colors while also bringing you closer to the Big Picture. The editor now helps you in places where you couldn’t work before without code knowledge or hiring a developer. Everything you use the most is right where needed, and things are even simpler than before.

Back in December 2020, we got a lot of new features and improvements with WordPress 5.6. The tradition continues with WordPress 5.7. As usual, there are several versions of the Block Editor merged into Core. The new release improves the editing experience, enabling developers to build even more advanced blocks and add even more powerful customizations to the editor. 

WordPress 5.7 comes with lots of changes and great features, such as lazy-loading iframes, login and registration interface updates, reset password links, a large number of bug fixes, and more. Yes, we are all waiting for WordPress 5.8 and Full Site Editing, but version 5.7 also brings a lot to the table. So, shall we get to it?

Run a Backup of Your Site

As always, before running a major update of the WordPress core, it’s best that you run a backup of your website. Your backup should include:

• WordPress database;
• WordPress files;
• Media library;
• Themes;
• Plugins.

With FastComet, you get free daily backups. You can also opt to use a WordPress backup plugin such as BackupBuddy. The plugin can handle both complete backups of your WordPress site and automatic backups.

The Block Editor

WordPress 5.7 brings a total of 7 versions of the Gutenberg plugin into Core (from 9.3 to 9.9). Additionally, there are some bug fixes and performance improvements from Gutenberg 10.0 and 10.1. With all that, let’s start with the highlights we picked for you.

Block Variation Transformations

WordPress 5.7 introduces some enhancements, features, and new APIs for block variations. All this offers a better UI and more powerful developer tools. Initially introduced with Gutenberg 9.4, a Transform to the variation switcher is now added to WordPress 5.7. It appears below the block card for all blocks that support the feature.

Additionally, developers can add the variation switcher to the block inspector when registering a new block variation.

Block Information Matches Its Variation

The Block Editor UI now displays more specific information about block variations. Previously, it showed generic information.

Embed blocks and Social Icons are both built as block variations and are good examples of WordPress matching block information with their variations.

Those changes affect the block navigation bar, the block inspector, and the breadcrumbs. Additionally, this UI enhancement applies to the block switcher.

New Block Variations APIs

With Gutenberg 9.7 comes new APIs that developers can use on block variation registration to show the correct information of a block variation.

There is a new isActive property which is a function that accepts a block’s attributes. The variation’s attributes can be used to determine if a variation is active or not. Developers can use the function to display variation information instead of block information. 

For more on the new block variations APIs that come with WordPress 5.7, please visit the official source.

Button Dimensions

Coming with Gutenberg 9.4, there is a new control now available in the Settings Sidebar. It allows you to set a percentage width for buttons in Buttons blocks:

All you have to do is select a button and choose its size (25%, 50%, 75%, or 100%).

Vertical Layout

The Vertical Layout is a new feature that adds variations for vertical orientation to the buttons block. You can now switch from a horizontal layout to a vertical one using the Transformations switcher, which is placed in the block settings panel. This new feature comes from Gutenberg 9.6.

Social Icons Size and Custom Colors

When working on a Social Icons block, the block toolbar will now offer you a Size option menu with available sizes – Small, Normal, Large, Huge (Gutenberg 9.4).

More to the Social Icons block — it now supports color settings, which allows you to set different colors for both icons and backgrounds. This new perk comes with Gutenberg 9.9.

That is a nifty feature, mainly because now you will be able to use your theme’s color palette for your Social Icons, making them look more like a part of your website rather than contrasting with their default colors.

Cover Block Full Height Alignment

Another new feature that comes with WordPress 5.7 is the Full Height Toolbar Alignment component, initially added with Gutenberg 9.5. The feature is now merged into Core, serving the Cover block.

The Full Height Alignment can be used in combination with other control settings such as fixed background, content position, etc. There are quite a few impressive effects that you can create on your pages.

Additional Block Editor Improvements

There are many more WordPress 5.7 additions to the Block Editor, and we can’t list them all with details, but here are some honorable mentions:

• Block transforms previews;
• Semi-transparent Spacer Block;
• Font Size Support in List and Code Blocks;
• Drag & Drop Blocks and Patterns from the Inserter;
• Patreon, Telegram, and TikTok icons added to Social Icons;
• Improved Block Pattern Preview in the Block Inserter;
• Improved Options modal (name changed to Preferences);
• Import/Export feature enhancements;
• Inner Blocks API Changes;

Lazy Loading iframes

Lazy loading is an optimization technique that defers loading resources that are non-critical until they are in the user’s viewpoint. Lazy-loading images and embedded resources are only downloaded and rendered when they are needed. That serves to improve site performance significantly, especially for sites that support high-resolution images and/or videos. 

For thorough information about Lazy Loading iframes in WordPress 5.7, refer to the official source.

One-Click Site Migration from HTTP to HTTPS

With its new version 5.7, WordPress now detects if a website’s environment supports HTTPS. If that’s the case, the HTTPS Status section in the Site Health tool (WordPress 5.2) offers a call-to-action button that allows you as a site admin to switch your website from HTTP to HTTPS with just a click. Conveniently, the site content is migrated on the go, without any danger of running into mixed content warnings.

Login and Registration Interface Updated

WordPress 5.7 also comes with some improvements to the login and registration feature. There are new hooks, an improved Reset Password Interface, and more minor changes.

When you are on the Reset Password screen, you will now see two buttons: Generate Password and Save Password.

The first button generates a strong password, and the second button saves it for you. The purpose of this change is to provide an improved password reset experience for new WordPress users.

For information about additional changes, check the Login & registration screens changes in WordPress 5.7 dev note.

New Robots API

As a site owner, the Robots meta tag allows you to control how a web page is indexed and served to users in search engine results.

WordPress 5.7 introduces a new Robots API allowing developers to control this robots meta tag. The new API provides a wp_robots filter for theme developers to add their custom directives to the robots meta tag.

Additionally, the max-image-preview:large directive is now added by default to websites configured to be visible by search engines. It instructs search engines to display large image previews in search results.

Developers can remove the max-image-preview:large directive using the following code:

remove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );

Customizing the robots directives is a straightforward procedure. The following example from the dev note shows how to add a custom directive to the meta tag:

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

The code above produces the following output:

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

It’s also possible to remove existing directives by unsetting values. You can disable the max-image-preview directive with the following code:

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

See the dev note for additional information about the new WordPress Robots API and deprecated functions.

Additions for Developers

New Functions to Pass Attributes to Script Tags

There are now several new functions that permit the passing of attributes to <script> tags:

• wp_get_script_tag() – used to load a formatted script tag. It also automatically injects the type attribute in case the theme has not declared support for HTML5 script tags. The function pairs with the new wp_script_attributes filter, which is used to filter attributes.
• wp_print_script_tag() – a formatted script tag.
• wp_get_inline_script_tag() – wraps inline JavaScript in a script tag. This function has a corresponding wp_inline_script_attributes hook that filters attributes to be added to a script tag.
• wp_print_inline_script_tag() – prints inline JavaScript in a script tag.
• wp_sanitize_script_attributes() – used to sanitize an array of attributes into an attribute string. Those can then be added to a script tag.

Check the dev note for additional information and examples.

Standardized WP-Admin Colors

WordPress now uses a new WP-Admin color palette. This is a part of a larger project aiming to clean up WP-Admin CSS. That new color palette includes 12 shades of red, green, blue, and yellow. Additionally, there are 13 shades of gray, black, and white. Furthermore, it meets the minimum WCAG 2.0 recommended contrast ratio requirements.

Making this set of colors a standard is to help contributors make consistent and accessible design decisions.

WP_MEMORY_LIMIT Constant in Site Health

The WP_MEMORY_LIMIT constant specifies the maximum amount of memory that PHP can consume.

The WP_MEMORY_LIMIT constant has now been added to the Info tab in Site Health.

Additional changes for developers are listed in Miscellaneous developer-focused changes and REST API Changes in WordPress 5.7. You can find a full list of dev notes in the WordPress 5.7 Field Guide.

How to Update to WordPress 5.7

When upgrading your WordPress core, it’s best that you utilize the one-click staging environment. Using it will let you freely and safely clone your WordPress site and test WordPress 5.7.

Updating to WordPress 5.7 is as easy as any other core update. All you have to do is click on the Updates icon in your admin dashboard and then click on Update Now. While the CMS is updating, your website will go into maintenance mode. After the update is done, your site will go back to normal.

Conclusion

As the first major update we see in 2021, WordPress 5.7 adds a ton of new features and improvements for both users and developers. We are sure that there are many more to expect this year. We are excited to see Full Site Editing with WordPress 5.8 in June, but we are also sure there will be many more new and exciting features and improvements. WordPress simply never fails to deliver.

Feel free to share your thoughts about WordPress 5.7 with us in the comment section. Let us know what you like the most or perhaps what you think could be even better. We will be happy to see some opinions.