What's new in WordPress 5.3 (New blocks New APIs admin User Interface)

WordPress 5.3 "Kirk" was first released on the 12th of November, 2019, and is now available to download.

What changed in WordPress 5.3?

This is a ton of incredible things, isn't it? Let's get our feet up and dig deeper into WordPress 5.3.

What's new in the Block Editor?

Improvements in overall performance are being observed also. This benchmark compares performance on a massive blog post (36,000 words in 1,000 blocks) using different versions of the Gutenberg plugin.

You might not be able to tell the difference in the loading times of ordinary posts. However, it's evident that there is an overall improvements in the performance of the editor.

It's difficult to create a complete listing of all the additions, changes and bug fix, so we selected those with the biggest impact on user/developer experience and grouped them in the following order:

•    Enhancements to the Editing Experience
•    Features for Theme Developers and Designers
•    Options for Block Developers

Improvements in the Editing Experience

The latest Group block allows for wide alignments and background colors This gives WordPress users plenty of freedom to create content.

In addition to in addition to the Group Block, in addition to the Group block we had the opportunity to look at 10 improvements in the Block Editor that will have an influence on how you are using the editor.

1. The Block Appender

Blocks for Groups and Columns now show an appender. Group Blocks as well as the Columns blocks now show a block appender when they are empty. Appenders are essentially gray area that has the plus symbol inside, which simplifies the user interface and makes the block more user-friendly.

2. Grouping Blocks by Group Interaction

You can now build Group blocks by 'group' interaction, meaning that it is possible to select multiple block and group them with a few clicks just. It is as simple as adding each block you require to your selection and click on Group on the ellipsis menu. Done!

3. Custom width columns

Columns block now supports sliding control. Columns Block has now been updated to include a slider control in Block settings allowing you to set a custom width for every column (in the future there could be more enhancements for the Columns block as we introduce the use of the adjustability control that is draggable).

4. A Layout Picker for Columns Blocks

An additional improvement to the Block of Columns within WordPress 5.3 includes the layout picker. It was added in the editor along with Gutenberg 6.0, this feature allows users to choose between a range of patterns (patterns) or simply skip the default layout. It speeds some of the editing process , and also making the block easier to navigate for non-technical users.

The layout picker is an implementation to the Block Pattern API that allows users to choose between a predefined selection of blocks to select from when adding a block. In addition to Blocks with Columns, in addition to the Columns block, it is possible to see examples of Block patterns in Table and Cover blocks. There is more information about Block Patterns API on GitHub. Block Patterns API here on GitHub.

5. Table Block Enhancements

The Block for tables has been improved with enhancements. It is now able to align text in columns, table header and footer as well as background colors.

6. Block Navigation Mode

Gutenberg 6.3 introduced the Navigation Mode to navigate between blocks with Tab or arrow keys without entering block content. Users are able to switch between Navigation Mode to Edit Mode and then back using Enter as well as Enter or. This feature is a great increase in usability, specifically with regard to screen readers.

7. The Motion was added to block changes and Rearrangements

Another improvement in usability is the introduction motion to stop changes the removal of objects, as well as changing the order. Matias Ventura provides a reason the reasons why this feature is important:

Consider the case of a list that contains a number of things that are being moved. The act of moving, reordering, etc., does not solely affect the object being affected but the rest of the set , specifically the item that it's "swapping spots" with. Reality conveys to us that in order to put something in the space of another, the two things must move. The changes in state for the entire group can be difficult to understand simply by changing the order immediately. It can take a while to adjust. Transitions and gesture based interactions generally help connect these two states in a way that makes the interaction (the "what was that just occurred") much easier to understand.

8. Reordering images in gallery inline Blocks

The Gallery block has been improved with inline image reordering. We can now rearrange photos in the gallery using the click of Moving image forward or Move images forward and reverse buttons, without having to open the media modal window.

9. New improvements in the Latest Posts Block

The settings panel for block now contains a section where the user can toggle on/off posting content. In the event that the Post Content feature is on and you want to choose between Excerpt or full post choices. In addition, the slider lets you to control excerpt length in the event that the Excerpt option is enabled.

This last change forms part of a larger strategy that focuses on overall UI enhancements. In the variations of "Latest Posts" Block, Mel Choyce states:

In preparation for working on template pages in Gutenberg We'll need a robust set of dynamic blocks that can be added to any post or page. The expansion of this block puts us in a in a position to handle more intricate block designs that are dynamic and global in the future.

Users should not have to be aware of how to write custom queries or understand how to include articles to their homepage. The Recent Posts block is an excellent beginning, however to become a fully functioning solution, it needs to support posts with more than title and dates.

10. The Lists Block Enhancements

Lists blocks have been updated to support shortcuts to indent and outdent starting value, as well as reverse order functionality for ordered lists.

Other Enhancements in the Block Editor

Due to the huge number of Gutenberg plugins merging into the Core, there are tons of enhancements, modifications and bug fixes that we cannot not even list in this article. Some additional enhancements and additions include:

• The Columns block has now been upgraded to allow the vertical alignment ( Gutenberg 5.4).
• The Media & Text block now allows the vertical alignment ( Gutenberg 5.5).
• The Button block has now been updated to include the option of linking to a target ( Gutenberg 6.2).
• The Separator block has now been updated to allow border color ( Gutenberg 6.3).
• Cover blocks can now be resized ( Gutenberg 6.4).
• A better experience with Typewriter, particularly helpful on mobile devices (Gutenberg 6.4).
• The Image block now has an circle-crop version (Gutenberg 6.4).
• The brand-new Social Links block has been added ( Gutenberg 6.5).
• The Gallery block has now support for gallery captions (Gutenberg 6.5).

Innovative Features for Theme Developers and Designers

WordPress 5.3 adds many features and improvements in Block Editor. Block Editor for theme developers and designers, too.

1. Inside Containers of Group Block

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 can result in unintended changes to how the page will look.

Thus, with themes that support large and full alignments, Block containers might require additional CSS in order in order to look exactly as you expect it to.

This is an example taken from the Make WordPress Core blog showing the best way to style blocks in order to stop this sort of problem:

// Apply entry-content styles on the group block's inside 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

Prior to WordPress 5.3 was released, styles inline were used to change the text block's alignment (Heading paragraph, paragraph, quote as well as Verse).

The high precision of inline styles could make it hard to modify the style of these blocks. But theme designers can now benefit from three new CSS classes that replace inline styles

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

Existing blocks will be changed and classes will be applied as soon as posts are stored and opened in the Editor for Blocks.

3. Gallery Block as well as Table Block Markup Update

The Blocks Gallery and Table are now enclosed in figures elements. Element styles change accordingly and the themes may be affected, and need to be updated. Here's the updated table block's markup:

 
 
  
 Center Right
 Center
 Right Center Right 
 Left Center Right
 Right Center Left
 Left Center Right
Left Center Right 

Learn more about classnames and additional themes-related updates on the WordPress Core blog. WordPress Core blog.

The Block Developer's Toolkit includes features for block developers.

WordPress 5.3 introduces improvements and changes to the Block APIs.

1. Register and Unregister Block Styles

Prior to 5.3, developers and designers required JavaScript to create and 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.

This register_block_style function generates a different style for the block. It takes two arguments

• the name of the block.
• A variety of properties with style.

The array may comprise the below variables:

• names: (required) a unique identifier for the design.
• label: (required) human-readable label.
• inline_style: (optional) a CSS code which registers the CSS class for the style.
• style_handle: (optional) a handle to an already registered style (the style handle is used to enqueue the style where it's needed).

We can register inline styles using something similar to 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 accessible in the Styles Settings section.

Instead of having to register an inline style, we could transfer a handle to a style that was registered previously:

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

This image illustrates 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. API Block Examples

WordPress 5.3 includes a brand new JS property that lets you review the chosen block within the library before including it in the contents.

It is possible to add support for this feature by defining the examples property of block settings as follows:

const blockSettings = 
 / ...  • 
 registerBlockType( name and setting );

Enhancements to The Site Health Component

1. Eliminated site health grading

In WordPress 5.2 the percentage score grade was shown in the upper right-hand corner of the Site Health status page. Some users expressed some concerns about the score score as they felt it was vague and unclear, as people could be aiming to achieve an absolute score of 100% over what's best for their site (read more in the ticket).

The tool shows how many tests a site has passedbut does not show the degree of "health". The percentage has been removed as well. The Site Health tool now shows the two states that might be more like warnings rather than exact indicators of a website's performance and security.

•    Needs to be enhanced  
•    Good  

2. Improved recovery emails

When a failure occurs, WordPress attempts to send an email with a message of recovery to the administrator of the website. However, the emails do not give us any information useful for diagnosing the issue as we're simply informed that something went wrong with our website.

Failure emails will include another section that begins with the following string:  When seeking help with this problem, you could be asked for specific information like:

Following information are given:

• WordPress version.
• PHP version.
• Version and current theme.
• The name and version of the plugin is what causes 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 Testing of the Health Status of the Site

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 for additional actions. Here is a great instance of its use (see ticket #47864):

A good example is hosting service providers. PHP extensions are not available therefore they need to create an active hyperlink for the PHP extension manager of their control panel.
  Maybe they were looking to make it clearer, they wanted to be more direct. PHP version test that recommends users update, they add in an ajax button that'll switch the PHP version to their liking on the spot.

The filter is accessible in PHP to run direct tests, and as JavaScript implementation for synchronous tests.

Improved Admin Experience

Alongside Site Health Tool, WordPress 5.3 adds a number of Admin UI features that are expected to greatly enhance the experience for users of the WordPress dashboard.

1. Enhanced Color Contrast

The contrast in colors has been improved as well as accessibility problems have been resolved.

2. Admin Email Verification

A admin verification email now triggers after the administrator hasn't been logged into for a period of period of. 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. The uploads are now being resumed

Large images that are uploaded from a smartphone won't break things in the middle of the process , as WordPress allows resuming uploads when they fail.

4. Image Rotation

Images have been correctly rotated when uploaded in accordance with EXIF orientation information.

A New and New Theme for default use 20 Twenty

Twenty Twenty has been built upon an existing free theme developed by the community Chaplin created by Anders Noren The theme is based on an open and free typeface that has a distinct personality: Inter by Rasmus Andersson.

Changes for WordPress Developers

WordPress 5.3 includes a variety of modifications and enhancements to WordPress developers. In addition to the numerous changes, we think these should be mentioned:

•    Date/Time Core Component Improvements
•    New aria-current Attribute
•    New ARIA-Label Attribute
•    Functions to add UGC Value to rel Attributes in Links
•    The REST API in WordPress 5.3

Improved Date/Time Core Components

The Date/Time core component deals with everything associated with time, dates and timezones within WordPress. As Andrey "Rarst" Savchenko explains:

The Date/Time component was based on " WordPress timestamp" -- a sum of Unix timestamps that had a time zone offset. It was the cause of many issues and incompatibility issues with the upstream PHP or any external systems. The documentation inline incorrectly referred to them as Unix timestamps.

It was difficult to eliminate completely WordPress timestamps with no problems with backward compatibility, the component's code has been improved with various bug fixes. Also, the on-line documentation has been updated and updated as needed.

Furthermore, as of this publication of WordPress 5.3 we have access to many new API functions for Date/Time:

• timezone_string wp_timezone() - This function will retrieve the timezone of your site as string. It could return a PHP timezone string , or +-HH:MM offset.
• wp_timezone() - This function retrieves the site timezone as a DateTimeZone object.
• wp_date() - This is a new function for date localization. It is intended to replace date_i18n().
• present_datetime() - This function is used to retrieve the current date as an immutable DateTime object with the setting of the timezone.
• get_post_datetime() - Retrieves post time DateTimeImmutable object.
• get_post_timestamp() - Retrieves the time of posting as Unix timestamp.

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

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

Check out Improvements to the Date/Time component within WordPress 5.3 and new functions that can be added to the API on GitHub.

New ARIA-current Attribute

Once a new page, or blog post is posted, its name appears in a variety of options and menus. Before WordPress 5.3, many users wouldn't have recognized that link which could be confusing especially for users who are disabled or screen reader users.

In the new version of WordPress 5.3, a new aria-current="page" attribute can be added to WordPress's program to point out pages that are linked to each other and theme designers are encouraged to apply particular styles to these links. This change affects the following core widgets:

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

Here's an example usage:

A[aria-current] CSS styles for the current link

New aria-label Attributes in Navigation Menus

" Landmarks provide a powerful way to identify the organization and structure of web pages" and allows theme creators to incorporate typing on websites by using markers.

  ARIA landmarks offer a context for web content and can be particularly helpful for those using assistive technology.  

Because of the significance of ARIA Landmarks for accessibility, WordPress 5.3 is now able to provide support for aria-label attributes to posts as well as comment navigation.

Theme designers and developers can add ARIA markers to post and the menus for comments by including a brand new aria_label parameter in the following ways:

•    _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 properties in posts as well as the navigation of comments on Making WordPress Core.

Features to add UGC Value to rel Attributes in Links

In September, Google announced two new attributes that allow you to identify the nature of hyperlinks: rel="sponsored" and rel="ugc":

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

WordPress 5.3 includes support for the rel="ugc" attribute within comments. The update was made within just a couple of hours and it's intriguing to see how quickly the development team reacted to Google's announcement (see ticket #48022).

In addition, WordPress 5.3 introduces two brand new features permitting developers to apply nofollow and UGC value in the rel attributes of links:

•    wp_rel_callback()   is used to add values are used to add values    Re   assigns attributes to linked sites, is a replacement for the obsolete    wp_rel_nofollow_callback()    function.
    The function is defined in    wp-includes/formatting.php   :

*Code >/**
* Callback to add the rel attribute of HTML A element. *
* Will remove any existing strings prior to making additions to avoid the invalidation of (X)HTML. *
 * @since 5.3.0
 *
 * @param array $matches Single match. * @param $rel string The rel attribute that is added to the element. * @return string HTML An element that is added to the rel attribute. */
 function callback wp_rel( $matches and the value of $rel ) 

•    wp_rel_ugc()   adds that both    Nofollow   and    Ugc   Values are    rel   attributes in links.
    The term "function" is described in    wp-includes/formatting.php   :

/**
 * adds `rel="nofollow ugc"string to all HTML A elements found in content. ** Since 5.3.0* @param string Text Content which may include HTML A elements. * @return string Converted content. */
function wp_rel_ugc( $text ) // / This is an automatic save filter, meaning that text already has been encrypted. $text = stripslashes( $text );
 $text = preg_replace_callback(
 '

So, from now on, developers can add rel="nofollow ugc" attribute to links according to the following:

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

The REST API in WordPress 5.3

WordPress 5.3 includes a number of updates and changes in REST API.

The most important modifications is the addition of objects and "array" types of data to register_meta functions.

With this enhancement, the REST API can now support the most complex metadata types. This enables us to use the API for schema-based validation, which could make interactions between client and code with the complex value and eventually allow developers to design complex meta-based blocks via REST API.

For a more in-depth view of this subject, refer to WP 5.3 This topic supports object and array Meta Types within the REST API.

A second significant improvement affects the _fields parameter, which lets you limit the fields contained in the JSON objects returned by the REST API. See the following example:

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

In WordPress 5.3, the field parameter is able to filter the response object of REST API with nested fields so that we can ask for specific meta fields or property within a complex object. The fields parameter in the following manner:

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

To get a fuller overview of the REST API enhancements coming to WordPress 5.3, see The REST API for WordPress 5.3.

How to update WordPress to WordPress 5.3

WordPress 5.3 has been released on November 12, 2019. Follow the steps below to upgrade your WordPress site.

As long as everything goes well with the update you should then be able to see that "Welcome to WordPress 5.3" screen. That's all there is to it! Easy and fast.

Once you've logged into the dashboard, you'll get a notification to update your database to the latest version. Just click"Update WordPress Database" or click on the "Update your WordPress Database" button and you're good to go.

Troubleshoot WordPress Issues WordPress Update

When people upgrade a major version of WordPress it is not uncommon to have certain issues that arise which is due to the countless themes and plugins that are currently on the market. Here are a few ways to solve common problems.

• Deactivate all your plugins to see if that fixes your issue. After that, reactivate them one after one until you determine which plugin might need an update from the developer.
• Troubleshoot and identify JavaScript issues within your browser.

Summary

We've curated the most exciting enhancements and features for WordPress 5.3.

With thirteen version of the Gutenberg plugin, it has been merged into the core, several improvements in the Site Health Tool, a completely new default theme, enhancements to the administration interface, new functions and features for developers and themes designers, improved compatibility with PHP 7.4 as well as many small adjustments, bug fixes and deprecations. WordPress 5.3 sets an important milestone in the evolution of this CMS.

What are your favorite features/improvements? Do you think we've missed something important? Tell us about your experiences in the comment section.

Cut down on time, expenses and increase site performance:

• Help is available immediately assistance from WordPress hosting experts, 24/7.
• Cloudflare Enterprise integration.
• The global reach of the audience is enhanced by 34 data centers worldwide.
• Optimization using our built-in Application Performance Monitoring.