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

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

What has changed with WordPress 5.3?

There are a lot of awesome things, isn't it? Let's get our feet up and dig deeper to WordPress 5.3.

What's something new with the Block Editor?

Improvements in overall performance are observed also. This benchmark measures performance of the largest blog article (36,000 words in 1,000 blocks) using different versions of Gutenberg. Gutenberg plugin.

It's possible that you won't be able discern the differences in the loading times of ordinary postings. It's clear that there are overall increase in the speed of editors.

It's not easy to make an exhaustive list of all modifications, updates, and bug fix, so we picked the ones that have the greatest impact on developer/user experience and grouped them in the order below:

•       Enhancements to the Editing Experience
•       Features for designers and theme developers
•       Optional Block Developers

Improvements in the Editing Experience

The latest Group block allows for large alignments and background colors . This provides WordPress users the freedom to create material.

In addition to in addition to Group Block, as well as in conjunction with the Group block we were given 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 have been updated to show an appender. Group Blocks and Columns blocks are now able to display an appender for the block in the event that they're not empty. Appenders are essentially gray area with the symbol plus inside. This simplifies the interface of the user and helps to make the block easier for users.

2. Grouping Blocks via Group Interaction

Now you can create Blocks that are group by using the 'group interaction which means it's possible to select multiple blocks and group them with only a few clicks simply. It's as simple as adding every block that you need to your list then click Group within the menu that appears in the ellipsis. Done!

3. Custom-width columns

Columns block has now been updated to support sliding control. Columns Block is now updated to add the slide control in Block settings allowing you to set a custom size for each column (in the future , there may further enhancements made to the Columns block once we have introduced the an adjustability control which can be adjusted).

4. Layout Picker to Columns Blocks

Another improvement made to the Block of Columns within WordPress 5.3 is the layout picker. This feature was included within the editor alongside Gutenberg 6.0, this option lets users choose from a wide range of patterns (patterns) or to simply choose using the standard layout. It speed up editing processes, while it also makes the block more easy to navigate for non-technical users.

The layout picker implements of Block Pattern API. Block Pattern API which allows users to choose between a predefined selection of blocks to select from for adding a block. Apart from Blocks with Columns and Cover blocks, as well as Blocks with Columns, in addition to Columns block, it's possible to view some examples of Block patterns within Table and Cover blocks. You can find more details regarding Block Patterns API on GitHub. Block Patterns API can be found here at GitHub.

5. Table Block Enhancements

The Block for tables has been enhanced with improvements. It now has the ability to align text in columns, table header and footer and also background colors.

6. Block Navigation Mode

Gutenberg 6.3 introduced the Navigation Mode that allows users to move between blocks by using tab and arrow keys, without having to input the block's content. Users can toggle between Navigation Mode in Edit Mode before returning to Edit Mode by using Enter and entering or. This feature is a great improvement in user-friendliness, particularly for screen readers.

7. The Motion was added to block changes and Rearrangements

Another enhancement in user-friendliness is the introduction motion to stop changes that remove objects in addition to changing the sequence of objects. Matias Ventura provides the following explanation for the reasons why this feature is important:

list that contains many items

8. Reordering gallery images on inline Blocks

The Gallery block is now improved by incorporating the ability to reorder images in the gallery inline. We can now rearrange photos in the gallery using the click of Moving image to the right or move images in the forward direction and reverse buttons without needing to open the media modal window.

9. The Latest Posts Block has been updated with new features. Latest Posts Block

The settings panel for block has a new section in which users can switch off or on the posting of content. If you have the post Content function is turned on, and you wish to select between Excerpt or complete post selections. In addition, the slider allows you to alter the excerpt length in the case that the Excerpt option is selected.

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

In preparation for working on template pages in Gutenberg It will require a strong set of dynamic blocks that are able to be added to every page or post. The growth of this block will put us in a position to handle more intricate block designs that are both dynamic and universal in the coming years.

Users should not have to know the best way to create custom queries or understand the best way to add articles to their website. This block of Recent Posts block is an good start. However, to become a fully functioning solution, it needs to allow posts to be more than just title and date.

10. The Blocks on the Lists Changes

Lists blocks have been upgraded to include shortcuts for indent and outdent the starting point in addition to reverse order capabilities to create ordered lists.

Other Enhancements in the Block Editor

Because of the sheer number of Gutenberg plugins merging into the Core There are a myriad of modifications, enhancements and bug fixes we can't even mention in this article. Other enhancements and updates include:

• The Columns block is now updated to permit horizontal alignment ( Gutenberg 5.4).
• The Media & Text block now permits vertical align ( Gutenberg 5.5).
• The Button block has now been upgraded to offer the option of linking to an object ( Gutenberg 6.2).
• The Separator block is now been modified to permit border color ( Gutenberg 6.3).
• Blocks for cover can be adjusted in size ( Gutenberg 6.4).
• Better experience using Typewriter especially useful on smartphones (Gutenberg 6.4).
• The Image block has an circle-crop version (Gutenberg 6.4).
• The all-new Social Links block has been included ( Gutenberg 6.5).
• The Gallery block is now capability for gallery captions (Gutenberg 6.5).

Innovative Tools for Theme Developers as well as Designers

WordPress 5.3 introduces a number of new features as well as improvement to Block Editor. Block Editor for theme developers and designers, too.

1. Inside the 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. It could result in unintentional changes to how your page appears.

Therefore, for themes that support large and full alignments, Block containers may require extra CSS to allow it to appear exactly how you'd like them to.

This is an example of the Make WordPress Core blog showing how to best create blocks that are styled to prevent this type of issue:

Apply styles for entry-content to the block's inner container too. .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 name for alignments of text

Prior to WordPress 5.3 when it was launched, styles inline were used to modify the text block's alignment (Heading paragraphs, paragraphs quote as well as Verse).

The high precision of inline styles could make it hard to modify the style of the blocks. However, theme developers can profit from three different CSS classes which can replace inline styles

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

The blocks that exist will be updated and classes will be applied when posts are archived and viewed within the Block Editor.

3. Gallery Block along with 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. This is the table block's updated markings:

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

Find out more information about class names and related themes updates on the WordPress Core blog. WordPress Core blog.

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

WordPress 5.3 introduces enhancements as well as changes to the Block APIs.

1. Register and Unregister Block Styles

Prior to 5.3 Designers and developers had to use 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 appearance for the block. It requires two arguments

• the name of the block.
• There are a variety of homes that feature the latest design.

The array may comprise these variables:

• Names: (required) a unique identifier of the design.
• label: (required) human-readable label.
• inline_style: (optional) a CSS code which is registered with the CSS class used for the style.
• style_handle: (optional) a handle that is registered to an existing style (the style handle is used to queue the style whenever it's needed).

We can register inline styles by using something like the code below:

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 updated style is accessible via the Styles Settings section.

Instead of needing to register an inline style, we could change a handle into an existing style 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 illustration is a representation of the blue quotation that has been 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 features a modern JS property, which allows you to review the chosen block in the library prior to adding it to the content.

You can add the feature to your block by setting the example property of the block configurations as follows:

const blockSettings = ... * registerBlockType( Name and Setting );

Improvements to the Site Health Component

1. Eliminated site health grading

With WordPress 5.2 the percent score was displayed in the upper-right area on the Site Health status page. There were some users who expressed concerns about the score score as they felt it was unclear and vague in that people might be trying to get an overall score of 100 percent, which is not the ideal score for their website (read more details in the tickets).

The tool shows how many tests a site has passedbut doesn't show the level of "health". This percentage has been eliminated as well. The Site Health tool now shows the two states which could seem more like warnings as precise indicators of a website's efficiency and security.

• Needs to be enhanced
• Good

2. Improved recovery emails

If a problem occurs, WordPress attempts to send an email with an announcement of recovery to the admin of the website. However, the emails do not give us any useful information to help us diagnose the problem since we're informed that something went wrong with our website.

Failure emails may include a second part that starts with the text: If you are seeking assistance in this issue You may receive specific details like:

The following information is provided:

• WordPress version.
• PHP version.
• Versions and current themes.
• 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 Full Tests 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 may also utilize this filter to perform further actions. Here is a great instance of its use (see ticket #47864):

One good example is the hosting providers. PHP extensions aren't available, therefore they need to create an active link for their PHP extension manager on their management panel. It could be that they're trying for clarity or more clear. PHP version test that recommends users update, they add the button in an ajax that will alter the PHP version they like right on the spot.

The filter is accessible within PHP for direct testing in addition to a JavaScript implementation of synchronous tests.

A Better Experience for Admins

In addition to the Site Health Tool, WordPress 5.3 adds a number of Admin UI features that are likely to significantly improve the experience for users of the WordPress dashboard.

1. Enhanced Color Contrast

The color contrast has been increased along with accessibility problems have been resolved.

2. Admin Email Verification

The administrator's confirmation email is now sent out after an administrator hasn't had access to the admin area for the duration 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 administration email verification to prevent admin email verifications, use this filter:

add_filter( 'admin_email_check_interval', '__return_false' );

3. The uploads have been restarted

Large images that are taken from smartphones won't break things when they're in the middle of the upload process, since WordPress allows for resumption of uploads in the event of failure.

4. Image Rotation

Images have been properly rotated to ensure that they are uploaded in compliance with EXIF orientation information.

A New Theme and a New Design for default use 20 Twenty

Twenty Twenty has been built from an open-source theme that was developed in The community Chaplin developed by Anders Noren. The theme is built on an open and free typeface with its own distinct persona: Inter by Rasmus Andersson.

Modifications to WordPress Developers

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

•       The Date/Time Component Improvements
•       New ARIA-current Attribute
•       New ARIA-Label Attribute
•       Functions for adding UGC value to rel attributes in links
•       A REST API of WordPress 5.3

Improved Date/Time Essential Components

The core component for Date/Time is responsible for everything related to timing, dates, and timezones in WordPress. As Andrey "Rarst" Savchenko explains:

WordPress timestamp

It was difficult to eliminate entirely WordPress timestamps, but it was possible in backward compatibility. The component's code has been enhanced with various bug fixes. Also, the on-line documentation is being updated when necessary.

Additionally, with this publication of WordPress 5.3 we have access to many new API features for Date/Time:

• timezone_string wp_timezone() - This function can retrieve the timezone of your site as strings. It can return an PHP timezone string , or +-HH:MM offset.
• timezone wp() - This function is used to retrieve the timezone of your website as a DateTimeZone object.
• wp_date() - This is a brand new function that allows date localization. It is intended to take over date_i18n().
• current_datetime() - This function allows you to get the date of the present in an immutable DateTime object with the ability to set the timezone.
• get_post_datetime() - Retrieves post time DateTimeImmutable object.
• obtain_post_timestamp() - Retrieves the posting time as Unix timestamp.

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

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

Check out enhancements to the Date/Time component in WordPress 5.3 and new features that are integrated into the API via GitHub.

New ARIA-current Attribute

Once a new page, or blog post is posted it's name is displayed on a range of choices and menus. Prior to WordPress 5.3 it was not possible for many users to have recognized that link that could cause confusion, especially those who have disabilities or screen reader users.

In the new WordPress 5.3 version WordPress 5.3, a new aria-current="page" attribute is added to the WordPress software to point out websites that have been linked and theme designers are encouraged to use specific styles for the hyperlinks. The change will affect the following core widgets:

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

Here's an example:

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

New ARIA-label Attributes for the Navigation Menus

" Landmarks provide a powerful way to identify the organization and structure of web pages" and allow theme designers to incorporate typing on sites with markers.

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

Due to the importance in the importance of ARIA Landmarks for accessibility, WordPress 5.3 has been able to provide support for the aria-label attributes for posts as well as comment navigation.

Theme designers and developers can incorporate ARIA markers for posting and 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()

Learn more about the ARIA-label properties of posts as well as the navigation of comments on Making WordPress Core.

Options to increase UGC value to rel attributes in Links

In September of this year, Google released two new attributes that let you identify the nature of hyperlinks: rel="sponsored" and rel="ugc":

rel="ugc"

WordPress 5.3 adds features for the rel="ugc" attribute within comments. This update was released in less than an hour and it's fascinating to observe how fast the WordPress development team was able to react to the Google announcement (see ticket #48022).

Additionally, WordPress 5.3 introduces two completely new options permitting developers to apply nofollow as well as UGC value to links. rel properties of hyperlinks:

• 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 for adding the rel attribute to HTML A element. * * Remove all strings that are already in use before making any additions to avoid the invalidation of (X)HTML. * * @since 5.3.0 * * @param array $matches Single match. * @param string $rel The rel attribute that is added to the element. * @return string HTML An element included in an attribute called rel. */ function callbacks function callback( $matches as well as the value of $rel )

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

/** * will add `rel="nofollow ugc"string to all HTML A elements that are found within content. ** Since 5.3.0* @param text Content that might contain HTML A elements. * @return string Converted content. */ / function to wp_rel_ugc( $text ) // / This is an automatic save filter, meaning that text already has been encrypted. $text = stripslashes( $text ); $text = preg_replace_callback( '

As of now developers will be able to add rel="nofollow ugc" attribute to links as per the following rules:

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

The REST API is available in WordPress 5.3

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

The biggest change is the addition to objects as well as "array" types of data into register_meta functions..

Thanks to this improvement, the REST API will now be able to handle the most complex metadata types. This enables us to use the API to validate schemas, which could make interactions between code and client with the complex value and ultimately enable developers to create complex blocks based on meta data using the REST API.

To get a deeper understanding of the subject, refer to the WP 5.3 This topic is compatible with Meta Types of Array and Object in the REST API.

The second major improvement is the _fields parameter. It lets you limit the types of fields that are contained in JSON objects returned by the REST API. Check out the following examples:

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

When using in WordPress 5.3 , the field parameter is able to filter the response object of REST API with nested fields so that we are able to request particular metadata fields or properties inside an object that is complex. The fields parameter is used in the following method:

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

For a more comprehensive outline about the REST API features being added to WordPress 5.3 check out the REST API for WordPress 5.3.

How to update WordPress with WordPress 5.3? WordPress 5.3

WordPress 5.3 was released on the 12th of November, 2019. Follow these steps to upgrade your WordPress website.

As long as everything goes good with the update, you should then be able to view the "Welcome to WordPress 5.3" screen. That's all there is to it! Simple and quick.

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

Troubleshoot WordPress Problems WordPress Update

If you are upgrading a significant version of WordPress it's common to have certain issues that arise which is because of the many themes and plug-ins available. Here are a few ways to resolve common issues.

• Remove all plugins from your system to check if it fixes your issue. Once you have fixed the issue, activate them one after one until you are able to determine which plugin might need an update from the developers.
• Troubleshoot and determine JavaScript problems in your browser.

Summary

We've selected the most thrilling improvements and new features available for WordPress 5.3.

The thirteenth version of the Gutenberg plugin, it's been integrated in the core. It also includes improvements in it's Site Health Tool, a completely new default theme, improvements to the administration interface as well as new features and functions for designers and developers, improved performance with PHP 7.4 and many tiny adjustments, bug fixes and deprecations. WordPress 5.3 marks a major stage in the development of the CMS.

What are your favorite features/improvements? Have you noticed that we've overlooked something important? Tell us about your experiences by leaving a comment.

Reduce time and costs and improve website performance

• Support is readily available from WordPress hosting experts, 24/7.
• Cloudflare Enterprise integration.
• The reach of the audience is enhanced by 34 data centers worldwide.
• Optimization with the integrated Application Performance Monitoring.

This post was first seen on here