What’s New in WordPress 5.3 (New Blocks, New APIs, Improved Admin UI)

WordPress 5.3 “Kirk” was officially released on November 12, 2019, and is available for download.

So what changed with WordPress 5.3?

First and foremost, a whopping number of releases of the Gutenberg plugin has been merged into core, from 5.4 to 6.6. This means a huge number of features and enhancements for both users and developers, as well as an important boost in performance.

But there’s much more than Gutenberg in WordPress 5.3. In fact, this release features several improvements related to the Site Health Tool, a brand new default theme (TwentyTwenty), enhancements in the Admin User Interface, better support for PHP 7.4, improved accessibility, and more.

That’s a lot of amazing stuff, right? So, let’s buckle up and dig deeper into WordPress 5.3.

What’s New With the Block Editor

Since it was first launched, the Block Editor has been regularly improved thanks to the commitment of contributors from all around the world. However, new releases are not merged into core as soon as they’re available.

With 5.3, thirteen releases of the Gutenberg plugin have been merged into core all at once. So, if you haven’t been using the Gutenberg plugin so far, and you haven’t regularly updated it over time, you’ll find a lot of enhancements and new features in the Block Editor with the release of WordPress 5.3.

Overall performance improvements have been reported as well. The following benchmark compares performances for a huge post (36,000 words/1,000 blocks) with different versions of the Gutenberg plugin.

You might not notice the difference in loading time with regular posts, but it’s quite clear the general improvement in the editor’s performance.

It would be hard to make a full list of all additions, changes, and bug fixes, so we selected those with the greatest impact on the user/developer experience and grouped them as follows:

• Improvements in the Editing Experience
• Features for Theme Developers and Designers
• Features for Block Developers

Improvements in the Editing Experience

If you haven’t installed the Gutenberg plugin before, you’ll find a brand new block: the Group block. Added to the editor with the release of Gutenberg 5.5, the Group block is an all-purpose container for other blocks allowing you to create advanced block templates to be included in any page of your WordPress website.

The new Group block supports wide alignments and background colors, giving WordPress users plenty of freedom when creating content.

Besides the Group block, we had a look at ten improvements in the Block Editor that should have a great impact on the way you are using the editor.

1. The Block Appender

The Group and Columns blocks now show a block appender on empty state. The appender is just a grey area with a plus sign inside that makes the UI clearer and improves the block usability.

2. Grouping Blocks by Group Interaction

You can now create Group blocks by ‘group’ interaction, meaning that you can select multiple blocks and group them with a few clicks only. You just need to add all the blocks you need to the selection, then click on Group in the ellipsis menu. Done!

3. Custom width Columns

The Columns block now supports a sliding control in Block settings allowing you to set a custom width for each column (in a future release, we may expect further improvements to the Columns block with the introduction of a draggable resize control).

4. A Layout Picker For Columns Blocks

An additional improvement to the Columns block in WordPress 5.3 is the layout picker. Added to the editor with Gutenberg 6.0, this feature allows users to choose from several pre-defined layouts (patterns) or skip to the default layout, speeding up a bit the editing process and making the block easier to use for less tech-savvy users.

The layout picker is an implementation of the Block Patterns API which provides a way to choose between a predefined set of options to pick from when adding a block. Apart from the Columns block, we can find examples of Block patterns in Table and Cover blocks. You can read more about the Block Patterns API on GitHub.

5. Table Block Improvements

The Table block has been enhanced with several new features. It now supports text alignments in columns, table header and footer, and background colors.

6. Block Navigation Mode

Gutenberg 6.3 introduced the Navigation Mode to navigate between blocks using Tab or arrow keys without going into block content. Users can switch from Navigation Mode to Edit Mode and back just by hitting Enter or Esc. This feature is a great improvement in usability, especially when it comes to screen readers.

7. Added Motion to Block Changes and Rearrangements

An additional improvement in usability comes with the introduction of motion to block changes, creation, removal, and reordering. Matías Ventura explains why this feature is relevant:

Consider the case of a list containing a set of items: the action of moving, reordering, and so on, doesn’t just affect the single item being acted on but the rest of the set as well, particularly the one it is “swapping places” with. Reality conveys to us that in order to put something in the place of something else both things have to move. The change in overall state for the entire group can be harder to grasp by just changing the order instantly. It takes a moment to reorient. Transitions and gesture based interactions generally help connect these two states in a way that makes the interaction (the “what just happened”) more immediately understandable.

8. Inline Image Reordering in Gallery Blocks

The Gallery block has been enhanced with inline image reordering. We can now rearrange images in the gallery with a simple click on Move image forward and Move image backward buttons without opening the media modal screen.

9. Improvements in Latest Posts Block

The Latest Posts block now supports excerpt and post content iteration (see pull #14627).

The block settings panel now contains a section where the user can toggle on/off post content. If Post Content is active, you can choose between Excerpt and Full Post options. Finally, a slider allows you to control excerpt length if Excerpt is checked.

This last change is part of a broader strategy that focuses on overall UI enhancements. In Iterations on “Latest Posts” Block, Mel Choyce states:

In preparation for working on page templates in Gutenberg, we’ll want a robust set of dynamic blocks that can be dropped into any post or page. Expanding this block will put us in a better position to tackle more complex dynamic or global blocks in the future.

Users shouldn’t have to know how to write custom queries or understand the loop to add some posts to their homepage. The Recent Posts block is a great start, but to be a fully functioning solution, it needs to support more than titles and post dates.

10. Lists Block Enhancements

Lists blocks now support indent/outdent shortcuts, start value, and reverse order support for ordered lists.

Additional Improvements to the Block Editor

Due to the huge number of Gutenberg plugin versions merging into the Core, there are tons of changes, improvements and bug fixes we couldn’t even mention here. Some additional enhancements and new features include:

• The Columns block now supports vertical alignment (Gutenberg 5.4).
• The Media & Text block now supports vertical alignment (Gutenberg 5.5).
• The Button block now supports a link target option (Gutenberg 6.2).
• The Separator block now supports border color (Gutenberg 6.3).
• Cover blocks are now resizable (Gutenberg 6.4).
• Improved Typewriter experience, especially useful on mobile (Gutenberg 6.4).
• The Image block now has a circle-crop variation (Gutenberg 6.4).
• A brand new Social Links block has been added (Gutenberg 6.5).
• The Gallery block now provides support for Gallery captions (Gutenberg 6.5).

Interesting Features for Theme Developers and Designers

WordPress 5.3 adds many features and improvements to the Block Editor for theme developers and designers as well.

Three main changes involve theme designers and are related to the CSS and HTML of several blocks.

1. Group Block Inner Container

The Group block now contains an inner container (wp-block-group__inner-container) that could extend beyond the main block container if not carefully designed. This could lead to unexpected effects on how the page will look.

Therefore, with themes supporting wide and full alignments styling, a Block container may require some additional CSS to make it appear as expected.

Here is an example from the Make WordPress Core blog showing how to style blocks to prevent this kind of issues:

// Apply entry-content styles to the group block’s inner container as well. 
.entry-content,
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;
}
 
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;
}
 
.alignfull {
	margin-left: -20vw;
	width: 100vw;
}
 
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;
}

2. New Class Names for Text Alignments

Before WordPress 5.3, inline styles were used to change the alignment of text blocks (Heading, Paragraph, Quote, and Verse).

The high specificity of inline styles could make it hard to customize the appearance of these blocks. But theme designers can now take advantage of three new CSS classes replacing inline styles:

• has-text-align-right
• has-text-align-center
• has-text-align-left

Existing blocks will be automatically converted and the classes applied as soon as posts are opened and saved in the Block Editor.

3. Gallery Block and Table Block Markup Update

Gallery and Table blocks are now wrapped in figure elements. Element styles change accordingly and themes could be affected and may require an update. Here is the new markup for a Table block:

<figure class="wp-block-table is-style-stripes">
	<table class="">
		<tbody>
			<tr>
				<td>Left</td>
				<td>Center</td>
				<td>Right</td>
			</tr>
		</tbody>
	</table>
</figure>

See more details about classnames and additional theme-related changes on the Make WordPress Core blog.

Features for Block Developers

WordPress 5.3 brings changes and improvements to the Block APIs.

1. Register and Unregister Block Styles

Before 5.3, developers and designers had to write some JavaScript to register/unregister styles.

With the release of WordPress 5.3, we can now take advantage of two new helper functions allowing to register and unregister block styles via PHP: register_block_style and unregister_block_style.

The register_block_style function registers a new style for the specified block. The function keeps two arguments:

• the name of the block.
• an array of style properties.

The array can include the following parameters:

• name: (required) a unique identifier for the style.
• label: (required) human-readable label.
• inline_style: (optional) a CSS code that registers the CSS class for the style.
• style_handle: (optional) a handle to an already registered style (the style handle enqueues the style where it’s needed).

We can register inline styles with something like the following code:

add_action( 'init', 'register_custom_block_style' ); 

function register_custom_block_style() {
	if( ! function_exists( 'register_block_style' ) ) return;

	register_block_style(
		'core/quote',
		array(
			'name'			=> 'blue-quote',
			'label'			=> __( 'Blue Quote' ),
			'inline_style'	=> '.wp-block-quote.is-style-blue-quote { color: blue; }',
		)
	);
};

The new style is now available in the Styles settings section.

Instead of registering an inline style, we can pass a handle to a previously registered style:

wp_register_style( 'custom-style', get_template_directory_uri() . '/custom-style.css' );
 
register_block_style(
	'core/quote',
	array(
		'name'			=> 'custom-quote',
		'label'			=> 'Custom Quote',
		'style_handle'	=> 'custom-style',
	)
);

The following image shows the blue quote registered in the example above.

To unregister a style previously registered on the server with register_block_style, we can use the function unregister_block_style.

We can use unregister_block_style as follows:

unregister_block_style( 'core/quote', 'custom-quote' );

2. Block Example API

WordPress 5.3 adds a new JS property allowing to preview the selected block from the library before adding it to the content.

We can add support for this feature by defining the example property in block settings as follows:

const blockSettings = {
	// ... 
 
	example: {
		attributes: { 
			content: __( 'Content of the block' )
		},
		innerBlocks: []
	} 
}
registerBlockType( name, settings );

Improvements in the Site Health Component

WordPress 5.2 introduced the Site Health tool to provide information about a website’s health and to help site admins to recover their websites when experiencing technical difficulties. With the release of WordPress 5.3 the Site Health tool gets several improvements and changes on both sides of the component.

1. Removed Site Health Grading

In WordPress 5.2, a percentage score grade was shown at the top of the Site Health status page. However, some people expressed some concerns about the score grade considering it ambiguous and confusing, because users could aim to reach a 100% score over what’s best for their website (read more in this ticket).

The indicator shows how many tests a site has passed, but not its level of “health”. For this reason, the percentage has been removed and the Site Health tool now shows one of two states that could be considered more like reminders than precise indicators of a website’s performance and security:

• Should be improved
• Good

2. Enhanced recovery Emails

When a failure occurs, WordPress attempts to send a recovery email to the site admin. Unfortunately, these emails don’t provide useful information for debugging, and we are just informed that something went wrong with our website.

To provide more useful information for restoring your WordPress website, WordPress 5.3 introduces the recovery_email_debug_info filter, which is an associated array of debugging information. The recovery email now includes the basic information that should help you troubleshoot your website or, at least, get help from others.

Failure emails will include an additional section starting with the following string:

When seeking help with this issue, you may be asked for some of the following information:

Then, the following information is provided:

• WordPress version.
• PHP version.
• Current theme and version.
• The name and version of the plugin causing the issue.

Information is intentionally reduced at a bare minimum to avoid confusion for the end-users, but developers can use recovery_email_debug_info filter to add more details when needed (see ticket #48090 for further information).

3. Filters for Completed Site Health Status Tests

The new site_status_test_result filter allows developers to filter the output of a finished status test to extend the result of a test.

Developers can also use this filter to provide additional actions. Here is a great example of usage (see ticket #47864):

An example might be a hosting provider, PHP extensions are missing, so they add in an active link to the PHP extension manager of their control panel.
Perhaps they wanted to be more direct, they wanted the PHP version check, which recommends the user update, they add in an ajax button that’ll switch the PHP version for them on the spot.

This filter is available both in PHP, for direct tests, and as JavaScript implementation, for asynchronous tests.

Admin Experience Enhancements

Besides Site Health Tool, WordPress 5.3 brings several Admin UI enhancements that should considerably improve the overall experience of the whole WordPress dashboard.

1. Improved Color Contrast

The color contrast has been improved and many accessibility issues have been fixed.

2. Admin Email Verification

An admin email verification now triggers after an admin hasn’t logged in a period of time. By default, this interval is set to six months, but developers can set a different interval using the admin_email_check_interval filter (see tickets #46349 and #48144).

3. Resuming Uploads

Uploading big images from a smartphone won’t break things in the middle of the process as WordPress now supports resuming uploads when they fail.

4. Image Rotation

Images are now correctly rotated on upload according to EXIF orientation metadata.

A Brand New Default Theme: Twenty Twenty

WordPress 5.3 comes with a brand new default theme: Twenty Twenty. It’s a minimal theme designed for flexibility, clarity, and readability, with a keen focus on the Block Editor.

Twenty Twenty has been built upon an existing free theme from the community, Chaplin by Andérs Noren, and features a free and open source typeface with strong personality: Inter by Rasmus Andersson.

You can read more about Twenty Twenty in our in-depth blog post: Twenty Twenty: An Introduction to the New Default WordPress Theme.

Changes for WordPress Developers

WordPress 5.3 comes with several changes and improvements for WordPress developers. Among the many changes, we think these are worth mentioning:

a[aria-current] {
	/* CSS styles for current link */
}

$link = 'User generated link example';
$ugc_link = wp_rel_ugc( $link );
echo $ugc_link;
// output: User generated link example

/wp/v2/posts?_fields=id,title,author

?_fields=meta.meta-key-1,meta.meta-key-2,meta.meta-key-3.nested-prop