New in WordPress 5.4 and Gutenberg: Social icons, buttons, fullscreen & more

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

WordPress continues to tidy 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 for users, so you should be prepared for this. We summarise 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 centralised 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 provides 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 will be confused when you first 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 centre briefly.

Is the full-screen mode 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 behaviour – fullscreen mode on or off – can also be specified 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 associated 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 customised as follows:

• Various styles (completely filled with colour or with outline only)
• Background and text colour freely selectable, also with individual colours (via hexadecimal colour values)
• Background in a single colour 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 will 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 destroying your layout. You can customise 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 into 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. for colour, 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 centre takes place 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 centre. 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.

Optimised 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 “dwell time” and “page views per visit” values increase – both are important key figures for search engine optimisation (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 various percentage values
• The image alignment can also be adjusted (left-aligned, centred, 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 colour for individual words and sentences

Until now, the text colour 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 colour 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 colour” entry. There you can choose from predefined colours or define an individual colour. An RGB colour table and hexadecimal colour values are available for this purpose.

Other changes

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

• There are now extended colour 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
• You can change the image size in the “Gallery” block (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

The usability of Gutenberg has also been optimised in some areas, 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 visit 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:

• Increased speed: According to the development team behind the block editor, the loading time has been reduced by 14 per cent
• 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)
• Standardised semantics: The do_shortcode() function is replaced by apply_shortcode()
• Favicons: Requests for the favicon can be managed more flexibly, the WordPress logo serves as a fallback solution
• Error-log: Errors in wp_login_failed are displayed 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.