WordPress 6.3 Unwrapped: Discover What’s New and Exciting

Designed to elevate your styling capabilities to unprecedented heights, this advanced API empowers you with the ability to configure multiple CSS selectors, ensuring a seamless generation of global styles across your blocks. Notably, this can be achieved across three distinct levels: root, feature, and sub-feature.

• Root Selectors At the core of the Selectors API lies the root selector, your block’s principal CSS selector. Every block requires a primary CSS selector to orchestrate global style declarations. Should you not designate one through the Block Selectors API, rest assured that a default selector (in the form of .wp-block-) will be generated for you.
• Feature-level Selectors In the new version, API empowers you to target specific block features with unparalleled precision – be it borders, colors, typography, or other attributes. This facet enables you to bestow distinct styles upon various elements within your block. For instance, imagine applying color schemes to your block’s wrapper while refining typographic elements within an inner text element.
• Subfeature Selectors The Subfeature Selectors elevate your styling prowess to unparalleled heights. Now, individual styles associated with block features (e.g., background-color or border-radius) can be expressed through unique selectors. This proves invaluable when aiming to implement diverse styles within a single feature. Consider a scenario where the block’s typography necessitates font family at the wrapper level while specifying distinct text decoration and font size for inner elements.

This exciting feature takes center stage within the post and site editors, granting users swift access through keyboard shortcuts, namely ctrl + k or command + k. It offers two avenues to maximize command utilization: static and dynamic commands.

• Static Commands: Easily register static commands using the wp.data.dispatch( wp.commands.store ).registerCommand action or the wp.commands.useCommand React hook. With either approach, a command object is provided, equipped with a distinct name, a clear label, an icon, a callback function invoked upon command selection, and potentially, a context.
• Dynamic Commands: Dynamic commands, on the other hand, are enabled via “command loaders.” These prove invaluable when command availability hinges on user-input search terms or certain conditions.

The command palette’s versatility extends to contextual commands, ensuring priority visibility and a seamless user experience. These commands shine in specific contexts, such as navigating the site editor or editing a template. Currently, two key contexts have been implemented:

• Site-editor – While navigating the site editor with the sidebar visible.
• Site-editor-edit – When engaged in editing a document (template, template part, or page) within the site editor.
• And the journey doesn’t end here. As adoption grows, additional contexts will be seamlessly incorporated

To manipulate the command palette’s behavior, it is enriched with a host of selectors and actions through the WordPress Data API. These include:

• Retrieving registered commands and command loaders with selectors like getCommands and getCommandLoader.
• Checking whether the command palette is open via the isOpen selector.
• Programmatic control over opening and closing the command palette using the open and close actions.

The latest WordPress 6.3 update brings exciting enhancements to layout support, marking its graduation from experimental to stable. While the functionality remains consistent, the upgrade comes with a small change: when you’re adding block support for layout in your block.json, the syntax “layout” now replaces “_experimentalLayout.” Although the support for the “_experimentalLayout” syntax will still be retained for a transitional period, we strongly recommend that you seize the opportunity to elevate your custom blocks by transitioning to the rock-solid layout syntax.

Innovations in CSS Specificity for Enhanced Layouts:

When you offer something valuable in exchange for someone’s email (like a free trial, eBook, or exclusive demo), you’re not just collecting random email addresses. You’re attracting leads who are genuinely interested in what your software can do. This means the leads you gather are more likely to convert into paying clients.

Empowering Complex Block Markup with Classnames:

Building on the foundation laid in WordPress 6.2, the latest version integrated layout classnames into the block inner wrapper. While this aligns with the outer wrapper for most blocks, certain blocks (like the core Cover block) encompass multiple inner containers. With WordPress 6.3, a novel classname graces the inner wrapper of all blocks with layout, amalgamating the block classname with the layout classname.

Say Hello to the New Grid Layout:

Embrace innovation with the introduction of the all-new grid layout type, underpinned by the power of CSS Grid. This dynamic layout defaults to an auto-fill approach, complete with configurable column widths. For those seeking precise control, the columnCount property within the layout object allows you to establish a fixed number of columns.

Elevated Layout and Spacing in the Post Template Block:

Embrace innovation with the introduction of the all-new grid layout type, underpinned by the power of CSS Grid. This dynamic layout defaults to an auto-fill approach, complete with configurable column widths. For those seeking precise control, the columnCount property within the layout object allows you to establish a fixed number of columns.

Seamless Spacer Block Alignment with Parent Layouts:

Spacer blocks now seamlessly integrate with parent layout configurations, taking on the orientation of the parent layout, especially within flex-type layout blocks. While you can still manually set an orientation for Spacer blocks based on parent context, flex layouts grant priority to the flex orientation, ensuring consistent and harmonious designs.

The Social Icons block now offers the option to customize both the “Icon color” and “Icon background color” in WordPress 6.3. Prior to this version, the chosen colors were hardcoded as hex code values within the block, even if you selected a color from the theme palette defined in theme.json.

Now, with WordPress 6.3 release, the Social Icons block embraces CSS classes that seamlessly align with your chosen color values. These classes are an integral part of the WordPress ecosystem, ingeniously generated in harmony with the color palette outlined in your theme.json file. Their structure is straightforward:

has-[color_slug]-color

has-[color_slug]-background-color

It’s essential to note that these empowering classes won’t come into play when a user opts for a custom color. This dynamic integration ensures that your design retains its integrity and aligns seamlessly with your chosen color palette, making WordPress 6.3 the pinnacle of design control and cohesion.

In recognition of the diminishing traffic from Internet Explorer users and WordPress’ discontinuation of support for this outdated browser, certain default themes have taken proactive steps. By removing specific Internet Explorer-oriented scripts and styles, these themes are ensuring that the majority of users can enjoy a smoother and faster browsing journey.

Moreover, these optimizations extend to focus enhancement scripts that were previously tailored for Internet Explorer and older versions of Chrome. With the arrival of WordPress 6.3, themes like Twenty Thirteen and Twenty Fourteen have gracefully evolved, no longer incorporating these scripts in their functions.js files. Additionally, from Twenty Fifteen to Twenty Twenty-One, themes have been fine-tuned to neither enqueue nor print these scripts.

This strategic move not only aligns with modern web standards but also reflects our commitment to delivering a top-tier experience for every user. Embrace these enhancements as we usher in a new era of optimized performance and a richer online encounter.

WordPress 6.3 release brings forth an array of strategic enhancements that redefine how queries are cached within the WordPress ecosystem.

Elevating Cache Group Dynamics:

Diving into the heart of WordPress 6.3, a paradigm shift in cache group dynamics emerges. Previous versions of WordPress stored query results in cache groups aligned with their corresponding objects. However, the landscape has evolved, and WordPress 6.3 introduces a groundbreaking approach that offers developers unprecedented control and precision.

As the WPUserQuery class joins the cache hierarchy, a dynamic modification unfolds. The introduction of distinct cache groups tailored for queries becomes the cornerstone of this evolution. Developers now hold the reins to specify cache group expiration times, enabling the fine-tuning of cache duration. The innovative wpcacheflush_group() function stands ready for developers seeking tailored cache clearance. Flexibility extends even further, granting developers the ability to designate cache groups as non-persistent, if necessary. The newly introduced cache groups encompass:

• post-queries
• term-queries
• comment-queries
• network-queries (global cache group)
• site-queries (global cache group)
• user-queries (global cache group)

WordPress 6.3 introduces a significant improvement to the getpages()function. It now utilizes WPQuery internally, addressing a 13-year-old ticket (#12821). This update reduces complexity by offloading database queries and cache handling to WP_Query.

As a result, this eliminates redundancy and ensures that all filters within WPQuery apply to getpages(). Users employing filters like postsprequery or postsresults for customized WPQuery behavior, including data retrieval from alternative sources such as cache or other databases, will benefit. Additionally, a new filter named getpagesqueryargs has been added, allowing developers to modify parameters passed to WPQuery while maintaining compatibility with original arguments.

PHP Support

WordPress 6.3 no longer provides support for PHP 5.

The minimum supported PHP version has been raised to 7.0.0.

Wrap Up

WordPress 6.3 release represents a significant leap in the editing experience. The improvements are substantial, covering various new editing features in the site editor, a redesigned and versatile block pattern system, new blocks, improved performance, enhanced accessibility, and internationalization enhancements, among other improvements.

If you’re thinking about upgrading your WordPress site to leverage these remarkable advancements, our skilled team of WordPress professionals is here to offer seamless assistance and guidance. Embrace the capabilities of WordPress 6.3 and discover new possibilities for your online presence.

WordPress 6.3 introduces notable improvements aimed at enhancing load time performance for content containing images. The impact of these enhancements is particularly evident in the Largest Contentful Paint (LCP) metric, which gauges the time taken from the request initiation until the largest content element within the viewport is rendered.

Automated fetchpriority Support

WordPress 6.3 latest release, now includes the fetchpriority attribute, set to “high,” within the image tag it identifies as the “LCP image” – the image constituting the largest content within the viewport. This attribute instructs the browser to prioritize this image, boosting LCP performance by approximately 5-10%. For further context, refer to the initial proposal post.

Automated lazy-loading

A series of refinements and resolutions have been introduced to enhance the automatic management of lazy-loading using the loading attribute. This refinement process, initiated in WordPress 5.9 and continued in 6.2, culminates in comprehensive enhancements in WordPress 6.3. This meticulous approach ensures the more accurate identification of images where omission of the attribute is appropriate, thereby contributing to optimized performance. For deeper insights into the significance of not lazy-loading in-viewport images, especially the LCP image, in the context of performance, refer to the relevant WordPress 5.9 dev note post.