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<\/a>, but version 5.7 also brings a lot to the table. So, shall we get to it?<\/p>\n\n\n\n As always, before running a major update of the WordPress core, it\u2019s best that you run a backup of your website. Your backup should include:<\/p>\n\n\n\n With FastComet, you get free daily backups. You can also opt to use a WordPress backup plugin such as BackupBuddy<\/a>. The plugin can handle both complete backups of your WordPress site and automatic backups.<\/p>\n\n\n\n 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\u2019s start with the highlights we picked for you.<\/p>\n\n\n\n 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>, 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.<\/p>\n\n\n\n Additionally, developers can add the variation switcher to the block inspector when registering a new block variation.<\/p>\n\n\n\n The Block Editor UI now displays more specific information about block variations. Previously, it showed generic information.<\/p>\n\n\n\n Embed blocks and Social Icons are both built as block variations and are good examples of WordPress matching block information with their variations.<\/p>\n\n\n\n Those changes affect the block navigation bar, the block inspector, and the breadcrumbs. Additionally, this UI enhancement applies to the block switcher.<\/p>\n\n\n\n With Gutenberg 9.7<\/a> comes new APIs that developers can use on block variation registration to show the correct information of a block variation.<\/p>\n\n\n\n There is a new isActive property which is a function that accepts a block\u2019s attributes. The variation\u2019s 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. <\/p>\n\n\n\n For more on the new block variations APIs that come with WordPress 5.7, please visit the official source<\/a>.<\/p>\n\n\n\n Coming with Gutenberg 9.4<\/a>, there is a new control now available in the Settings Sidebar. It allows you to set a percentage width for buttons in Buttons blocks:<\/p>\n\n\n\n All you have to do is select a button and choose its size (25%, 50%, 75%, or 100%).<\/p>\n\n\n\n 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<\/a>.<\/p>\n\n\n\n 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<\/a>).<\/p>\n\n\n\n More to the Social Icons block \u2014 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<\/a>.<\/p>\n\n\n\n That is a nifty feature, mainly because now you will be able to use your theme\u2019s color palette for your Social Icons, making them look more like a part of your website rather than contrasting with their default colors.<\/p>\n\n\n\n Another new feature that comes with WordPress 5.7 is the Full Height Toolbar Alignment component, initially added with Gutenberg 9.5<\/a>. The feature is now merged into Core, serving the Cover block.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n There are many more WordPress 5.7 additions to the Block Editor, and we can\u2019t list them all with details, but here are some honorable mentions:<\/p>\n\n\n\n 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. <\/p>\n\n\n\n For thorough information about Lazy Loading iframes in WordPress 5.7, refer to the official source<\/a>.<\/p>\n\n\n\n With its new version 5.7, WordPress now detects if a website\u2019s environment supports HTTPS. If that\u2019s the case, the HTTPS Status section in the Site Health tool (WordPress 5.2<\/a>) 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n When you are on the Reset Password screen, you will now see two buttons: Generate Password and Save Password.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n For information about additional changes, check the Login & registration screens changes in WordPress 5.7<\/a> dev note.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n WordPress 5.7 introduces a new Robots API<\/a> allowing developers to control this robots meta tag. The new API provides a Additionally, the Developers can remove the Customizing the The code above produces the following output:<\/p>\n\n\n\n It\u2019s also possible to remove existing directives by unsetting values. You can disable the See the dev note<\/a> for additional information about the new WordPress Robots API and deprecated functions.<\/p>\n\n\n\n There are now several new functions that permit the passing of attributes to Check the dev note<\/a> for additional information and examples.<\/p>\n\n\n\n WordPress now uses a new WP-Admin color palette<\/a>. 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<\/a> requirements.<\/p>\n\n\n\n Making this set of colors a standard is to help contributors make consistent and accessible design decisions.<\/p>\n\n\n\n The The Additional changes for developers are listed in Miscellaneous developer-focused changes<\/a> and REST API Changes in WordPress 5.7<\/a>. You can find a full list of dev notes in the WordPress 5.7 Field Guide<\/a>.<\/p>\n\n\n\nRun a Backup of Your Site<\/h2>\n\n\n\n
The Block Editor<\/h2>\n\n\n\n
Block Variation Transformations<\/h3>\n\n\n\n
![\"Block](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/variations-in-wordpress-block-editor.png\")
<\/figure>\n\n\n\nBlock Information Matches Its Variation<\/h3>\n\n\n\n
![\"Block](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/wordpress-label-for-wordpress-in-link-blocks.png\")
<\/figure>\n\n\n\nNew Block Variations APIs<\/h3>\n\n\n\n
Button Dimensions<\/h3>\n\n\n\n
![\"Button](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/button-block-width-settings-1.png\")
<\/figure>\n\n\n\nVertical Layout<\/h3>\n\n\n\n
![\"Vertical](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/vertical-variation-button-block.png\")
<\/figure>\n\n\n\nSocial Icons Size and Custom Colors<\/h3>\n\n\n\n
![\"Social](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/social-icons-size-1.png\"){kind=icon}
<\/figure>\n\n\n\nCover Block Full Height Alignment<\/h3>\n\n\n\n
![\"Cover](\"https:\/\/www.fastcomet.com\/blog\/wp-content\/uploads\/2021\/03\/full-height-available-for-the-cover-block.png\")
<\/figure>\n\n\n\nAdditional Block Editor Improvements<\/h3>\n\n\n\n
Lazy Loading iframes<\/h2>\n\n\n\n
One-Click Site Migration from HTTP to HTTPS<\/h2>\n\n\n\n
Login and Registration Interface Updated<\/h2>\n\n\n\n
New Robots API<\/h2>\n\n\n\n
wp_robots<\/code> filter for theme developers to add their custom directives to the robots meta tag.<\/p>\n\n\n\nmax-image-preview:large<\/code> 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.<\/p>\n\n\n\nmax-image-preview:large<\/code> directive using the following code:<\/p>\n\n\n\nremove_filter( 'wp_robots', 'wp_robots_max_image_preview_large' );<\/pre>\n\n\n\n
robots<\/code> directives is a straightforward procedure. The following example from the dev note shows how to add a custom directive to the meta tag:<\/p>\n\n\n\nadd_filter(
'wp_robots',
function( $robots ) {
$robots['follow'] = true;
return $robots;
}
);<\/pre>\n\n\n\n<meta name=\"robots\" content=\"max-image-preview:large, follow\"><\/pre>\n\n\n\n
max-image-preview<\/code> directive with the following code:<\/p>\n\n\n\nfunction my_wp_robots_directives( $robots ) {
unset( $robots['max-image-preview'] );
$robots['follow'] = true;
return $robots;
}
add_filter( 'wp_robots', 'my_wp_robots_directives' );<\/pre>\n\n\n\nAdditions for Developers<\/h2>\n\n\n\n
New Functions to Pass Attributes to Script Tags<\/h3>\n\n\n\n
<script><\/code> tags:<\/p>\n\n\n\nwp_get_script_tag()<\/code> – used to load a formatted script tag. It also automatically injects the type<\/code> attribute in case the theme has not declared support for HTML5 script tags. The function pairs with the new wp_script_attributes<\/code> filter, which is used to filter attributes.<\/li>wp_print_script_tag()<\/code> – a formatted script tag.<\/li>wp_get_inline_script_tag()<\/code> – wraps inline JavaScript in a script tag. This function has a corresponding wp_inline_script_attributes<\/code> hook that filters attributes to be added to a script tag.<\/li>wp_print_inline_script_tag()<\/code> – prints inline JavaScript in a script tag.<\/li>wp_sanitize_script_attributes()<\/code> – used to sanitize an array of attributes into an attribute string. Those can then be added to a script tag.<\/li><\/ul>\n\n\n\nStandardized WP-Admin Colors<\/h3>\n\n\n\n
WP_MEMORY_LIMIT Constant in Site Health<\/h3>\n\n\n\n
WP_MEMORY_LIMIT<\/code> constant specifies the maximum amount of memory that PHP can consume.<\/p>\n\n\n\nWP_MEMORY_LIMIT<\/code> constant has now been added<\/a> to the Info tab in Site Health.<\/p>\n\n\n\nHow to Update to WordPress 5.7<\/h2>\n\n\n\n