WordPress 6.3: What to Expect and How to Use New Features Effectively

WordPress 6.3 “Lionel” is the second major release of Phase 2 of the WordPress roadmap, and it’s coming with a lot of exciting new features and improvements.

If you’re a WordPress user, developer, or enthusiast, you’ll want to know what to expect and how to use the new features effectively.

Here we’re going to discuss new features and changes in WordPress 6.3, and how it will enhance your site editing experience.

According to W3Tech, 71.9% of all WordPress websites use the latest Version 6. WordPress is constantly evolving and improving, thanks to its open-source community of contributors and users. Let’s explore what’s new in WordPress 6.3?

When Is WordPress 6.3 Rolling Out?

The Beta version of WordPress 6.3 RC1 got ready for download and testing on July 19th, 2023. And this version is not ready for installation and running in your production environments. But you can continue testing it on a test server and site. The final version is likely to be released on 8th Aug 2023.

What’s New in WordPress 6.3

Although it is not released yet, the Beta version gives us a glimpse into what’s new in WordPress 6.3. And as you can imagine, WP developers have focused on enhancing the features related to Gutenberg.

Since its release in November 2018, Gutenberg has been the mainstay of almost all WordPress updates. So, that’s what the editors have tried to capitalize on in this update.

Let’s take a look.

Block Improvement

Blocks are at the heart of Gutenberg. Naturally, you will see a few notable changes/updates in the Blocks once WordPress 6.3 gets released.

You will see two new blocks in this version. They are:

1. Details: This new block comes with a title and collapsible content section. You can use the Details block to present extensive content in a compact manner. For example, you can use it to showcase code snippets, spoilers, and product specifications.

2. Footnotes: Another addition is the Footnotes block. You can use this block to add citations. Here’s how you can use it.

• Select the text you want to cite.
• Click the More option on the block toolbar.
• Select Footnote.
• You will see the block popup at the end of the content automatically.

Enhanced Navigation

As with any other major WP update, you will see considerable enhancements in the Site Editor. For starters, you will see the existing navigation sidebar expanded for easy use. The developers have tried to make the Editor more user-friendly and seamless by focusing on the following factors.

1. Navigation: Here, you will see the links available on your navigation block. While you can rearrange or even remove menu items here, you can add new links.

2. Styles: You may already have used the Revisions feature to undo the changes made to your posts and pages. Now, the same feature will be available in the Styles menu in the Site Editor.

This feature will let you see the changes made to your theme styles and undo them if needed. Here’s how:

• Open the Styles panel.
• Choose a style or block you want to edit.
• Save the changes.
• Click on the Revisions button.
• Then select Revision History.
• Switch between different versions.
• Click the Apply button to go back to a previous version.

 

 

 

3. Pages: With this feature, you can now easily select ‘Pages’ from the editor navigation menu. After clicking on this Menu, you can see the most recently edited pages. In other words, you can quickly resume your edits. Use the + button to add a new page. And more importantly, you can immediately edit it in the Site Editor.

4. Templates: This feature is just like the one in the current WordPress version. This is where you can find all available templates and edit the one you want. You can also create a new template here.

5. Patterns: The 6.3 versions will provide an improved way to manage Patterns. You can see all of them inside the editor. When you click on this option, you will see all the available patterns, including synced and unsynced Patterns.

Here are a few things you will need to remember:

a. Using Unsynced Patterns 

The unsynced patterns are standalone patterns. You can add them anytime you want. You can also make changes after adding them. And as they are unsynced patterns, these changes will not affect your original pattern.

b. Using Unsynced Patterns 

On the other hand, changing synced patterns will affect your original pattern. They are essentially reusable blocks. So, all your reusable blocks will appear here. Now, they will be called “Synced Patterns” instead.

What Can You Do?

• Use the + button to add/create new Patterns.
• Use the Manage All of My Patterns options to manage your custom patterns.
• Edit your custom-made patterns and reusable blocks as and when needed.

Command Tool

WordPress 6.3 will also come with a new Command Tool. It is an experimental Command Center in Gutenberg. You can use this tool to perform the desired actions quickly.

You can use it to:

• Navigate between templates.
• Open specific panels.
• Create a new post or page.

You can find this tool at the top of Site Editor. Or else, you can use the CTRL+K key to open the command tool. Once it is open, you can start typing to search for what you want.

To get the list of the available commands, you need to run wp.data.select( wp.commands.store ).getCommands() in the browser’s console.

Reduced Distraction in Editor

As mentioned before, the Site Editor is getting several upgrades. One of the best upgrades includes the Distraction-Free Mode. It was previously available only in the page and post editor for content creation.

But now, you can use it in the Site Editor too. When turned on, this mode will hide all side and top panels and disable the block toolbar. That, in turn, allows you to focus on your content creation.

That said, the top toolbar is also getting an upgrade. Instead of occupying more space, you will now see it in the single top panel.

Important Changes for WordPress Developers

WordPress 6.3 also brings a few changes and performance enhancements for WP developers. You can see several changes in this version. However, here are a few that you must consider.

Improvements in Image Loading

This is one of the most significant upgrades in the WordPress 6.3 version. In this version, the “fetchpriority” attribute with a value of "high" is assigned to the image to determine whether it is the LCP (Largest Contentful Pain) image.

As you may already know, LCP is the metric that measures the time a website takes to show the user the largest content on the screen. The “fetchpriority” attribute prioritizes the LCP image for loading even before the rest of the layout gets computed. In short, the images will load faster, which is the major factor for page speed optimization.

Another significant enhancement is automatically handling the lazy loading of images with the “loading” attribute. It was first introduced in WordPress 5.5. And in 6.3, all its residual issues have been fixed. This will improve the overall performance of your WordPress website.

In WordPress 6.3, a new function “wp_get_loading_optimization_attributes()” controls both the “fetchpriority” and the “loading” attributes. Right now, you can use both:

• “loading” with a value of "lazy"
• “fetchpriority” with a value of "high"

Support for HTML 5 “async” and “defer” Attributes

Both “async” and “defer” are HTML 5 attributes. They instruct a browser to download JavaScript without pausing HTML parsing. But they work differently.

Scripts with the “async” attribute will execute asynchronously as soon as they are loaded. The browser will pause HTML parsing once the script is loaded. On the other hand, scripts with the “defer” attribute will load only after the completion of HTML parsing.

So, what’s changed in WordPress 6.3?

You can use the “$in_footer” boolean parameter of the “wp_register_script()” or “wp_enqueue_script()” functions to register scripts with the “async” and “defer” attributes. With this parameter overloaded, it now accepts a new “$args” array parameter. This allows you to specify a loading strategy for your scripts.If you add $in_footer boolen parameter, it will place the script in wp_footer function.

For example, if you want to load a script asynchronously, without blocking the HTML parsing, you can use the “async” attribute:

You can use below function to load script with “async” attribute.

wp_register_script(
    'custom',
    '/path/to/custom.js',
    array(),
    '1.0.0',
    array(
        'strategy'  => 'async',
    )
)
Output <script async src="~/custom.js"></script>

This tells the browser to download the script in the background and execute it as soon as it is ready. However, this also means that the script may run before the DOM is fully loaded, or out of order with other scripts.

If you want to load a script deferentially, without blocking the HTML parsing, but also ensuring that it runs after the DOM is ready and in order with other scripts, you can use the “defer” attribute:

You can use below function to load script with “defer” attribute.

wp_register_script(
'custom',
'/path/to/custom.js',
array(),
'1.0.0',
array(
'in_footer' => true,
'strategy'  => 'defer'',
)
)
Output
<script defer src="~/custom.js"></script>

This tells the browser to download the script in the background and execute it only after the DOM is fully built. This is useful for scripts that depend on the DOM elements or other scripts.

With these changes, you can now prevent a script from getting loaded in an unexpected order.

Development Mode

WordPress 6.3 comes with a new Development Mode. You can use the new WP_DEVELOPMENT_MODE constant to enable this mode. This constant will take one of the following values.

• “core” – indicates a core development.
• “plugin” – indicates plugin development.
• “theme” – indicates theme development.
• “all” –indicates all three types of development.

And when you see an empty string, it indicates that the website is not used as a development environment. You can also check the current value of your WP_DEVELOPMENT_MODE in the Info panel of the Site Health tool.

Another alternative is to use a new “wp_in_development_mode()” to check if your website is in dev mode. And thanks to the “$mode” parameter, you can also check the type of your development mode. Also, remember that this development mode may affect some low-level aspects of WordPress behavior.

As you can imagine, this development mode is not useful in the production environment. Use it only in development installations.

Wrap Up

WordPress has always been consistent when it comes to releasing new updates. And WordPress 6.3 isn’t going to be a disappointment. Likely to release in August 2023, this update will make the Site Editor more user-friendly and enhance performance for developers.

However, if you want to save time and hassle, you can always rely on our White label WordPress Development Solution. We can help you create stunning WordPress websites that are fast, secure, and optimized for SEO. Get in touch!