What's different ? What's new? WordPress 5.3 (New blocks and APIs for admin User Interface)

Sep 9, 2022
WordPress 5.3

WordPress 5.3 "Kirk" was the first version that was released in December. It's now November 12th, 2019. It is now available to download.

What's new in WordPress 5.3?

There's a lot of great features in this version? Let's get our feet up and dig deeper to WordPress 5.3.

What's new in the Block Editor?

Improvements in performance across the board are visible in the same way. The benchmark is a measure of the how well the blog's largest article (36,000 words spread across 1,000 blocks) through various versions of Gutenberg. Gutenberg plugin.

You might not be able to tell any difference in loading times between regular posts. The fact is that there's been an overall increase in the speed of editors.

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's hard to compile an all-encompassing list of all changes, updates and bugs to corrections, which is why we chose the ones that had the most impact on users and developers, and they were then put in the following order:

Enhanced Editing Experience

The latest block for Group allows huge alignments and backgrounds that come in a range of shades . This gives WordPress users the ability to create their own materials.

In addition, to the Group Block and also when it is used in conjunction with Group Block, we had an opportunity to study 10 new features to the Block Editor. These enhancements are likely to affect how you utilize the editor.

1. The Block Appender

Blocks for groups and columns are now updated with an appender. Group Blocks as well as Blocks to Columns have been upgraded to provide an appender to the block in the event that they're not completely empty. Appenders are basically gray spaces with the symbol plus inside. This makes it easier for users to navigate and may help ease the process for users.

Group block in WordPress 5.3
The blank block in the Groups section of WordPress 5.3

2. Grouping Blocks via Group Interaction

There is a new way to make Blocks that combine with the group interaction' that means you're able to select multiple blocks and combine them in just a couple of clicks quick. It's as easy as adding each block that you require to your list and selecting the Group option in the menu that appears in the ellipsis. Done!

Group interaction
Interaction between groups may cause blockages.

3. Custom-width columns

The Columns block is now updated to support sliding control. Columns Block was upgraded to support an option of use a slide feature within the Block options, which allows the user to choose a custom size of each column (in the near future, we may add more enhancements to the Columns block once we've added an adjustability controlthat can be configured to adjust).

The Columns block in WordPress 5.3
The Columns block from WordPress 5.3

4. Layout Picker for Columns Blocks

Another enhancement made to one Block of Columns in the WordPress 5.3 is the layout selector. This feature was introduced in the Editor together with Gutenberg 6.0, this option lets users choose from the various layouts (patterns) or pick one of the layouts that is default. This speeds up editing and makes the block more easy to navigate even for those with no the technical expertise.

The Columns block layout picker
This is the Columns Block Block Layout Picker

The layout picker relies upon the Block Pattern API. Block Pattern API that allows users to pick from a predefined set of blocks for adding a block. Other than Blocks with Columns and Cover blocks and Blocks that have Columns and Cover Blocks, as well as Columns Blocks, you're capable of seeing some examples of Block patterns within Table as well as Cover Blocks. You can find more details about Block Patterns API on GitHub. Block Patterns API is able to be located here on GitHub.

The Cover block pattern
The pattern on the block which covers the cover

5. Table Block Enhancements

Blocks for table Table Block has been upgraded by adding new functions. Block for tables now allows users to place text in the columns, headers of tables and footer as well as the background color.

The new Table block
The Table block can be described as a new feature that offers a fantastic method of coordinating the text and headers , footers. It also lets you color coordinate your background

6. Block Navigation Mode

Gutenberg 6.3 introduced the Navigation Mode which allows users to switch between blocks using Tab or arrow keys with out having to enter the contents of every block. You can switch between the Navigation Mode inside Edit Mode before returning to Edit Mode by using Enter or typing. This can be a great improvement for the user's experience especially for those who use screen readers.

7. Motion was added to the block. Motion was added to the block. It was placed in the Rearrangements as well as Block Changes.

A different improvement in the user's experience is evident in one of the features that make it much easier for users to use: intro motion to keep modifications in place, which remove objects in addition to altering the order of objects. Matias Ventura provides the following explanation of the rationale behind for this crucial element:

list that contains a variety of items
Block motion
Block motion

Gallery block is now improved. Gallery block is improved now by incorporating the ability to rearrange images in the gallery within. You can rearrange images within the gallery by using buttons for moving images to the left or to move them in forward or reverse buttons, without having to launch the media modal window.

Gallery block
The new Gallery block

9. Its Latest Posts Block has been updated with fresh features. Recent Posts Block

Latest Posts widget
The Latest Posts widget supports excerpt and the content of posts

The settings panel for block contains a completely new section where users can either turn off or turn on publishing Content. If there is a function of posting Content has been turned on in your block, you'll be able to select from Excerpt or full post choices. The slider also allows you to modify the length of the excerpt when the Excerpt choice is selected.

This change is part of a bigger plan that is focused on general UI improvement. In the numerous variations in"Latest Posts" Block "Latest Posts" Block, Mel Choyce states:

In preparation for the creation of template pages for Gutenberg It will need a strong set of dynamic blocks that are able to be added to each blog post or page. As this block grows, it will put us in the position to handle more intricate blocks that are adaptable and universal in the coming decades.
The users should not need to be aware of how to create specific queries or determine the correct way to add articles to their websites. This recent Posts block could be an ideal starting point. For it to be a viable solution, it must allow posts to go beyond just title and date.

10. The Blocks on the Lists change

Lists blocks have been upgraded to include shortcuts to indent and outdent the starting point and reverse order options to build ordered lists.

List block
Lists with configurations that are laid out in Blocks for List

Additional Improvements of the Block Editor

The huge amount of Gutenberg plugins merging with the Core it's a lot of modifications as well as bug fixes and improvements that we aren't able to not even discuss in this article. Other updates and improvements include:

Innovative tools for theme developers and Designers

WordPress 5.3 comes with a range of new features and also improvements for blocks Editor. Block Editor is a tool for theme creators and designers, too.

1. In the containers of the 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 lead to unexpected changes to how your site looks.

Group block inner container
Container for Blocks that are contained in the Block Editor

For themes with large and full alignments, Block containers might require additional CSS for it to display precisely how you want it to.

Group block inner container
Blocks inside the Group container are located along the sides of the property.

This is an example taken from the blog Create WordPress Core which demonstrates how to build blocks that can be styled to avoid such a problem.

Apply entry-content styles on the container which houses the block, 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 name used for the alignment of text

Prior to WordPress 5.3 at the time it was launched Inline styles were employed to alter the position of text blocks (Heading paragraphs, paragraphs quoted as well as Verse).

The precision of styles within the block could make it challenging to change the style of blocks. However, theme creators are able to profit from three different CSS classes which can replace the style of inline.

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

The blocks currently in use will be updated and classes will be added when the post is archived and can be can be viewed in The Block Editor.

The Blocks Gallery as well as Table have been incorporated into Figures elements. The designs of the elements change and themes can be affectedand require a change. The current table block's marks

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

Get more information about the names of classes and related theme updates at WordPress Core blog. WordPress Core blog. WordPress Core blog.

Block Developer's Toolkit comes with specific features specifically designed to assist block developers.

WordPress 5.3 provides improvements as well as improvements to Block API. Block API.

1. Reregister and unregister Block Styles

Before 5.3 Developers and designers used to make use of JavaScript to design and register 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 block style register function produces a unique style of block. It's dependent on two variables

  • The block's name is.
  • There's a myriad of residences that have the most modern style.

The range can comprise the following factors:

  • Names: (required) a unique identifier for the type.
  • label: (required) human-readable label.
  • inline_style: (optional) a CSS code that is associated with the CSS class that is used to define the style.
  • style_handle: (optional) a handle that is tied to the style currently being used (the handle used for styling can be used to save the style at any time it's needed).

It is possible to register styles inline through a method 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 latest style is available by visiting the Styles Settings section.

Custom style in the Block Editor
A custom quote designed to fit into the Block Editor

Instead of needing to register an inline style we could change a handle back to the style that was previously recorded:

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 illustration below is an illustration of the blue quote which is included in the illustration above.

custom block style on the front end
A quote that has a customized design printed on the front

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 that allows you to review the chosen block in the library prior to making it available for your website's content.

The option can be included in your block by setting the"example" property of your block's configuration to:

blockSettings const = ... * registrationBlockType( Name and Setting );
Block Example API
API Block Examples

Improvements made to Site Health Component

1. Removed the health score for the website

When WordPress 5.2 came out, WordPress 5.2 the percent score was displayed in the upper-right corner in the Site Health status page. Some users were worried about the outcome and claimed that the result was unclear, and vague in that it was unclear if they wanted to achieve the overall score to 100 percent. It's not the perfect score for their site (read more about the details on the tickets).

Site Health Status page in WordPress 5.2
The page on health status of this website is a part of WordPress 5.2

The tool shows how many tests are passed by websites, however it's not able show the amount of "health". The percentage of "health" is gone too. The tool has been upgraded. It now displays the two states that appear more like warnings. However, they provide precise indications of a site's efficiency and security.

  •  Should be improved
  • Good
Site Health Status page in WordPress 5.3
Site Health Status page on WordPress 5.3

2. Better recovery emails

In the event of a glitch, WordPress attempts to send an email with an announcement of restoration to the administrator of the site. However, these emails aren't offering any useful information that can help us identify the problem , since we're aware that there's a glitch on our site.

Failure emails can contain another part, which begins with the words: If you are seeking help with the issue, you could receive messages such as:

The following details are provided:

  • WordPress version.
  • Version PHP.
  • Themes and variants.
  • The name and the version of the plugin is what could be 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 conducting full tests on 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 other actions. Here is a good instance of its use (see ticket #47864):

An excellent example of this is hosting service providers. PHP extensions aren't widely available so they must create an active connection to their PHP extension manager within their web-based control panels. It could be that they're seeking clarification or more clarity. PHP Version test, which advises users to update their PHP version and then add the link to an ajax, which alters the PHP version they are using quickly.

The filter can be accessed in PHP for direct testing in addition to a JavaScript version of the test which is synchronous.

An Improved Experience for Administrators

Alongside to Site Health Tool, WordPress 5.3 adds a number of administration UI tools that are likely to dramatically improve the user experience of The WordPress dashboard.

1. Enhanced Color Contrast

The contrast of colors has been increased in addition to accessibility issues have been addressed.

Posts Screen in WordPress 5.2
Screen that displays posts from WordPress 5.2
Posts Screen in WordPress 5.3
Posts Screens on WordPress 5.3

2. Admin Email Verification

Administrator's confirmation email is now delivered following an administrator's confirmation email will be issued in the event an administrator isn't allowed access to their administrator areas during the 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).

WordPress admin email verification
WordPress Administrator email verification

If you want to disable administration email verification feature to stop administrators from receiving verification emails to verify their email addresses, use this filter:

add_filter( 'admin_email_check_interval', '__return_false' );

3. The uploads have been re-established.

Large images that are captured using smartphones won't be damaged during the course of uploading since WordPress permits resumption of uploads in the event of an interruption.

4. Image Rotation

Images are correctly rotated to ensure that they've been uploaded according to EXIF orientation data.

New themes and a New Design for the default Use of 20 Twenty

Twenty Twenty WordPress theme
Twenty Twenty WordPress theme

Twenty Twenty is built using an open-source design developed by The Community Chaplin project by Anders Noren. The theme was built upon an open , free typeface, which has its own distinctive persona: Inter by Rasmus Andersson.

Modifications for WordPress Developers

WordPress 5.3 includes a vast array of changes and improvements for WordPress developers. Apart from the many improvements, the following are important to note:

Enhanced Date/Time Key Components

The primary component of Date/Time controls the entire aspect of time and times, dates and timezones that are used in WordPress. As Andrey "Rarst" Savchenko explains:

WordPress Timestamp

It was difficult to remove completely WordPress timestamps but it was possible to do so through reverse compatibility. The component's code is getting improved by making several changes in the fix. The online manual is regularly continuously updated.

Additionally, with the current version of WordPress 5.3 we have access to numerous new API features for Date/Time:

  • timezone_string timezone_string in wp_timezone() - This function can determine the timezone for your site using string format. It may return the PHP timezone string, or a +-HH:MM offset.
  • timezone WP() - This function is used to retrieve the timezone on your site in the form of an DateTimeZone object.
  • WP_DATE() - This is a brand new function that allows to localize dates. It is intended to take it to account for date_i18n().
  • Current_DateTime() - This function lets you find the current date by converting it into an unchangeable DateTime object, with the capability of setting 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 usage for "current_time"(), get_post_time() and date_i18n() is now prohibited.

Check out new features to use the Date/Time feature in WordPress 5.3 and more features are also available in the API through GitHub.

New ARIA-current Attribute

Once a new page, or blog post is published, it's name is displayed on a range of choices and menus. Prior to WordPress 5.3 it wasn't easy for users to be aware of this link. It could cause confusion for users, especially those with disabilities or use screen readers.

The new WordPress 5.3 version WordPress 5.3 is a major update to the aria-current="page" attribute is included in WordPress 5.3. This attribute allows the WordPress application to identify sites that are linked and the themes can be required to select specific style for hyperlinks. This new feature will affect the following widgets within WordPress the core of WordPress:

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

Here's an example:

A[aria-currentCSS styles that are applicable to the URL of the moment.

New ARIA-label attributes added to the Navigation Menus

" Landmarks provide the ability to clearly identify the organization and structure of websites" and permit theme developers to incorporate typing on web pages using markers.

ARIA landmarks offer a contextualization of web-based content. They aid those who utilize assistive technology.

Given the importance of ARIA Landmarks for accessibility, WordPress 5.3 has proven capable of supporting the aria-label attributes for posts and comments navigation.

Theme designers and developers can incorporate ARIA markers to post as well as menus to allow comments, with the all-new ARIA_label parameter in the following methods:

  • _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()

Find out more details regarding the features of ARIA-labels in blog posts, and also the method to browse the comments using the WordPress Core. WordPress Core.

The year of September has passed, Google has released two brand new attributes that let you identify the kind of hyperlinks they are: rel="sponsored" and rel="ugc":

rel="ugc"

WordPress 5.3 includes new features for users to add the rel="ugc" attribute within comments. This update became available in less than an hour and it's fascinating to look at how fast WordPress' WordPress design team was able to respond on this Google news (see ticket #48022).

In addition, WordPress 5.3 introduces two brand new possibilities which allow webmasters to use nofollow and UGC significance for hyperlinks. rel property for 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 including the rel attribute in HTML A element. Get rid of all string elements that are currently being used prior to making any changes to ensure that the content is not invalidated (X)HTML. * * @since 5.3.0 * * @param array $matches Single match. * @param $rel string attribute that is an attribute that is added to the element. * @return String HTML element included in an attribute known as rel. *or function callbacks function callback( matches and values of variable $rel )
  • WP_REL_UGC() adds that both Nofollow and Ugc values represent associated with rel attributes of the links. The term "function" is described in wp-includes/formatting.php :
The code >/** * adds `rel="nofollow ugc"string in the entirety of HTML A elements that are contained in the content. *Since 5.3.0*. @param Text Content, which could include HTML A elements. * @return string Converted content. */ / Function to make use of the function wp_rel_ugc( $text ) //It is an automatic save filter meaning that text has already been encrypted. $text = stripslashes( $text ); $text = preg_replace_callback( '

As of now, developers may include the rel="nofollow UGC" attribute to hyperlinks in line with these rules:

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

The REST API is included in WordPress 5.3

WordPress 5.3 contains a variety of improvements and enhancements for an API called REST.

Most significant is the addition to objects as well as "array" types of data into register_meta functions..

This improvement is a huge boost, this improvement means that REST API is now capable of dealing with the most difficult metadata types. This allows us to utilize the API to verify schemas. This can facilitate interaction between code and clients using complex values as well as allow developers to build intricate blocks using metadata through the REST API.

For a better knowledge about the topic, check out this WP 5.3 The subject is used with Meta Types that include Array and Object in the API REST.

The other major change comes from an improvement to the field parameter. This allows you to limit the types of fields which are included in JSON objects returned via REST API. Take a look at the following examples:

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

If you are using WordPress 5.3 The field parameter permits us to exclude the response object from the REST API by nesting fields. This means that we are in a position to ask for specific metadata fields or property inside the object's complex. This property field parameter is able to be utilized using the following methods:

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

For more information on features that are available with the REST API that are coming to WordPress 5.3 check out this post on the REST API feature that's accessible with WordPress 5.3.

What is the best way to update WordPress for WordPress 5.3? WordPress 5.3

WordPress 5.3 has been released on 12th of November, 2019. Take these steps to update your WordPress website.

Update to WordPress 5.2 in dashboard
The most current WordPress 5.2 version WordPress 5.2 is available. WordPress 5.2 is accessible on the dashboard

If all is fine after upgrading, you'll be capable of viewing your "Welcome to WordPress 5.3" screen. This is all there is to it! Simple and quick.

WordPress 5.3 welcome screen
WordPress 5.3 Screen of welcome

Once you've logged in to the dashboard, you'll be sent an the email to update your database. Be sure to update it to the latest version. You just need to click"Update WordPress Database" or hit"Update your WordPress Database" or click on the "Update the database of Your WordPress Database" button and you're good to go.

Database update required
It is necessary to keep the database updated. This is necessary.

Troubleshoot WordPress issues WordPress Update

If you're upgrading an older version of WordPress there's an abundance of certain issues that arise that result from the multitude of themes and plugins that are that are available. Below are some suggestions to resolve common issues.

  • Take out all plugins on your computer and check the effect it has on your issue. When you've solved the problem then enable each plugin each one by one until you are able to determine which of them requires to be updated by the creator.
  • Troubleshoot and identify JavaScript problems in your browser.

Summary

We've compiled the best improvements and features available for you in WordPress 5.3.

The 13th version of the Gutenberg plugin was included in the core. Additionally, it includes enhancements to its Site Health Tool, a entirely new default theme, changes to the admin interface as well as various new functions and features that are designed for designers and developers, along with improved speed thanks to PHP 7.4 as well as numerous small changes bugs, fixes and deletions. WordPress 5.3 is a significant step in the development of this CMS.

What are your favorite features/improvements? Do you feel you've missed something crucial? Tell us about your experiences by commenting.

Reduce time and expenses and increase the efficiency of your website

  • Support is readily available from WordPress experts in hosting all hours of the day.
  • Cloudflare Enterprise integration.
  • The audience's reach is enhanced by 34 data centers worldwide.
  • Optimization via the application's integrated Performance Monitoring.

This post was first published on this site

This post was first seen on this site

This post was first seen on here