Everything You Must Know About WordPress 5.5
From a trumpeter to a singer: WordPress Adderley has been updated to WordPress Eckstine. Named after the famous American jazz singer Eckstine, the new WordPress 5.5 update takes us to the swing era by making WordPress as smooth as Eckstine’s voice.
What’s new in WordPress 5.5 ?
Now back to the more technical questions. WordPress 5.5 “Eckstine” was released on August 11th, 2020, so it’s already available to the public. This new version brings a bunch of block editor improvements such as integrated block directory, UI changes in the block editor, edit images inside the block editor, introduction of block patterns and the ability to add your own plugins to the Block Directory.
We’ll go through all of them one by one.
The Block Editor Improvements
Integrated Block Directory
With this new WordPress 5.5 version if you decide to add a block which is not available on your site, you can easily find the best option from the automatically generated suggestions of the block directory.
The block directory is a list of WordPress plugins which you can use to add different block types to your page. So, as the block directory is integrated in the block editor, you get the chance to easily install the block types you want without even leaving your editor.
UI Changes in Block Editor
Equally important is the visual appearance of the editor. In WordPress 5.5, you’ll get a fresher look of the editor which will make the editing process way more intuitive and easy. WordPress 5.5 has improved the borders and highlighting of the block editor and it has become more user-friendly overall.
Plus, a small bonus, now the “Add new block” button (+) actually looks like a button and is more eye-catching than it used to be. Its black background really makes it pop.
Edit Images Inside Block Editor
WordPress 5.5 “Eckstine” has also made photo editing significantly easier. Now you can adjust the height, width, and aspect ratio of your photos right from your editor. You can also play with the zoom level and the position of the photo, so if you’re a photography geek, this feature will surely help you out.
Here are the two main changes introduced to the image editing process:
You can edit your images through the REST API (RESTful Application Program Interface). This new feature is in WP_REST_Attachments_Controller and introduces the new wp_edited_image_metadata filter. But don’t worry, when image sub-sizes are created and saved, other triggered actions and filters still work.
Once you’re done editing, you’ll get the image saved as a new attachment separately, in order to give the user full control. If you want to find the edited version, it will be saved in the Media Library. You can do edits to the original or edited version from there and then save or delete them if you’re not going to use them.
Also, if you want to make new attachments for your edited images remember to copy post_title, post_content (the image description), post_excerpt (caption of the image stored in the database) and the alternative text (which is stored in the post meta in the database) from the parent image and paste into the edited one.
If you’re using plugins, you can use the new wp_edited_image_metadata filter to migrate any other type of metadata you want.
Preview Options in The New Editor
For block developers who want to have responsive styles for their blocks in the editor, the #start-resizable-editor-section and #end-resizable-editor-section markers can be used for defining responsive styles. Between these markers the styles are picked up by the editor and rendered correctly when resized. Here’s an example of what your styles will look like:
#start-resizable-editor-section {
display: none;
}
/* add all responsive styles here */
#end-resizable-editor-section {
display: none;
}
However, the theme editor styles cannot be manipulated yet because they are loaded inline in a tag instead of a separate stylesheet.
Introducing block patterns
As we mentioned, there have been major improvements to the WordPress’s block editor and this was made possible by the contribution of 805 volunteers, 38% of which were completely new. So thanks to that hard work, we get more improvements to the block editor for WordPress 5.5, including block patterns, one of the most important features for web developers.
To be precise, block patterns are block layouts that allow users to add nested blocks and similar complex structures to their blogs and pages. This is the perfect solution for content writers and site admins in general who habitually get stuck in front of the blank page. This gives them a chance to achieve a professional look for their webpage in no time.
So this new feature allows you to make even the most complex layouts you have in mind a reality. You can create really fun and beautiful designs combining media and text and getting the perfect look which will tell your story in the best way.
Here’s how the lead architect of Gutenberg project Mathias Ventura explains it all:
“One clarification — the “block patterns” setup is less about template parts (which are structurally meaningful) and more about general design elements made of smaller blocks. Once inserted they are not stored separately. For example, a “Cover” image that combines a few blocks to achieve a specific look that would otherwise take users some work to accomplish. Think of it more as a collection of designs that can be added anywhere without necessarily representing a reusable part of a theme template.”
Block patterns were first introduced in Gutenberg 7.7 as a sidebar plugin. In Gutenberg 8.0 they have been moved into the block inserter, but now appear as a left-side panel in the editor.
Block patterns are now available in different themes and plugins, and there will be more and more additions.
Add your own plugins to the Block Directory
Finally, one of the most exciting improvements in the block editor for WordPress 5.5 is the ability to add your own plugin to it. Here’s a step-by-step guide on doing so.
Step 1: Create your personal block plugin
To start with, if you haven’t created a block plugin yet, here’s a tutorial on how to do that. Although the guidelines for creating a block plugin are yet to be finalized, keep in mind that in general block plugins should be more minimal than the usual WordPress plugins to be able to be quickly and safely installed.
So, not only should you keep the general plugin guidelines, but also, in order to keep them аs lightweight as possible, you better stick to Javascript code and keep the PHP to the minimum by making full use of the REST API. Plus, don’t add any additional UIs which are outside the Block editor.
Step 2: Use the checker tool to run your plugin
To make web developers’ work easier WordPress has been working on a new tool called Block Plugin Checker. This new tool of WordPress 5.5 helps determine if your block plugin is compatible with the Block Directory. This is how it works: You enter the Github URL, SVN repository URL, or plugin slug, and the tool checks whether it can be included in the directory. If it cannot be included, it will identify the possible problems with it and show how you can solve them.
But remember that this is nevertheless a work in progress, so if you find any omissions or bugs, just let the team know. This will help them make the Block Plugin Checker even more useful.
Step 3: Directly add the block plugin to the Block Directory
Finally, once you’ve checked the plugin with the Block Plugin Checker you can easily add it to the block directory using the same tool. As simple as that! And if you decide to remove it, you can also do so with the same Checker.
That’s pretty much it. Also note, that there are new and modified:
REST API Endpoints in WordPress 5.5
The new WordPress Eckstine also introduces REST API endpoints with the help of which you can search for available blocks from the WordPress block directory. Besides that, plugins and themes can now install, activate, deactivate, and delete plugins using the REST API as well.
GET /wp/v2/block-directory/search?term=starscape is used to search for the blocks that match the term starscape. For this endpoint, you need both activate_plugins and install_plugins capabilities.
The following response format is an example for the Starscape block:
{
"name": "a8c/starscape",
"title": "Starscape Block",
"description": "Everything was made of collapsing stars, we are all made of star stuff. Now we also can create content in WordPress with stars in motion. Requirements As this is part...",
"id": "starscape",
"rating": 0,
"rating_count": 0,
"active_installs": 10,
"author_block_rating": 0,
"author_block_count": 1,
"author": "Automattic",
"icon": "https://ps.w.org/starscape/assets/icon.svg?rev=2232475",
"assets": [
"https://ps.w.org/starscape/tags/1.0.2/index.js?v=1591313160",
"https://ps.w.org/starscape/tags/1.0.2/editor.css?v=1591313160",
"https://ps.w.org/starscape/tags/1.0.2/style.css?v=1591313160"
],
"last_updated": "2020-06-04T23:26:00",
"humanized_updated": "1 month ago",
"_links": {
"wp:install-plugin": [
{
"href": "http://trunk.test/wp-json/wp/v2/plugins?slug=starscape"
}
]
}
The REST API endpoints have changed for the themes, too. Support for returning the theme’s header information from the public style.css file has been added to the /wp/v2/themes endpoint. Before that only the supported features of the theme were being returned. Now the response is different. Here’s an example from Twenty Twenty theme that produces the following response:
{
"stylesheet": "twentytwenty",
"template": "twentytwenty",
"requires_php": "5.2.4",
"requires_wp": "4.7",
"textdomain": "twentytwenty",
"version": "1.4",
"screenshot": "http://trunk.test/wp-content/themes/twentytwenty/screenshot.png",
"author": {
"raw": "the WordPress team",
"rendered": "<a href=\"https://wordpress.org/\">the WordPress team</a>"
},
"author_uri": {
"raw": "https://wordpress.org/",
"rendered": "https://wordpress.org/"
},
"description": {
"raw": "Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. ",
"rendered": "Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor."
},
"name": {
"raw": "Twenty Twenty",
"rendered": "Twenty Twenty"
},
"tags": {
"raw": [
"blog",
"one-column",
"custom-background",
"custom-colors",
"custom-logo",
"custom-menu"
],
"rendered": "blog, one-column, custom-background, custom-colors, custom-logo, custom-menu"
},
"theme_uri": {
"raw": "https://wordpress.org/themes/twentytwenty/",
"rendered": "https://wordpress.org/themes/twentytwenty/"
},
"theme_supports": {}
}
Now themes use add_theme_support() to declare support for the feature. Also the WordPress version has introduced the register_theme_feature API with which WordPress core and plugins can declare a list of available features which the themes can support.
This is used by REST API to expose the theme’s supported feature if it was registered with how_in_rest set to true.
You can learn about other modifications in the REST API endpoints on the official WordPress blog.
Auto Update Your WordPress Themes and Plugins
If you want to keep your site safe, you should always keep your software up-to-date, otherwise it will become one of the major reasons for security breaches. This is why WordPress proposed automatic updates back in WordPress 3.7. However, this feature was not commonly used as it required some basic WordPress development knowledge which many users did not have.
In WordPress 5.5, that issue is solved. Site admins can turn the theme and plugin auto updates on and off with just a click, making it super easy to keep WordPress updated and secure. You can find this function in the WordPress dashboard.
What does this mean for web developers?
In WordPress 5.5, WordPress developers can also customize and disable auto-updates for their customers.
If you’re a plugin or theme developer, you can now customize your HTML output for the auto-update links. You can use the plugin_auto_update_setting_html filter to customize the time lapse between the two attempts of update and toggle links.
You can also check whether auto-updated UI is enabled with the new WordPress function wp_is_auto_update_enabled_for_type(). The function accepts a single argument ($type) which first of all determines the type of the update you are checking for (‘theme’ or ‘plugin’) and then returns a true or false.
You can disable this new auto-update UI for themes and plugins with the new filters themes_auto_update_enabled and plugin_auto_update_enabled.
Image Lazy-Loading in WordPress Core
Developers can customize image lazy loading through various filters. The most foundational one of them is wp_lazy_loading_enabled. Don’t forget though that WordPress core adds the lazy loading feature only to the images which are in the post’s content. Anything outside of it will still need to be lazy loaded by a special plugin. If you would like to turn off lazy-loading by default for template images, you could use the following code snippet:
function disable_template_image_lazy_loading( $default, $tag_name, $context ) {
if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
return false;
}
return $default;
}
add_filter(
'wp_lazy_loading_enabled',
'disable_template_image_lazy_loading',
10,
3
);
Sitemaps
In this version of WordPress, there’s a new feature which adds basic and extensible XML sitemaps into your WordPress core. This allows web crawlers to approach your page faster and identify which URL on your website is for what easier.
How to add custom sitemaps?
With WordPress, you can get sitemaps for built-in content, such as pages and author archives. But if you’re developing a plugin and want to add customized features or even just include custom URLs, then you might want to try a custom sitemap provider.
So, just create a custom PHP class for extending abstract WP_Sitemaps_Provider WP_Sitemaps_Provider class in the core. Then use the wp_register_sitemap_provider() function to register it. To make it more clear, here’s an example.
add_filter(
'init',
function() {
$provider = new Awesome_Plugin_Sitemaps_Provider();
wp_register_sitemap_provider( 'awesome-plugin', $provider );
}
);
The provider is responsible for getting all the sitemap entries and sitemaps and determining the pagination.
Other updates for developers
Update a plugin or theme by uploading a ZIP file
Before WordPress 5.5 site admins could upload plugins or theme updates only via FTP/SFTP or a file manager. This was especially true for those who were using customized plugins or themes or extensions which were hosted on third-party marketplaces.
With WordPress 5.5, this is no longer the case. You can easily update your themes and plugins from your computer and your WordPress dashboard by using the .zip package.
New wp_get_environment_type() function
The new wp-get-environment-type() function introduced in WordPress 5.5 is here to detect the current environment of your website so that your plugin or theme can adapt to the functionalities of that environment.
The wp_get_envornment_type() will return production by default, but other values such as development and staging are also supported. In addition to that, developers can define some other additional environment types if they need it.
FAQs
How does WordPress 5.5 stop rogue plugins?
There’s a new feature in WordPress 5.5 that does not let the rogue plugins take over your WordPress website.With this new feature WordPress can check whether the plugin is legitimate or not and can block it in case it finds it suspicious.
This is how WordPress team explains the process:
“The new auto-update UI is great, but it would benefit from having a way to remotely disable the auto-update for a plugin/theme.
It’ll open the possibility for WordPress.org to control the rollout of an auto-update, for example, auto-updating everyone 1-24 hrs after release rather than immediately to allow for any major bugs to be discovered.
Ideally, it’ll never need to be used for it, but it’ll also protect WordPress users by allowing us to disable it for a plugin or entirely if there are any unexpected behaviours from it.”
Are WordPress plugins that make images lazy-loaded still needed after the WordPress 5.5 updates?
Yes, WP plugins may still be needed, because WP core adds a lazy load feature only for the images in the post content. This means that if you want to lazy load the images outside the post content, you’ll still need the special plugins for that. Still, if you’re a developer of a lazy loading plugin, make sure you update it to make use of the new core WP features and extend lazy load over all images in all pages natively.
Does WordPress 5.5 cause menu problems?
It is true that WordPress 5.5 has caused a lot of websites to break or malfunction. Some have reported menu problems, too, but this is only if you were using an outdated WordPress theme. The solution to that is to fix WordPress JQuery problems.
You like this article? Spread the word!
