The WordPress 5.4 release was published on March 31, 2020. What does this version bring for users and developers? Our overview: What's new in WordPress and Gutenberg.

WordPress continues to clean up its Gutenberg editor and add new functions. Before moving on to the next development steps - i.e. towards collaboration and multilingualism. Some new features could cause confusion among users, so you should be prepared for this. We summarize all the important changes for you.

Widget: Status of the website

The new feature of WordPress 5.4 that stands out at first glance: there is now a new "Website status" widget in the dashboard. The function behind this has been around since WordPress 5.2 and can be found in the backend under "Tools". With the new central placement, many users are likely to notice it for the first time:

The idea behind the feature is to make WordPress admins and users aware of potential vulnerabilities in the installation. A look at the details linked in the widget also offers suggestions for improvement or information on possible security vulnerabilities. These are for example:

• A list of inactive plugins and themes. You should always remove these, as they can be a target for hackers even when deactivated.
• Suggestions for PHP modules that should be installed on your server. Otherwise WordPress may run slowly, or individual functions may even be missing. See this list from the WordPress hosting team.
• A warning if your website does not yet use an HTTPS connection.

SSL encryption in particular is an absolute must for any professional website. For example via Let's Encrypt. Google also requires a secure connection, otherwise your website will lose significant rankings and visitors. Ideally, SSL certificates are included in your hosting package - this reduces your costs.

So far, the functionality of the website status and improvements section is still limited. This will certainly change with future versions. However, the "Report" tab contains exciting information:

It contains numerous details about your WordPress and WooCommerce configuration. You can export these, for example as a tool for your WordPress service providers. Or as a troubleshooting tool for developers of plugins and themes.

Gutenberg in fullscreen mode

You didn't know that Gutenberg has a fullscreen mode? Then you'll be confused the first time you open the editor in version 5.4. This is because the dashboard bar on the left-hand side is missing. This has advantages but also disadvantages:

• You now have more space available for your content, especially on smaller screens
• You won't be distracted by incoming comments, plugins to be updated, etc. while writing
• At the same time, the sidebar is missing for individual processes

The last point slows you down, especially if you have to switch back and forth between the post overview and the editor when updating your texts. Or if you want to call up the media library briefly.

Fullscreen mode is counterproductive for your work? Then you can restore the familiar view as follows:

1. Go to Gutenberg's advanced options (the three vertical dots next to the cogwheel icon at the top right)
2. These are currently called "More tools & options" in the editor
3. Remove the tick next to "Fullscreen Mode"

The behavior - fullscreen mode on or off - can also be predefined with a few lines of JavaScript:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

This is particularly useful if you, as an admin or developer, are overwhelmed by requests from your users as soon as WordPress 5.4 goes live on your website.

Gutenberg Block Social Icons

With this function, you can insert links or icons to your appearances in social networks at the click of a mouse. The basic options of "Social Icon":

• You can determine the type, number and order of the icons yourself, as well as the respective links, of course
• There are almost 40 icons and networks available
• In addition to WordPress, Twitter, Facebook, YouTube and Instagram, these include Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo and Spotify
• Links to other websites (such as guest authors) or to e-mail addresses can also be inserted

Somewhat confusing: If you want to remove an existing icon, you can do this by clicking on the icon and then using the "Remove block" option. This does not delete the entire block, but only the respective entry:

Your created block is not a reusable element by default. This means that if you make changes - such as adding or removing individual social icons - you would have to do this again if you later integrate "Social Icon" in another block or post. The solution: You convert your result into a reusable block and then only use this block.

Tip: Many users are not yet familiar with the "reusable blocks" function. It is extremely practical: when Google+ disappeared, for example, you only had to adjust the change in the reusable element. This is then done automatically in the corresponding blocks of the individual posts.

Gutenberg Block Buttons

The name says it all: you can use this new WordPress block to integrate text-based buttons into your posts. For example, to download e-books or to redirect to central landing pages. The buttons can be customized as follows:

• Different styles (completely filled with color or only with contour)
• Background and text color freely selectable, also with individual colors (via hexadecimal color values)
• Background in a single color or with a gradient (a nod to the wild days of web design)
• Edge settings (corner radius)
• Link options such as target _blank

Attentive users of Gutenberg know that there is already a block called "Button". However, the new "Buttons" option offers significantly more options:

In addition, you can now insert several buttons one after the other without ruining your layout. You can change the order of the buttons using drag & drop.

Note: WordPress 5.4 was originally supposed to have a new Navigation block to insert a navigation menu in the content of a page or post. However, this adjustment has been postponed to a later date.

Screen: Welcome to the block editor

Similar to WooCommerce, Gutenberg users are now also greeted with a "Welcome Guide". This contains:

• An introduction to how the block-based approach works
• Basic explanation of the options for each block (e.g. color, width, alignment)
• Notes on the block library

A link at the end leads to instructions for Gutenberg. However, this is in English.

We recommend the following sources if you have not yet worked with the new editor for WordPress:

• The overview for newcomers on en.wordpress.org
• The quick guide from webtimiser
• Six good reasons why you should stop hating Gutenberg
• Our article Gutenberg vs WordPress Page Builder

The guide is nothing new for admins, but may be of interest to pure users and editors. It should help them find their way around Gutenberg more quickly. This may also reduce your support effort as an admin.

Tip: The Welcome Guide only starts automatically when you reinstall WordPress or use Gutenberg for the first time. Do you want to start it manually? You can do this in the general options under Tools -> Welcome Guide (under the point where you can switch between code and visual editor).

Insert post image via drag & drop

Sometimes it's the small changes that make WordPress users happy. With version 5.4, you can upload the post image using drag & drop. Here's an example:

1. You have already edited or been sent the image and it is in a folder on your computer
2. From there, drag it with the mouse to the "Set post image" area in the right sidebar of Gutenberg from version WordPress 5.4
3. Done - uploading to the media library happens automatically in the background

You only need to enter the metadata for the image later if necessary by clicking on the inserted image. Or within the WordPress media library. This is probably the biggest "danger" of the convenient new option: it comes at the expense of attributes that may be important for your SEO.

Optimized block Latest posts

Many readers like to see additional articles under your blog posts. It's similar with the latest posts (currently called "Latest Posts" in Gutenberg). This keeps your users on your website for longer. The values "dwell time" and "page views per visit" increase - both are important key figures for search engine optimization (SEO).

The click rate of this function increases significantly if you not only use text links, but also display the respective post images. This is possible as of WordPress 5.4:

Further new features in the "Latest posts" block:

• Set the image size for the preview image
• You can define fixed values in pixels or use different percentages
• The image alignment can also be adjusted (left-aligned, centered, right-aligned)

Should the full post be visible in the preview, or just an excerpt of the text? Some blogs report that this option has also been added. However, it already exists in WordPress 5.3, under "Post content settings" .

Text color for individual words and sentences

Until now, the text color in Gutenberg could only be changed for an entire paragraph or section. With WordPress 5.4, there is now an option that allows you to change the color for individual letters, words or sentences:

To do this, select the relevant part of the continuous text with the mouse. In the advanced options (next to the link symbol) you will now find the "Text color" entry. There you can choose from predefined colors or define an individual color. An RGB color table and hexadecimal color values are available for this purpose.

Other changes

WordPress 5.4 brings numerous minor adjustments under the hood, for the system itself or for the Gutenberg editor. Here is an overview of the most important points:

• There are now extended color and gradient options for individual blocks, for example for the cover block (image or video with overlay text) but also for groups and columns
• Navigation in the breadcrumbs of nested blocks has been made clearer
• In the smartphone view, the toolbar remains at the top, so it no longer disappears from the focus
• In the "Gallery" block, you can change the image size (four levels: preview image, medium, large, full size)
• There is now a caption for tables, for images the title attribute can be assigned directly in the editor (under the advanced options)
• Videos from the TikTok portal are available as a new embedding source in the block editor

In addition, the usability of Gutenberg has been optimized in some places, for example by making it easier to select multiple blocks or to navigate using the tab key. The latter now also works within the sidebars of the blocks.

Tip: If you are looking for information on the future roadmap of WordPress, visit the blog of the German-language WordPress project. Or the page https://de.wordpress.org/about/roadmap/.

Changes for developers

There are also new options for anyone working on WordPress behind the scenes. But also more performance:

• Higher speed: According to the development team working on the block editor, the loading time has been reduced by 14 percent
• Calendar widget: The navigation links are moved to a nav HTML element that immediately follows the table element, for valid HTML (according to the specification for 5.1)
• Uniform semantics: The function do_shortcode() is characterized by apply_shortcode() replaced
• Favicons: Requests for the favicon can be managed more flexibly, the WordPress logo serves as a fallback solution
• Error-log: Error in wp_login_failed are shown in more detail

You can read more about this - as well as other adjustments - in the official announcements for WordPress 5.4. You can find information on testing WordPress 5.4 here.

What questions do you have about WordPress 5.4? Feel free to use the comment function. Do you want to be informed about new posts about WordPress? Then follow us on Twitter, Facebook or via our newsletter.