WordPress 5.4 “Adderley” was released on March 31st, 2020, and is available for download.

So it’s time for us to dive deep into the most interesting new features and changes coming with WordPress 5.4.

First and foremost, WordPress 5.4 brings many features, improvements and bug fixes to the block editor, with a considerable number of versions of the Gutenberg plugin merged into the core. Those changes affect both the functionalities and the UI, improving the editor’s accessibility/usability and the editing experience in general.

Besides the editor, WordPress 5.4 introduces interesting improvements in the Site Health Tool and in the REST API, while a couple of features expected with WordPress 5.4 have been delayed and should be bundled into the Core with the next release of WordPress 5.5 (see Native Lazy Loading on images and Navigation block).

You may want to save the following dates and links from WordPress 5.4 Development Cycle:

So, what’s new in WordPress with WordPress 5.4?

What’s New With the Block Editor

A considerable number of the Gutenberg plugin versions have been merged into the core, from 6.6 to 7.5. So, if you aren’t using the Gutenberg plugin, you’ll find tons of new features, enhancements, and bug fixes in the block editor when upgrading to WordPress 5.4.

But there’s more than blocks and features in the editor with overall performance improvements being reported:

The block editor team has achieved a 14% loading time reduction and 51% time-to-type reduction, for a particularly sizable post (~ 36,000 words, ~1,000 blocks) since WordPress 5.3.

That’s a lot of awesome stuff, so let’s dive in.

What's new in WordPress 5.4? Get an in-depth view of all the new interesting features and changes coming with this latest release! 💪🚀Click to Tweet

New Block Editor Features and Enhancements

We may agree on the fact that the block editor is still under development, but WordPress 5.4 brings tons of changes improving the editor’s usability both on desktop and mobile.

Some of these changes strictly relate to the interface, including fullscreen mode enabled by default, improved block selection, easy switching between edit mode and selection mode, fixed mobile toolbar, and breadcrumbs for block navigation. Two new blocks and additional option settings add more functionalities to the editor.

Here is a quick list of our favorite block editor’s features and improvements coming with WordPress 5.4:

New Social Icons Block

Initially called Social Links, the Social Icons block allows authors to quickly add icons with links to social profiles and provides a good number of social icon child blocks to choose from. This block has been experimental for a while and is stable since Gutenberg 7.5.

WordPress 5.4: Social Icons
The Social Icons block

The Social Icons block comes with three predefined styles for your visual customizations: Default, Logos only, and Pill shape.

Social Icons
Social Icons styles

Since they were first introduced as an experimental feature in Gutenberg 6.5 (and merged into WordPress 5.3), Social Icons have been added to Gutenberg 7.5 and they may not work as expected if you are running an outdated version of the Gutenberg plugin.

According to Jorge Costa, there are two ways to prevent issues with Social Icons:

New Buttons Block

Added to the block editor in Gutenberg 7.2, the Buttons block replaces the single Button block, and allows WordPress users to add more buttons to their content within the same block container.

Buttons block
The new Buttons block

Single buttons come with two preset styles to choose from and several additional options to fine-tune the appearance of your buttons.

Button settings in WordPress 5.4
Button settings in WordPress 5.4

With WordPress 5.4, site owners gain deeper control over the look and feel of their call-to-actions thanks to the addition of gradient backgrounds, which also come with a handful of gradient presets available for site admins to use as starting points for further customizations.

Gradient background
Revamped color features for buttons

A Welcome Guide Modal

WordPress 5.4 adds a brand new Welcome slideshow providing basic information about the block editor and a link to the online documentation (added with Gutenberg 7.1).

WordPress 5.4: Welcome modal
Welcome Guide Modal

The modal is only visible right after updating to 5.4. If you’d like to trigger it again, just open the More tools & options menu from the upper-right button and find the Welcome Guide link.

WordPress 5.4: welcome guide
Welcome guide

Fullscreen Mode Enabled by Default

Starting with WordPress 5.4, the editor opens in full-screen mode by default in new installations and devices. You can toggle the Fullscreen mode on/off by clicking the More tools & options menu, as shown in the image below.

Fullscreen mode
Fullscreen mode is enabled by default in WordPress 5.4

For now, this preference is stored locally, meaning that it will be overwritten anytime preferences change, as it happens when you access your website in incognito mode. In the future, this preference should be stored in the database, making the user choice persistent in any context.

Note that the decision to have the editor in fullscreen mode by default is not unanimously appreciated as considered to be potentially confusing for beginners and non-advanced users. Check this post if you want to know more about people’s concerns on fullscreen mode.

Block editor developers can control the fullscreen mode programmatically with just 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' );

Inline Text Color Support in RichText Blocks

If you usually write long-form articles, you should appreciate the inline text color support. Before this update, we were forced to hardcode rich text blocks in HTML mode to change the color of single words and strings.

RichText Color option
RichText Color option

Starting with WordPress 5.4, we can select words and sub-strings in RichText blocks and quickly change their colors using the built-in color picker.

WordPress 5.4: RichText color
RichText color picker

Additional Color Options for Several Blocks

WordPress 5.4 adds a long list of color-related features and enhancements to the block editor. As seen above, we’re not limited to solid colors anymore. Several blocks now support gradient backgrounds and predefined sets of gradients.

Here is a quick list of some color-related enhancements:

Cover block
Cover block with preset gradient background

Another noticeable addition to the block editor is the support for featured images in the Latest Posts block (Gutenberg 7.5).

This is just the newest of several improvements added to the Latest Posts block over time and marks another step to “more complex dynamic or global blocks”.

Latest Posts
Latest Posts block

With WordPress 5.4, the Latest Posts block allows you to pull posts from a specific category but doesn’t allow you to build more advanced queries by category/tag/post type and/or include/exclude single posts.

We hope to see further enhancements with this block in the future.

A New Breadcrumb Bar for Block Navigation

Available to Gutenberg users since version 6.7, and now merged into the Core, the new breadcrumb bar aims to simplify nested block navigation.

The image below displays several nested blocks and the new breadcrumb menu at the bottom.

WordPress 5.4: breadcrumb menu
The new breadcrumb menu

Block Editor Changes for Theme and Block Developers

Theme and block developers should be aware of many changes brought to the block editor with WordPress 5.4. These changes include:

Block Editor Keyboard Shortcuts

Block developers and advanced users can now add custom shortcuts to the block editor.

A new package called @wordpress/keyboard-shortcuts has been introduced to centralize registration, removal, and documentation of editor shortcuts.

Developers can add their custom shortcuts by calling the registerShortcut action this way:

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {

	// Shortcut identifier
	name: 'plugin/shortcut-test',

	// Shortcut category (possible values global, block, selection)
	category: 'global',

	// Shortcut description
	description: 'My first shortcut',

	// The key combination that triggers the shortcut
	keyCombination: {

		// Available modifiers:
		// primary, primaryShift, primaryAlt,
		// secondary, access, ctrl, alt,
		// ctrlShift, shift, shiftAlt
		modifier: 'alt',
		character: 'w',

	// An alias for the key combination
	aliases: [
			modifier: 'primary',
			character: 'q',
} );

This will automatically add the custom shortcut to the shortcuts modal available under More Tools & options button on the upper-right corner of the editor.

My first block editor shortcut
A custom global block editor shortcut has been added

Then, we can attach a keyboard shortcut handler using the useShortcut function:

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {


			( event ) => {
				// Do something

You can read more about keyboard shortcuts on the Make WordPress Core blog.

Gradient Theme APIs

WordPress 5.4 introduces gradient backgrounds with a handful of presets for Buttons and Cover blocks. This happens thanks to the new Gradient Theme APIs.

The new APIs provide the editor-gradient-presets theme-support option, which allows theme developers to override default presets and define their own:

			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
			'name'		=> __( 'Chocolate to Coral', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',
			'slug'		=>  'chocolate-to-coral',
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
			'name'		=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',
			'slug'		=> 'deepskyblue-to-dodgerblue',
Custom gradients in WordPress 5.4
Custom gradient presets in WordPress 5.4
Custom gradient presets
Custom gradient presets

You can disable custom gradients using the disable-custom-gradients theme-support option:

add_theme_support( 'disable-custom-gradients' );

The gradient functionality can be completely removed using both disable-custom-gradients and editor-gradient-presets:

add_theme_support( 'disable-custom-gradients' );
add_theme_support( 'editor-gradient-presets', array() );

Markup and Style Changes on the Block Editor

WordPress 5.4 introduces several DOM structure changes theme developers should be aware of.

For a detailed view about DOM and CSS changes, see Markup and style-related changes in WordPress 5.4

Block Scaffolding

With the new @wordpress/create-block Package for Block Scaffolding, developers have a new way to generate the directory structure for a block editor plugin. This structure typically includes index.php, index.js and style.css.

Block developers can now simply run the following command:

$ npm init @wordpress/block block-name

Block Collections

Block Collections provide a way to visually group collections of blocks in the block editor inserter. Collections are different from categories and provide an additional way for grouping blocks.

The new API provides a new function:

registerBlockCollection( namespace, { title, icon } );

Introduced with Gutenberg 7.3 and now merged into the core, the new API allows theme and block developers to better organize blocks making it easier for users to discover and add blocks to content.

Block Variations

The Block Variations API provides a set of functions that allows block developers to add/manage/remove variations of blocks the users can choose from when adding blocks to content. Registering a new variation is quite straightforward (JS code):

wp.blocks.registerBlockVariation( 'core/heading', { 
	name: 'green-text', 
	title: 'Green Text', 
	description: 'This block has green text. It overrides the default description.',  
	attributes: { 
		content: 'Green Text', 
		textColor: 'vivid-green-cyan' 
	icon: 'palmtree', 
	scope: [ 'inserter' ] 
} );
block variations
Heading block variations

For a closer view at the Block Variations API, see PR #20068.

Additional Block Editor Features Coming With WordPress 5.4

Additional notable features bundled into the core with WordPress 5.4 include:

Switch between Edit Select mode
Switch between Edit Select mode
table caption
A table with a caption in WordPress 5.4
Drag and Drop featured image
Drag and Drop featured image
Fixed block toolbar on mobile
Fixed block toolbar on mobile
Gallery block settings
Gallery block settings
Media text image link
Add links to images in Media & Text block

Features and Improvements for WordPress Developers

Developers should benefit from several new additions coming with WordPress 5.4.

Our favorite changes include the following:

Tired of WordPress issues and a slow host? We provide world-class support from WordPress experts available 24/7 and blazing fast servers. Check out our plans

A Semantically Correct Calendar Widget and New CSS Classes

The HTML 5.1 spec has changed the way tfoot elements have to be used in tables. Before HTML 5.1 tfoot elements could precede the tbody element. The new spec changes things and now tfoot must follow tbody.

Old calendar widget
Old calendar widget

The WordPress calendar widget changes accordingly. Starting with WordPress 5.4, navigation links move to a nav element outside of the calendar table.

It was a long-awaited change considering that nav is the most appropriate HTML element for navigation links in any contest, and can also help to improve accessibility on screenreaders. According to Mozilla documentation:

A document may have several <nav> elements, for example, one for site navigation and one for intra-page navigation. aria-labelledby can be used in such case to promote accessibility…

User agents, such as screen readers targeting disabled users, can use this element to determine whether to omit the initial rendering of navigation-only content.

Additionally, the following CSS classes have been introduced in get_calendar() for easier targeting:

The snippet below shows the new calendar’s HTML structure:

<div class="widget widget_calendar">
	<div class="widget-content">
		<div id="calendar_wrap" class="calendar_wrap">
			<table id="wp-calendar" class="wp-calendar-table">
				<caption>February 2020</caption>
					<tr><!-- Day names --></tr>
					<!-- Calendar cells -->
			<nav aria-label="Previous and next months" class="wp-calendar-nav">
				<span class="wp-calendar-nav-prev"><a href="http://example.com/?m=201912">« Dec</a></span>
				<span class="pad"> </span>
				<span class="wp-calendar-nav-next"> </span>

Theme developers may want to change their stylesheets accordingly.

WordPress 5.4: New calendar widget
New calendar widget

Shortcodes in PHP Scripts

WordPress 5.4 introduces the apply_shortcodes() function as an alias for do_shortcode(), which allows us to use a shortcode in a PHP file.

From the semantic point of view, we may expect to see the result of do_* functions by simply calling the function itself. But that’s not the case of do_shortcode. To print the output of the specified shortcode, do_shortcode have to be echoed:

// Displays the result of the shortcode
echo do_shortcode( '[shortcode]' . $text . '[/shortcode]' );

WordPress 5.4 changes things a bit with the introduction of apply_shortcodes(), which works the same way as do_shortcode(), but allows developers to build more readable and semantically correct code:

// Displays the result of the shortcode
echo apply_shortcodes( '[shortcode]' . $text . '[/shortcode]' );

As of WordPress 5.4 RC 5, do_shortcode() is not planned to be deprecated because it’s widely used in third-party plugins.

Enhancements to Favicon Handling in WordPress 5.4

With WordPress 5.4, theme developers can handle favicon requests with much more flexibility and several new functions allow to manage favicons the same way as robots.txt related functions. Sergey Biryukov explains:

A request to favicon.ico should be handled the same way as we handle robots.txt with do_robots():

So, if a physical favicon.ico file is not provided, here’s how WordPress handles it:

A handful of new functions and hooks complement the corresponding robots.txt related functions/hooks:

Read more about favicon handling.

New Hooks To Add Custom Fields to Menu Items

With WordPress 5.4, developers can use two new action hooks to add custom fields to menu items.

The wp_nav_menu_item_custom_fields is triggered just before a nav menu item is added to the admin menu editor. See the example below:

function kinsta_add_menu_item_custom_field() {
	echo '<p class="menu-item-custom-field">Hey! This is an example for Kinsta blog readers!</p>';
add_action( 'wp_nav_menu_item_custom_fields', 'kinsta_add_menu_item_custom_field' );
Custom fields in nav menu items
Custom fields in nav menu items

The new action hook supports five parameters you can use to fine-tune the custom field behavior:

The wp_nav_menu_item_custom_fields_customize_template works the same way as wp_nav_menu_item_custom_fields, but it’s triggered at the end of the form-fields template for nav menu items in the Customizer. The image below shows the Customizer’s Menus section in WordPress 5.4.

Custom fields in nav menu items
Custom fields in nav menu items

Additional Changes for Developers

Further changes for developers and advanced users coming with WordPress 5.4 include:

How to Install a WordPress Development Version

If you’d like to make sure your themes and plugins are fully compatible with WordPress 5.4 or you are just curious about new features coming with the latest WordPress release, you can install the current development version with few clicks.

You have two ways to install a WordPress Beta/RC version:

If you decide to install the Beta tester plugin, you’d need to set up a regular WordPress installation first, either on your local machine or in your staging environment.

Once your WordPress website is up and running, browse to Plugins → Add new and search for the WordPress Beta Tester plugin.

The plugin provides a quick and easy way to beta testing WordPress, allowing to install and/or update the current Beta or Release Candidate with the click of a button.

WordPress Beta Tester
Install the WordPress Beta Tester plugin

So, install and activate the plugin as usual.

Browse to Tools → Beta Testing and check the Bleeding edge nightlies option and save changes.

After that, navigate to the Dashboard → Updates screen and click on the Update Now button.

WordPress Updates
WordPress Updates screen

WordPress will now download and install the following package:


Once the installation is completed, you’ll be redirected to the temporary WordPress About page.

WordPress update progress
WordPress update progress

And that’s it. Now you are ready to run your tests on WordPress Beta and RC versions.

Check the official documentation for further information about WordPress Beta testing.


With ten versions of the Gutenberg plugin merged into core, WordPress 5.4 is mostly focused on the Block Editor. We have two new blocks, custom shortcuts, improved usability and accessibility, and we may expect further developments in the near future.

But there’s even more:

The new Site Health Status widget
The new Site Health Status widget

Now it’s your turn. What’s your take on WordPress 5.4? What changes and features do you enjoy the most? Let us know in the comments!

Save time, costs and maximize site performance with:

  • Instant help from WordPress hosting experts, 24/7.
  • Cloudflare Enterprise integration.
  • Global audience reach with 29 data centers worldwide.
  • Optimization with our built-in Application Performance Monitoring.

All of that and much more, in one plan with no long-term contracts, assisted migrations, and a 30-day-money-back-guarantee. Check out our plans or talk to sales to find the plan that’s right for you.