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.

Version	Loading Time	KeyPress event (typing)
Gutenberg 6.6.0	4.7s	38.96ms
Gutenberg 6.5.0	4.68s	42.96ms
WordPress 5.2	5.69s	57.65ms

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

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:

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:

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

To disable the admin email verifications, you can use the following filter:

add_filter( 'admin_email_check_interval', '__return_false' );

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:

Date/Time Core Component Improvements

The Date/Time core component deals with everything that is related to date, time, and timezones in WordPress. As Andrey “Rarst” Savchenko explains:

Date/Time component relied on so–called “WordPress timestamp” — a sum of Unix timestamp with a time zone offset. This was causing many bugs and lack of interoperability with upstream PHP or any external systems. Inline documentation erroneously referred to these as Unix timestamps.

While it was impossible to completely remove WordPress timestamps without backward compatibility issues, the component code has been improved with several bug fixes, and inline documentation has been updated and corrected where needed.

Moreover, with the release of WordPress 5.3 we have access to several new API Date/Time functions:

• wp_timezone_string() – This function retrieves the site timezone as string. It might return PHP timezone string or a ±HH:MM offset.
• wp_timezone() – This function retrieves the site timezone as DateTimeZone object.
• wp_date() – This is a new function for date localization. It’s intended to replace date_i18n().
• current_datetime() – This function retrieves the current time as DateTimeImmutable object with the timezone from settings.
• get_post_datetime() – Retrieves post time DateTimeImmutable object.
• get_post_timestamp() – Retrieves post time as Unix timestamp.

All these functions are defined and documented in wp-includes/functions.php.

The usage of current_time(), get_post_time() and date_i18n() is now discouraged.

See also Date/Time component improvements in WordPress 5.3 and New functions to add to API on GitHub.

New aria-current Attribute

When a new page or post is published, its name appears in several menus and widgets. Before WordPress 5.3, many users wouldn’t have recognized that link and this could have been confusing especially for users with disabilities and/or screen reader users.

With the release of WordPress 5.3, a new aria-current="page" attribute is programmatically added to point out links to the same page and theme developers are encouraged to add specific styles to those links. This change affects the following core widgets:

• Recent Posts.
• Navigation Menu.
• Pages.
• Category.
• Archives.

Here is an example of usage:

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

New aria-label Attributes in Navigation Menus

“Landmarks provide a powerful way to identify the organization and structure of a web page” and allow theme developers to add support for keyboard navigation in web pages using landmark roles.

ARIA landmarks provide a context for web content and are particularly useful for assistive technology users.

Due to the importance of ARIA Landmarks for accessibility, WordPress 5.3 now adds support for aria-label attributes in posts and comments navigation.

Theme developers and designers can add ARIA landmarks to posts and comments navigation menus adding a new aria_label parameter to the following functions:

• _navigation_markup()
• get_the_post_navigation()
• get_the_posts_navigation()
• get_the_posts_pagination()
• get_the_comments_navigation()
• get_the_comments_pagination()
• the_post_navigation()
• the_posts_navigation()
• the_posts_pagination()
• the_comments_navigation()
• the_comments_pagination()

Read more on aria-label attributes in posts and comments navigation on Make WordPress Core.

Functions to Add UGC Value to rel Attributes in Links

Back in September 2019, Google announced two new attributes providing a way to identify the nature of links: rel="sponsored" and rel="ugc":

rel=”ugc”: UGC stands for User Generated Content, and the ugc attribute value is recommended for links within user generated content, such as comments and forum posts.

WordPress 5.3 adds support for rel="ugc" attribute in comments. This change has been implemented in a few hours and it’s interesting to see how quickly the development team reacted to Google’s announcement (see ticket #48022).

In addition, WordPress 5.3 introduces two new functions allowing developers to add nofollow and ugc values to rel attributes in links:

• wp_rel_callback() is used to add values to rel attributes to specified links, and replaces the now deprecated wp_rel_nofollow_callback() function.
  The function is defined in wp-includes/formatting.php:

  /**
  	 * Callback to add a rel attribute to HTML A element.
  	 *
  	 * Will remove already existing string before adding to prevent invalidating (X)HTML.
  	 *
  	 * @since 5.3.0
  	 *
  	 * @param array  $matches Single match.
  	 * @param string $rel     The rel attribute to add.
  	 * @return string HTML A element with the added rel attribute.
  	 */
  	function wp_rel_callback( $matches, $rel ) {}

• wp_rel_ugc() adds both nofollow and ugc values to rel attributes in links.
  The function is defined in wp-includes/formatting.php:

  /**
  		 * Adds `rel="nofollow ugc"` string to all HTML A elements in content.
  		 *
  		 * @since 5.3.0
  		 *
  		 * @param string $text Content that may contain HTML A elements.
  		 * @return string Converted content.
  		 */
  		function wp_rel_ugc( $text ) {
  			// This is a pre-save filter, so text is already escaped.
  			$text = stripslashes( $text );
  			$text = preg_replace_callback(
  				'|<a>|i',
  				function( $matches ) {
  					return wp_rel_callback( $matches, 'nofollow ugc' );
  				},
  				$text
  			);
  			return wp_slash( $text );
  		}

So, from now on, developers can add rel="nofollow ugc" attribute to links as follows:

$link = '<a href="https://kinsta.com/blog/wordpress-5-3/example.com">User generated link example</a>';
$ugc_link = wp_rel_ugc( $link );
echo $ugc_link;
// output: <a href="https://kinsta.com/blog/wordpress-5-3/example.com" rel="nofollow ugc">User generated link example</a>

The REST API in WordPress 5.3

WordPress 5.3 brings several changes and improvements to the REST API.

One of the most relevant changes is the support for 'object' and 'array' data types to register_meta functions.

With this enhancement, the REST API now natively supports complex metadata types. This enables us to use the API to perform schema-based validation and could simplify the client code interaction with complex values and ultimately allows developers to create complex meta-based blocks via REST API.

For a more in-depth view of this topic, see WP 5.3 Supports Object and Array Meta Types in the REST API

A second significant improvement affects the _fields parameter which allows to limit the fields included in the JSON objects returned from the REST API. See the following example:

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

Since WordPress 5.3, the _fields parameter can be used to filter the REST API response object by nested fields, so that we can ask for specific meta fields or properties within a complex object. We can use the _fields parameter as follows:

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

For a more comprehensive overview of the REST API improvements coming with WordPress 5.3, see The REST API in WordPress 5.3.

How to Update to WordPress 5.3

WordPress 5.3 was released on November 12, 2019. You can follow the instructions below on how to update your site.

Since every customer’s site is different, you should always utilize the standard staging environment Kinsta provides (or add on a new Premium Staging Environment if your existing staging is already in use). You can clone your live site in a matter of seconds and then test WordPress 5.3 with your existing theme and plugins to check for compatibility. You can of course also take a manual backup before updating your live site, just to be safe.

To update WordPress to 5.3 simply click on the updates icon in your WordPress admin dashboard. And click on the “Update Now” button. While your site is being updated, it will be in maintenance mode. As soon as your updates are complete, your site will return to normal.

As long as everything goes well with the update you should then see the “Welcome to WordPress 5.3” screen. And that’s it! Quick and easy.

After clicking around in the dashboard, you will also receive a message to update your database to the newest version. Simply click on the “Update WordPress Database” button and you’re good to go.

Troubleshoot Issues with WordPress Update

Whenever people update a major version of WordPress, there are always some that experience issues, and that is due to the thousands of different plugins and themes currently co-existing in the market. Here are a few ways to troubleshoot common issues.

• Your site might still be partially cached. You can resolve this by clearing the full page cache on your WordPress site.
• Try deactivating all your plugins to see if that fixes your issue. Then reactivate them one by one until you find which plugin might need an update from the developer.
• Try switching over to a default WordPress theme, such as Twenty Twenty. If this fixes your problem, you might want to reach out to your theme developer.
• Troubleshoot and diagnose JavaScript issues in your browser.

Summary

We’ve curated the most exciting features and improvements in WordPress 5.3.

With thirteen versions of the Gutenberg plugin merged into core, several improvements to the Site Health Tool, a brand new default theme, improvements in the admin interface, new functions and features for developers and theme designers, better support for PHP 7.4, and an incredible number of small changes, bug fixes, and deprecations, WordPress 5.3 sets an important milestone in the evolution of the CMS.

What are your favorite features/improvements? Did we miss anything important? Share your thoughts with us in the comments section.