Introduction

5.4 is the newest WordPress update and is the first major update in the WP 2020 calendar, released on March 31st. It’s named after Nat Adderley, famed for his contribution to the development and establishment of 1960’s American soul jazz. This latest update aims to give you more ways to make your posts and pages come alive, and keep your visitors engaged with embedded media. It also promises a 14% increase in block loading speed, and a 51% faster typing time – shaving valuable seconds off your content writing and publishing time.

Quick disclaimer: if your site was custom built by the team here at Illustrate Digital or by another agency/developer then some of these features or blocks may not work out of the box, as custom design may be needed to enable you to use them. It’s not bad news though, it helps with the continuity of your user experience. Give us a shout if you need help!

What’s New?

So let’s take a look at the new, useful and exciting features that the core team have worked on to deliver to us in WordPress 5.4

Welcome Guide

WordPress 5.4 Welcome Guide

 

When you first access the Gutenberg editor you will see a Welcome Guide pop up to give you an introduction on the basics of blocks. Useful for those brand new to the editor or if you haven’t used it in a while and need a little reminder. If you want to see the guide again, simply click the settings menu in the top right corner and you will find Welcome Guide as one of the options.

Full Screen Gutenberg Editor

Full Screen Block Editor in WordPress 5.4

The Gutenberg editor has gone supersize and is now full screen by default. You can still deselect the full screen view in the Gutenberg options if you prefer the old look.

If you are accessing the updated site on the same device and/or browser you used before, WordPress will retain that mode so you will need to switch the full screen editor on to see the new editor. Definitely good to know it won’t reset itself on every visit!

Social Icons Block

Social Icons Gutenberg Block in WordPress 5.4

This block lets you easily add all the social media icons to your site, with around 40 icons available at the time of writing including Google, Amazon and Pinterest. You can easily add a link to the icon by clicking on it, and move the order in which they sit with the handy left and right arrow buttons. You can also select three different styles to display the icons, Default, Logos Only or Pill Shape, in the block menu.

Buttons Block

Buttons Block for Gutenberg in WordPress 5.4

The Buttons block lets you easily create buttons of any shape, size and colour combination. The buttons have two different styles – Fill and Outline – and a range of text and background colours, including gradients for the background. Use the Custom Colour to use the colour picker, or insert a hex code. Click on the buttons to use the toolbar, where you can add bold or italic styles, and custom URLs. There is even a handy ‘view as HTML’ option where you can edit the button directly.

Toolbar Sticky on Mobile

Sticky Toolbar in WordPress 5.4

If you are on a mobile device, the block toolbars will now be sticky and stay at the top of the block the whole time you are editing a block.

More Colour Options

Colour Options for Gutenberg in WordPress 5.4

There are also colour options on the Column, Group and Cover blocks, where you can set the text and background colour. You can also change the colour of specific text parts just by highlighting the text and, in the block toolbar, click the down arrow for more options, and select Text Colour.

Drag and Drop Feature Image

The featured image can now be dropped straight from your desktop into the Featured Image area – no need to upload it via the Media Library anymore.

Select Tool

Select Tool in WordPress Version 5.4

The new Select tool makes it really easy to select your block – it can be found on the top menu bar and will allow you to select multiple blocks at once.

Block Breadcrumbs

Block Breadcrumbs for the Gutenberg Editor in WordPress 5.4

The blocks now have breadcrumbs, so that you can easily navigate the block hierarchy. The breadcrumbs will display on the bottom of the page.

Select Image Size in Gallery

Gallery Image Size in WordPress 5.4

You can now choose between four different sizes for your images in the Gallery block: Thumbnail, Medium, Large and Full Size.

Table Captions

Table Captions in WordPress 5.4

You can now add captions at the bottom of your table in the Tables block.

Improved Privacy Practices

5.4 has also updated the privacy practices, making it easier for you to handle any user requests or queries regarding their data and how it’s handled. Personal data exports now include user session information and user location data, with a table of contents for easier access. You can also see the progress as you process exports and erasure requests via the privacy tools – which have also received a cleaner look.

Latest Post Featured Image

You can now add a featured image to the Latest Post block.

TikTok Embed

You can now embed TikTok videos with the TikTok block, while the CollegeHumor embed block is now gone.

Other Key Features

  • API Updates: Drag and drop blocks more easily (positioning classes have been removed, drop zone gone), drag and drop featured image – upload via Media library no longer necessary. Selected block gets rendered as you type, no more typing lagginess
  • DOM Structure changes: legacy editor class names changed, certain divs removed, blocks and rich text components lose redundant wrappers, built in block margins and padding removed
  • New Keyboard shortcuts: Registration and removal of keyboard shortcuts centralised
  • Changes to Button components: Button default height now 36px, Icon support, icon class names changed.
  • New Hooks: Two new hooks added in, wp_nav_menu_item_custom_fields and wp_nav_menu_item_custom_fields_customize_template

How We Use Gutenberg and Blocks at ID

For over 18 months Gutenberg has been our default editor for new projects at Illustrate Digital. We consult with each new client o what the best editor technology will be to suit their needs and in most cases the new (and recently improved) Gutenberg editor for WordPress is the winner.

Our unique method of building high-performing, user-friendly websites is based on this idea of reusable, flexible blocks that a content editor can place anywhere they’re needed. We reckon it’s pretty important for a marketer or website admin to have control over the content they create, as well as when and how they create it, without being reliant on their agency for their every marketing move.

If you’d like to learn more about our services at ID, from user-centric design to WordPress development, check out our services here to discover how we can help: illustrate.digital/services

Looking to Learn More?

If you’d like to learn more about the Gutenberg editor, or how WordPress can be a powerful tool for your marketing needs, you may find these other articles helpful:

Written by Kristin Eriksen

Front-End Engineer

Read full profile