New in WordPress 5.4 and Gutenberg: Social Icons, Buttons, Fullscreen & more

Michael Firnkes Last updated 10/23/2020
8 Min.
WordPress  5.4
Last updated 10/23/2020

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

WordPress continues to clean up its editor Gutenberg and gives it new functions. Before it goes into the next development steps - i.e. in the direction of collaboration and multilingualism. Some new features might cause confusion among users, so you should be prepared for that. We summarize all the important changes for you.

Widget: State of the website

The innovation of WordPress 5.4, which is noticeable at first glance: In the dashboard there is now a new widget for the "state of the website". The function behind it already exists since WordPress 5.2. You can find it in the backend under "Tools". With the new central placement, many users will probably become aware of it for the first time:

Condition of the website
The new widget

The idea behind the feature: The admins but also the users of WordPress should be made aware of possible vulnerabilities in the installation. Likewise, a look at the details linked in the widget offers suggestions for improvement or hints about 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 disabled.
  • Suggestions for PHP modules that should be installed on your server. Otherwise WordPress may run slowly, or some functions may be missing. See this list from the WordPress Hostingteam.
  • A warning if your website does not yet use an HTTPS connection.

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

Up to now, the functionality of the website state/improvements section is still manageable. This will certainly change with future versions. However, the "Report" tab contains exciting information:

WordPress  Configuration
The configuration of WordPress

This will provide you with numerous details about your configuration of WordPress and WooCommerce. You can export them, for example as a tool for your WordPress service providers. Or for debugging purposes for developers of Plugins and Themes.

Gutenberg in fullscreen mode

You didn't know that Gutenberg has a fullscreen mode? Then you will be irritated when you first open the editor in version 5.4. Because there the dashboard bar on the left site is missing. This has advantages but also disadvantages:

  • Especially on smaller screens you now have more space available for your content.
  • 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 down especially when you have to switch between the post overview and the editor when updating your texts. Or when you want to briefly call up the media library.

Gutenberg fullscreen
Gutenberg in fullscreen mode

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

  1. Go to the advanced options of Gutenberg (the three vertical dots next to the gear icon on the top right)
  2. These are called "More tools & options" in the editor so far.
  3. Uncheck the "Fullscreen Mode" checkbox there.

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 especially handy if you as an admin or developer are overrun by requests from your users as soon as WordPress 5.4 goes live on your website.

Gutenberg Block Social Icons

The function allows you to add links or icons to your social network appearances with 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 or networks available
  • In addition to WordPress , Twitter, Facebook, YouTube or Instagram, these are for example Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo or Spotify.
  • Links to other websites (e.g. guest authors) or to e-mail addresses can also be inserted.

A bit confusing: If you want to remove an existing icon, you can do this by clicking on the icon, and then using the option "Remove block". Then not the complete block is deleted, but only the respective entry:

Delete social button Gutenberg
Delete social buttons in Gutenberg

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 when you later integrate "Social Icon" in another block or post. The solution: You convert your result into a reusable block and only use this block afterwards.

Tip: Many users are not yet aware of the "reusable blocks" feature. 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 in 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 color filled or with outline only)
  • Background and text color freely selectable, also with individual colors (via hexadecimal color values)
  • Background monochrome or with gradient (greetings from the wild times of web design)
  • Edge settings (corner radius)
  • Link options like target _blank

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

Gutenberg Buttons
Gutenberg Buttons with gradient and curves

In addition, you can now insert multiple buttons one after the other, without this breaking your layout. You can adjust the order of the buttons as you like via drag & drop.

Note: Originally WordPress 5.4 was supposed to get a new block Navigation to insert a navigation menu also in the content of a site or a post. However, this adjustment was postponed to a later date.

Screen: Welcome to the Block Editor

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

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

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

Gutenberg Welcome Screen
The Welcome Guide from Gutenberg

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

For admins the guide is nothing new, but for pure users and editors it might be interesting. It should help them to 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. You want to start it manually? You can do that 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 users of WordPress happy. With version 5.4, you can upload the post image by dragging and dropping. Example:

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

You only have to add the meta information to the image afterwards, if necessary, by clicking on the inserted image. Or within the media library of WordPress . This might be the biggest "danger" of the convenient new option: It is at the expense of attributes that may be important for your SEO.

Optimized block Recent posts

The display of further articles under your blog posts is used by many readers. It is similar with the latest posts (currently called "Latest Posts" in Gutenberg ). This keeps your users on your website 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 use not only text links, but also the respective post images are displayed. This is exactly what is possible from WordPress 5.4 on:

Newest contributions WordPress
Latest posts with post image

Other new features in the "Recent Posts" block:

  • Set the image size for the preview image
  • You can define fixed values in pixels, or use different percentage values.
  • 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 is also new. However, it already exists in WordPress 5.3., under "Settings for post content" .

Text color for individual words and sentences

Until now, the text color in Gutenberg could only be changed for a complete paragraph or section. With WordPress 5.4 there is now an option to change the color for single letters, words or sentences:

Text color in Gutenberg
Now it can also become colorful in parts of your texts

To do this, mark the corresponding part in the body text with the mouse. In the advanced options (next to the link symbol) you will now find the entry "Text color". There you can choose from predefined colors or define an individual color. For this purpose, an RGB color table as well as hexadecimal color values are available.

Other changes for users

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

  • For individual blocks there are now extended color and gradient options, for example for the cover block (image or video with overlay text) but also for groups and columns.
  • The navigation in the breadcrumbs of nested blocks has been made clearer
  • In the smartphone view, the toolbar remains on top, so it no longer disappears from the focus
  • In the "Gallery" block you can change the image size (four levels: thumbnail, 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 of the portal TikTok are available in the block editor as a new embed source

In addition, the usability of Gutenberg has been optimized in some places, for example by simplifying the multiple selection of blocks or navigating with the tab key. The latter now also works within the sidebars of the blocks.

Caption table WordPress
A table with signature (Caption)

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

Changes for developers

For those working behind the scenes at WordPress , there are also new opportunities. But also more performance:

  • Increased speed: The development team around the block editor has achieved a reduction in loading time of 14 percent, according to their own information.
  • Calendar widget: The navigation links are moved to a nav HTML element that immediately follows the table element, for valid HTML (according to the 5.1 specification).
  • Consistent semantics: The function do_shortcode() is replaced by apply_shortcode() replaces
  • Favicons: Favicon requests 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. Hints for testing WordPress 5.4 can be found here.

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

Related articles

Comments on this article

Post a comment

Your email address will not be published. Required fields are marked with *.