Introducing WordPress 5.4 (Blocks, Features, New APIs)

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:

• 11 February 2020: Beta 1
• 18 February 2020: Beta 2
• 25 February 2020: Beta 3
• 3 March 2020: RC 1
• 10 March 2020: RC 2
• 17 March 2020: RC 3
• 24 March 2020: RC 4
• 27 March 2020: RC 5
• 30 March 2020: Dry run for release of WordPress 5.4
• 31 March 2020: Release of WordPress 5.4 “Adderley”

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.

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.

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

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:

• Manually migrate any content with Social Icons: update to WordPress 5.4, load the post in the block editor and save it. Social Icons will be automatically migrated to the new version.
• Keep the Gutenberg plugin installed when updating to WordPress 5.4: the plugin provides backward compatibility and you shouldn’t experience any issue.

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.

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

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.

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).

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.

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.

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.

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.

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:

• Gradient background support for Buttons block (Gutenberg 6.7).
• Gradient background support for Cover block (Gutenberg 6.8).
• Text color support for Group blocks (Gutenberg 7.4 and 7.5): nested blocks can now inherit the text color from their parent Group block.
• Text and background color support for Columns block (Gutenberg 7.4 and 7.5).

Featured Images in the Latest Posts Block

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”.

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.

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.

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 = () => {
	useShortcut(

		'plugin/shortcut-test',

		useCallback(
			( 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:

add_theme_support(
	'editor-gradient-presets',
	array(
		array(
			'name'		=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',
			'slug'		=> 'cedetblue-chartreuse'
		),
		array(
			'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',
		),
		array(
			'name'		=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),
			'gradient'	=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',
			'slug'		=> 'darkmagenta-to-darkorchid',
		),
		array(
			'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',
		),
	)
);

• name: a meaningful label for the tooltip providing information about the gradient. This is particularly useful for screen readers and users who have difficulty distinguishing certain colors.
• gradient: CSS values for the gradient.
• slug: an identifier to generate CSS classes used in the block editor.

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.

• The legacy editor- class prefix has been removed from block-editor scripts and now developers should only use the block-editor- prefix.
• The edit-post-layout__content class has been removed from the DOM of the block editor.
• Several div wrappers have been removed from RichText and other blocks as redundant. This change brings significant performance improvement and simplifies the DOM tree, which should be appreciated by block and theme developers.
• Block paddings and negative margins have disappeared. Block styles should change accordingly.

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 } );

• namespace: matched against a block prefix.
• title: this is the label shown in the block inserter.
• icon: this is the icon shown with the title in the block inserter.

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' ] 
} );

• blockName: the name of the block (i.e. core/heading).
• variation: an object describing a variation for the block type.

• name: (string) the unique identifier of the variation.
• title: (string) the human-readable variation title.
• description: (string) a detailed description.
• : (WPIcon) an icon to display in the block inserter.
• [isDefault]: (boolean) whether the current variation is the default one. Defaults to false.
• [attributes]: (Object) values that override block attributes.
• [innerBlocks]: (Array[]) initial configuration of nested block.
• [example]: (Object) structured data for the block preview. Set to undefined to disable the preview.
• [scope]: (WPBlockVariationScope[]) The list of scopes where the variation is applicable. When not provided, it assumes all available scopes. Available options: block, inserter.

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:

• A menu to visually switch between edit and navigation mode (7.1)

• Added caption to Table block (7.1)

• Drag-and-Drop Images Into the Featured Image Box (7.1)

• Fixed block toolbar on mobile (7.1)

• Added image size selector to Gallery block (7.2)

• Added links to images in Media & Text block (7.2)

Features and Improvements for WordPress Developers

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

Our favorite changes include the following:

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.

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:

• wp-calendar-table for the table element.
• wp-calendar-nav for the nav element.
• wp-calendar-nav-prev for the previous month link, replacing #prev ID.
• wp-calendar-nav-next for the next month link, replacing #next ID.

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>
				<thead>
					<tr><!-- Day names --></tr>
				</thead>
				<tbody>
					<!-- Calendar cells -->
				</tbody>
			</table>
			<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>
			</nav>
		</div>
	</div>
</div>

Theme developers may want to change their stylesheets accordingly.

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():

• If a physical file exists, do nothing and let the server handle the request.
• Otherwise, serve a fallback icon (see below).

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

• If there’s an Icon Set in the Customizer, it redirects /favicon.ico to that specific icon.
• If there’s not an Icon Set, then it uses the WordPress logo (wp-admin/images/w-logo-blue.png) as a fallback option.

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

• The new is_favicon() function complements is_robots().
• do_favicon action complements do_robots and is triggered when the template loader determines a favicon request.
• do_favicon() function is hooked on the do_favicon action and complements do_robots().
• do_faviconico action complements do_robotstxt and allows developers to override the default behavior.

Read more about favicon handling.

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' );

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

• $item_id: the menu item ID (integer).
• $item: the menu item data object (object).
• $depth: the depth of the menu item (integer).
• $args: an object of menu item arguments (object).
• $id: the Navigation Menu ID (integer).

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.

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:

• Install the WordPress Beta Tester plugin and run the installation in the dashboard of an existing WordPress environment.
• Download and install the current Beta/RC manually. You can get the “nightly build“, which is created from the Subversion repository. If you’re looking for a specific WordPress version, either stable or development, you can check the Releases Category Archive.

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.

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 will now download and install the following package:

https://wordpress.org/nightly-builds/wordpress-latest.zip

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

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.

Summary

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:

• A Site Health status widget has been added to the dashboard, making it easier for the user to check their site’s health, security, and performance.
• Better focus management, easier keyboard navigation, and an easier-to-read Privacy Policy Guide improving accessibility on mobile and desktop.
• Several changes to the privacy tools simplifying UX when exporting personal data.

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!