Introduction:

The much-anticipated WordPress 6.3 “Lionel” update has emerged as the second significant release of the year. This version marks a milestone by merging 10 Gutenberg iterations into the WordPress core, ushering in an array of innovations such as synced patterns and style revisions. These refinements not only streamline the block editor’s workflow but also expand its creative potential. Alongside these enhancements, WordPress 6.3 introduces performance optimizations and targeted developer updates. These include a revamped database query caching framework and the introduction of the command palette API. Let’s embark on a comprehensive journey through the offerings of WordPress 6.3.

Site Editor Enhancements

The focal point of WordPress contributors’ efforts in this iteration is the Site Editor, with the goal of finalizing its suite of block-based customization features. As a result, WordPress 6.3 introduces an array of updates tailored to the editor. Let’s delve into these updates with precision.

Synced and Unsynced Patterns

Anchored in reusability, reusable blocks offer the capacity to be saved and replicated across various pages or posts. Notably, any modifications applied to a reusable block in one corner of the site ripple across the entirety of the website.

Meanwhile, block patterns are prefabricated assemblies of blocks. These patterns can be inserted into content and customized without impacting identical patterns deployed elsewhere.

Previously, the creation of block patterns within the Site Editor required the intervention of pattern management plugins or custom PHP files. However, WordPress 6.3 triggers a pivotal shift by amalgamating reusable blocks with the pattern system. This fusion paves the way for novel avenues of customization. The update presents two pattern variants: synced patterns, akin to reusable blocks, and unsynced patterns, mirroring conventional block patterns.

This evolution in the pattern system is poised to revolutionize pattern workflows. In WordPress 6.3, users can forge patterns directly within the Site Editor, much akin to crafting reusable blocks.

Here’s the step-by-step process for creating synced or unsynced patterns:

1. Customize a block or block group and select “Create pattern/reusable block” from the block toolbar menu.
2. A prompt appears, inviting you to name the pattern.
3. The “Synced” toggle dictates whether the pattern operates in sync or isolation. Engaging it results in a reusable block-like behavior; disabling it generates a standard block pattern.
4. Finalize the creation by clicking “Create.”

It’s noteworthy that WordPress 6.3 designates separate locations for storing synced and unsynced patterns. Synced patterns are accessible via the “Synced patterns” tab within the block inserter panel, whereas unsynced patterns find their place under the “My patterns” category.

Updated Navigation Sidebar

The Navigation Sidebar within the Site Editor undergoes a significant overhaul in WordPress 6.3. Now positioned on the left side of the screen, this expanded navigation hub makes its presence felt when you click the WordPress or site logo at the top-left corner.

In WordPress 6.3, the Navigation Sidebar takes a leap forward by offering a broader spectrum of options. This refined feature accelerates workflow by enabling seamless navigation and management of diverse components within the Site Editor.

The revamped Navigation Sidebar encompasses a set of fresh menus:

1. Navigation: This menu empowers you to observe and rearrange the links featured in your navigation block. This eradicates the need to navigate to the editor canvas to select the navigation block and access the block settings panel.
2. Styles: The “Styles” menu caters to theme style aficionados. Here, you can handpick and preview various style variations inherent to your theme. Additionally, it offers shortcuts to the style book and the global styles panel.
3. Pages: The “Pages” menu serves up an all-inclusive list of available website pages, including drafts. Clicking on any entry ushers you into the Site Editor for page customization.
4. Templates: This menu extends the functionality of its predecessor, showcasing available templates and facilitating the creation of new ones.
5. Patterns: Replacing the former “Template Parts” menu, the “Patterns” section proves a versatile repository. It houses template parts, as well as both synced and unsynced patterns.

Effortless Template Switching

An inspired feature within the Site Editor, the “Quick Switch to Template Editing” function, enables swift transitions between page editing and template enhancement. This functionality proves invaluable when you unearth layout-related nuances during page editing that warrant immediate attention.

Located in the page settings panel, the “Template” drop-down zone reveals the template currently in use. By selecting the “Edit template” button, users can seamlessly transition to refining the template.

It’s crucial to highlight that this capability is confined to the Site Editor; it remains inaccessible when editing via the page editor.

Command Palette

The WordPress 6.3 update brings forth an ingenious solution for navigation agility—the command palette. This palette presents an accelerated pathway to switching between templates, accessing specific panels, or initiating new posts or pages. By allowing users to search for desired panels or tasks, the command palette streamlines the user experience.

Positioned at the summit of the Site Editor interface, or accessible via the CTRL+K keyboard shortcut, the command palette proves a potent tool.

For instance, envision the need to seamlessly transition from editing the home template to a specific page. In this scenario, one simply enters the page name into the command palette and clicks on the relevant entry. This direct maneuver instantly transports the user to the intended page.

Style Revision

While the WordPress revision feature has traditionally thrived in the realm of content, WordPress 6.3 introduces a compelling expansion—the “style revision.” This addition injects the rollback feature into the design realm of the website.

The “Revisions” icon emerges on the global styles panel, opening the door to a comprehensive history of style alterations. Complete with timestamps and the identities of those responsible for changes, this feature illuminates the journey of style evolution.

Upon selecting a recorded style iteration, users can preview it on the editor canvas. The “Apply” button, nestled at the panel’s base, empowers users to seamlessly revert to any chosen style.

Distraction-Free Site Editing

The “distraction-free mode” makes a triumphant entrance into the Site Editor’s toolkit with WordPress 6.3. As a well-acknowledged asset for maintaining focus during content refinement, this feature initially debuted on the page and post editor interfaces. Its function is straightforward—by concealing the sidebar, top panel, and block toolbar, it nurtures an uncluttered interface.

For users still requiring the availability of panels, the “top toolbar” feature delivers a balanced approach. This attribute shifts the block toolbar to the upper panel of the editor, concurrently diminishing distractions.

In the spirit of continuous improvement, WordPress 6.3 takes this feature a step further. Unlike the previous approach, where activating the top toolbar added an extra layer, the block toolbar now seamlessly integrates into the top panel. This design innovation maximizes editor canvas space without compromising functionality.

Introduction of New Blocks

WordPress, true to its commitment to enriching customizability, presents a suite of new native blocks in version 6.3. These blocks empower users to infuse their content with captivating elements. Here’s an overview of the new arrivals:

Details Block

This versatile block comprises a header atop a collapsible nested block segment. It proves particularly advantageous for effectively showcasing extensive content such as code snippets, product specifics, or spoiler information. Comprising two distinct sections—the detail title and concealed block content—the details block seamlessly blends form and function.

Footnotes Block

For content necessitating supplementary annotations or citations, the Footnotes block arrives as a welcome addition. By selecting specific text and opting for “Footnote” within the block toolbar, users can introduce a footnote block at the content’s conclusion. This dedicated block accommodates citations or further elaborations, enhancing content clarity and depth.

Block Improvements

The evolution of blocks within WordPress 6.3 extends beyond new additions. This update introduces a series of enhancements aimed at refining block capabilities and user interactions.

Featured Image Aspect Ratio

The post featured image block assumes an additional layer of versatility with an integrated aspect ratio control. Accessible via the design tools, this feature offers eight aspect ratio choices, spanning portrait and landscape orientations. This control empowers users to tailor their featured images with precision, harmonizing visuals with content aesthetics.

Post Modified Date Variation

Empowering content creators with flexibility, the post date block gains a diverse array of options for showcasing the last modified date. Configurable through the settings panel, enabling the “Display last modified date” toggle prompts the system to highlight recent updates to a post. This innovation enables the inclusion of two distinct post date blocks within a template—one signifying the original post date, and the other spotlighting the latest modifications.

Cover Block Enhancements

Acknowledging the need for streamlined workflows, WordPress 6.3 introduces text design tools within the cover block. This enhancement allows users to seamlessly modify the color and typography of all text elements within the cover block. By mitigating the need for individual text block adjustments, this advancement optimizes efficiency.

Additionally, WordPress 6.3 streamlines the transformation process between the cover block and the media & text block. When users execute this transformation, all design customizations seamlessly transfer, obviating the need for redundant redesign efforts.

Dimensions Control

The dimensions control interface receives a makeover in WordPress 6.3, adopting small icons to represent settings such as top, bottom, left, and right. This visual enhancement fosters user-friendliness and intuitive control over dimensions.

Performance Enhancements and Developer Updates

Transitioning from user-facing features, we delve into the realm of back-end improvements. Each major WordPress release is characterized by performance refinements and updates tailored to developers. WordPress 6.3 upholds this tradition, unveiling noteworthy enhancements.

Dropped Support for PHP 5

Recognizing the diminishing prevalence of PHP 5.6—utilized by only 3.8% of monitored installations—the WordPress core team has opted to discontinue support for PHP 5. The minimum supported version is elevated to 7.0.0, aligning with the team’s practice of employing a 5% baseline to determine minimum PHP versions.

For websites running on PHP with WordPress 6.2, security updates will continue to be extended. However, users reliant on PHP 5.6 or earlier are strongly encouraged to transition to version 7.4 for improved performance and security. Detailed tutorials for transitioning PHP versions via cPanel are readily available for seamless guidance.

Command Palette API

A standout feature of WordPress 6.3 is the introduction of the command palette API—a boon for developers. This API empowers developers to integrate or remove commands seamlessly, enriching the command palette’s functionality.

The command palette API encompasses two command types: static and dynamic. These commands can be equipped with contextual properties, enhancing their versatility and utility.

Static Commands

Static commands are the simplest to integrate into the command palette. Developers can employ the wp.data.dispatch( wp.commands.store ).registerCommand action or the wp.commands.useCommand React hook to incorporate static commands.

Here’s an example of a static command registered using the wp.commands.useCommand hook:

wp.commands.useCommand( { 
  name: 'myplugin/my-command-name', 
  label: __( 'Add new post' ), 
  icon: plus, 
  callback: ({ close }) => { 
    document.location.href = 'post-new.php'; 
    close(); 
    }, 
} );

Dynamic Commands

Dynamic commands dynamically surface on the Command Palette list based on user inputs. Developers can harness command loaders such as useCommandLoader and usePageSearchCommandLoader to register dynamic commands.

For instance, consider the need to fluidly shift from editing the home template to a specific page. In this scenario, users input the page name into the command palette, instantly navigating to the desired page.

function usePageSearchCommandLoader( { search } ) {
  // Retrieving the pages for the "search" term
  const { records, isLoading } = useSelect(
    ( select ) => {
      const { getEntityRecords } = select( coreStore );
      const query = {
        search: !! search ? search : undefined,
        per_page: 10,
        orderby: search ? 'relevance' : 'date',
      };
      return {
        records: getEntityRecords( 'postType', 'page', query ),
        isLoading: ! select( coreStore ).hasFinishedResolution(
          'getEntityRecords',
          [ 'postType', 'page', query ]
        ),
      };
    },
    [ search ]
  );
  // Creating the command
  const commands = useMemo( () => {
    return ( records ?? [] ).slice( 0, 10 ).map( ( record ) => {
      return {
        name: record.title?.rendered + ' ' + record.id,
        label: record.title?.rendered
          ? record.title?.rendered
          : __( '(no title)' ),
        icon: icons[ postType ],
        callback: ( { close } ) => {
          const args = {
            postType,
            postId: record.id,
            ...extraArgs,
          };
          document.location = addQueryArgs( 'site-editor.php', args );
          close();
        },
      };
    } );
  }, [ records, history ] );
  return {
    commands,
    isLoading,
  };
}
useCommandLoader( {
  name: 'myplugin/page-search',
  hook: usePageSearchCommandLoader,
} );

Contextual Commands

Contextual commands, distinguished by their higher priority, consistently appear on the command palette list within specific contexts. Developers can associate commands with contexts such as “site-editor” or “site-editor-edit.” These designations ensure command visibility when users interact with the Site Editor under defined circumstances.

To implement a contextual command, developers include the relevant context property during command registration. For example:

wp.commands.useCommand( {
  name: 'myplugin/my-command-name',
  label: __( 'Add new post' ),
  icon: plus,
  callback: ({ close }) => {
    document.location.href = 'post-new.php';
    close();
  },
  context: ‘site-editor’,
} );

Caching Enhancements

Underpinning WordPress 6.3’s repertoire of enhancements are improvements within the core caching system. Noteworthy refinements include advancements in WP_User_Query caching and the introduction of new cache groups.

WP_User_Query Caching

The absence of database caching capabilities within the WP_User_Query class is rectified with WordPress 6.3. Aligning with other query classes, this update allows caching of query results. Subsequent identical queries source data directly from the cache, alleviating database query loads and bolstering overall site performance.

New Cache Groups

The introduction of query caching for WP_User_Query necessitates a corresponding shift in cache storage methodology. WordPress 6.3 introduces six new cache groups dedicated to various queries, including post, term, comment, network, site, and user queries. This refined approach enhances cache object control, permitting developers to set expiration times for specific cache groups. Additionally, the wp_cache_flush_group() function facilitates targeted clearing of cache groups.

Embrace WordPress 6.3

Having explored the myriad enhancements embedded within WordPress 6.3, it’s now time to ready your website for the update. To ensure a seamless transition, we recommend generating a backup and utilizing a staging environment to thoroughly test WordPress 6.3 with a replicated version of your site. This proactive approach identifies and addresses compatibility issues prior to impacting your live site. Should any critical errors emerge, dedicated troubleshooting within the staging environment is advised.