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

8 Min.
WordPress  5.4

The WordPress 5.4 Release was published on 31 March 2020. What are the benefits of the release for users and developers? Our overview: This is new in WordPress and Gutenberg.

WordPress tidies up its editor Gutenbergmore and more and provides it with new functions. Before moving on to the next development steps - i.e. in the direction of collaboration and Multilingualism. Some new features might cause confusion for users, you should be prepared for that. We summarize all important changes for you.

Widget: State of the website

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

State 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 weaknesses in the installation. Likewise, a look at the details linked in the widget offers suggestions for improvement or hints about possible security holes. These are for example:

  • A list of the inactive Pluginsand Themes. You should always remove these, because even in deactivated state they are still a hacker target can be.
  • Suggestions for PHP modules that should be installed on your server. Otherwise it may run WordPress slowly or some functions may be missing. See that list of WordPress Hosting-Teams.
  • A warning if your website does not yet use HTTPS connection.

Especially the encryption via SSL is an absolute must for every professional web presence. For example via Let's Encrypt. Google also requires a secure connection, otherwise your website will lose rankings and visitors. Ideally the SSL certificates are included in your hosting package - the lowers your expenses.

Up to now the functionality of the section website state or improvements 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 give you many details about your configuration of WordPress and WooCommerce. You can export these, for example as an aid for your WordPress -service provider. Or for troubleshooting for developers of Pluginsand Themes.

Gutenberg in fullscreen mode

You didn't know it had Gutenberga full-screen mode? Then you will be irritated when you first call 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 for your content
  • You will not be distracted by incoming comments, updates Pluginsetc. while writing
  • At the same time, the sidebar is missing in some processes

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

Gutenberg Fullscreen
Gutenberg in full screen mode

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

  1. Go to the advanced options of (the Gutenbergthree vertical dots next to the gear symbol in the upper right corner)
  2. These are called "More tools & options" in the editor so far
  3. Remove the check mark at "Fullscreen Mode" there

The behavior - fullscreen mode on or off - can be changed with a few lines of JavaScript even profess:

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

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

  • You can determine the type, number and order of the icons yourself, as well as the links
  • There are almost 40 icons or networks available
  • Besides 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 a previous icon, you can do so by clicking on the icon and then selecting the "Remove block" option. This will not delete the entire block, 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 include "social icon" in another block or post. The solution: You convert your result into a reusable block and then use only that block.

Tip: Many users are not yet familiar with the function "reusable blocks". It's 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: This new WordPress block allows you to include text-based buttons in your posts. For example to download e-books or to forward them to central landing pages. The buttons can be customized as follows:

  • Different styles (completely filled with color or only with outline)
  • Background and text color freely selectable, also with individual colors (via hexadecimal color values)
  • Background monochrome or with gradient (the wild times of web design are greeting)
  • Edge settings (corner radius)
  • Link options like target _blank

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

Gutenberg Buttons
Gutenberg Buttons with gradient and curves

In addition, it is now possible to insert several buttons one after the other without this destroying your layout. You can change the order of the buttons by drag&drop.

Note: Originally, WordPress 5.4 was intended to provide new block navigation to insert a navigation menu also in the content of a site post. However, this adjustment was changed to at a later stage postponed.

Screen: Welcome to the Block Editor

Similar to the "Welcome Guide", the users WooCommerceare now also welcomed by Gutenberga "Welcome Guide". This contains:

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

A reference at the end leads to instructions for Gutenberg. This is however in English language.

Gutenberg welcome screen
The Welcome Guide from Gutenberg

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

For admins the guide is nothing new, but for pure users and editors it might be interesting. They should find their way Gutenbergaround faster with it. This may also reduce your support efforts as an admin.

Tip: The Welcome Guide will only start automatically when you install 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 contribution picture by drag & drop

Sometimes it is the small changes that make users of WordPress happy. With version 5.4 you can upload the post image by drag and drop. An example:

  1. You have already processed or sent 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

Only the meta data for the image must be entered 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 comes at the expense of attributes that might be important for your SEO.

Optimized block Recent contributions

Displaying more articles under your blog posts is a feature that many readers like to use. It is similar with the latest posts (currently called "Latest GutenbergPosts"). This way your users stay longer on your website. The values "length of stay" 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:

Latest posts WordPress
Latest contributions with contribution picture

Further innovations in the "Recent posts" block:

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

Should the preview show the complete article or only an excerpt of text? Some blogs report that this option has also been added. However, it is already available in 5WordPress .3, under "Post content settings" .

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 colourful in parts of your texts

To do this, mark the corresponding part in the continuous 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 you can use an RGB color table and hexadecimal color values.

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 optionsfor the cover block (image or video with overlay text) but also for groups and columns
  • The navigation in the breadcrumbs of nested blocks is more clearly arranged
  • In the smartphone view remains the toolbar at the topso she's no longer out of focus.
  • In the block "Gallery" you can influence the image size (four levels: preview image, medium, large, full size)
  • There is now a signature ("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 in the block editor as a new embedding source

In addition, the usability of has been Gutenbergoptimized in some places, for example by making it easier to select multiple blocks or navigate 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 ofWordPress the blog of the German language WordPress project. Or the site https://de.wordpress.org/about/roadmap/.

Changes for developers

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

  • Higher speed: The development team around the block editor has, according to their own statements, developed a Reduction of the loading time of 14 per cent achieved
  • Calendar widget: The navigation links are moved into a nav HTML element that immediately follows the table element, for valid HTML (according to the 5.1 specification)
  • Uniform semantics: The function do_shortcode() is represented 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 more detailed

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

What questions about WordPress 5.4 you got? You can use the comment function. You want to know about new posts to WordPress be informed? Then follow us Twitteror Facebook , or subscribe to our newsletter.

Related articles

Comments on this article

Write a comment

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