Introducing WordPress 6.3 “Lionel,” the year’s second major update that merges 10 Gutenberg versions into the core. This infusion brings synced patterns, style revision, and a wealth of enhancements to the block editor’s workflow and customization potential.
Underneath WordPress 6.3, performance boosts and developer-focused updates shine. A revamped database query caching system boosts speed, while the command palette API empowers developers.
Get ready to explore the dynamic landscape of WordPress 6.3 as we uncover its exciting features and improvements. From blocks to speed, it is a release with something for everyone.
Let’s dive in!
WordPress 6.3 Major Update: Enhancements In The Site Editor
In this version, WordPress contributors are focused on completing the site editor by introducing all the essential features for block-based customization. Unsurprisingly, WordPress 6.3 is brimming with enhancements tailored for the editor. Let’s delve into a comprehensive overview of these updates.
01. Synced and Unsynced Patterns
Reusable blocks are like building blocks that you can save and use again on different parts of your website. If you change a reusable block in one place, that change will happen everywhere you use it.
On the other hand, a block pattern is a pre-designed group of blocks. You can add a block pattern to your content and change it to fit your needs, without changing all the other places where you used the same pattern. Before, making block patterns needed extra tools like a special plugin or custom code.
But in WordPress 6.3, things are easier. It combines reusable blocks with patterns. There are two types of patterns: synced patterns work like reusable blocks, and unsynced patterns are like regular block patterns.
This new pattern system is a big improvement. In WordPress 6.3, you can create patterns right in the website editor, just like you would a reusable block.
Here is how you can make a synced or unsynced pattern in WordPress 6.3:
- Customize a block or group of blocks and choose “Create Pattern/Reusable Block” from the Block toolbar menu.
- A box will show up for creating the pattern. You can give it a name.
- The synced toggle decides if the pattern acts like a reusable block (synced) or a regular block pattern (unsynced). Turn it on for a reusable block-like behavior, or keep it off for a regular pattern.
- Click “Create” to finish.
The editor saves synced patterns in one place and unsynced patterns in another. Look for synced patterns in the Synced Patterns tab in the Block Inserter panel.
In contrast, check the My Patterns section in the Block Inserter panel for unsynced patterns.
02. Speedy Template Editing Switch
While working on a page in the site editor, making changes to the template is a breeze. Sometimes, this is particularly useful because, while editing a page, you might realize there is a layout-related adjustment that needs to be made.
You can locate the Templates dropdown in the Page Settings panel while editing a page. It displays the currently applied template. To make edits, just click the “Edit Template” button.
It is important to note that this feature is exclusively accessible within the Site Editor. If you are editing a page using the regular page editor, you won’t have this option available.
03. Updated Navigation Sidebar
When you click the WordPress or site logo in the upper-left corner, the navigation sidebar of the Site Editor shows up on the left side of the screen.
In WordPress 6.3, the navigation sidebar has been improved to provide additional options. This enhancement improves your workflow by enabling you to navigate through and manage more elements within the site editor.
Here are the updated menus in the navigation sidebar:
- Navigation: This menu lets you view and rearrange the links within your navigation block. It is a convenient way to manage the navigation without having to go into the editor canvas and open the block settings panel.
- Styles: From this menu, you can select and preview various style options offered by your theme. It also provides shortcuts to access the style book and the global style panel.
- Pages: The pages menu shows a list of all the pages available on your website, including drafts. Clicking on any page allows you to edit it directly within the Site Editor.
- Templates: Similar to the previous version, this menu displays all the templates available and allows you to create new ones.
- Patterns: This replaces the former Template Parts menu. It now encompasses template parts, as well as both, synced and unsynced patterns.
04. Command Palette
The command palette provides a quicker method to move around templates, access particular panels, or initiate a new post or page. It is a helpful tool for searching and accomplishing specific tasks or actions.
You can find the command palette at the top of the Site Editor, or you can use the keyboard shortcut CTRL+K to access it.
For example, if you are editing the home template and you want to quickly switch to a different page, just type the page’s name in the command palette and select it. This will immediately take you to that page.
05. Less Distracted Site Editor
The distraction-free mode has now been introduced to the Site Editor. This familiar feature is designed to help you concentrate while you edit your content. Originally accessible in the page and the post editor, this mode hides the following to minimize distractions and create a cleaner interface:
- The sidebar
- Top panel
- Block toolbar
If you still find the panels useful, you can minimize distractions by activating the top toolbar option. This action moves the block toolbar to the upper panel of the editor.
In the past, turning on this feature would add an additional layer to the top panel to accommodate the toolbar. However, in WordPress 6.3, the block toolbar will be integrated into the top panel to save space on your editor canvas.
06. Style Revision
WordPress revisions have long been a valuable collaboration tool, particularly for content editing. However, their usefulness was limited to content changes. Luckily, the introduction of style revisions extends the rollback capability to the design elements of the website.
You will notice the fresh Revisions icon within the global styles panel. By clicking on it and choosing “Revision History,” you can now see a detailed timeline of style modifications, complete with timestamps and the users responsible for the changes.
If you decide to explore any of the saved style versions, you can preview them directly on the editor canvas. To revert to a previously selected style, simply use the “Apply” button located at the bottom of the panel.
07. Block Improvements
Enhancing the block editing experience goes beyond just introducing new blocks. In WordPress 6.3, numerous improvements have been made to existing blocks.
Dimensions Control
In WordPress 6.3, the control of the dimensions undergoes a user interface upgrade. Instead of relying on text to indicate the settings for top, bottom, left, and right sides, it now employs small icons to manage these dimensions.
Cover Block Enhancements
Certain users place multiple texts within the cover block. To enhance the process, WordPress 6.3 brings in text design tools that enable the alteration of color and typography for all the text within the cover block. This feature eliminates the need for manually adjusting individual text blocks separately.
In addition, there is a seamless transformation capability between the cover block and the media & text block, and vice versa. When you perform this transformation, all the design customizations are smoothly transferred, negating the requirement to redesign the block.
Featured Image Aspect Ratio
The post-featured image block now incorporates aspect ratio control within its design tools. Whether you utilize this block within a post or a template, you now have access to eight distinct options, encompassing both portrait and landscape orientations:
- Original aspect ratio
- Square (1:1)
- 16:9
- 4:3
- 3:2
- 9:16
- 3:4
- 2:3
Post Modified Date Variation
The post date block in WordPress 6.3 provides multiple options for presenting the last modified date. By accessing the settings panel, you can configure the block and activate the “Display last modified date” toggle option.
When this option is turned on, the post date block’s placeholder will showcase the Last Modified Date.
Furthermore, you can include two post date blocks within a template. One block will indicate the original publication date, and the other will show the last modified date. With this approach, you can effectively communicate to readers that, despite the original post being published some time ago, it has been recently updated.
08. New Blocks
WordPress continually enhances its customization capabilities by introducing fresh native blocks that assist in adding captivating content. In WordPress 6.3, the following new blocks have been introduced:
- Footnotes:
In WordPress 6.3, you can now easily add footnotes to your text when you have a section that requires additional information, like a quote or an explanation.
Simply highlight the text you want to annotate and click on “More” in the Block toolbar. Choose “Footnote,” and a block will be inserted at the content’s end, where you can include citations or additional details in the footnote block.
It is important to note that, currently, this is the sole method for adding a footnote block; you cannot currently add one through the Block Inserter panel.
- Details:
This block includes a header positioned at the top, followed by a collapsed section containing nested blocks. It proves highly advantageous for effectively presenting lengthy content, like code snippets, product details, or spoiler text.
Upon adding a detail block, you will encounter two parts –
- The detail header
- The concealed block content
The header exclusively accommodates text, although its design remains customizable. Meanwhile, the collapsible section permits the inclusion of various blocks, ranging from images to code or list blocks.
Performance Improvements and Updates for Developers
Transitioning from newly introduced user-facing features, let’s shift our focus to enhancements on the back end. With each significant WordPress update, there are performance improvements and updates aimed at developers, and WordPress 6.3 stays true to this pattern.
01. Command Palette API
In this release, the WordPress core team has introduced the command palette API, enabling developers to incorporate or eliminate commands.
The API encompasses two command types: Static and Dynamic. Moreover, contextual properties can be appended to these commands.
Static Commands
The static command is the most straightforward kind to include in the command palette lineup. It employs the ‘wp.data.dispatch( wp.commands.store ).registerCommand’ action or the ‘wp.commands.useCommand’ React hook.
Here is an instance of a static command being 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
These commands appear in the command palette list solely based on the search terms provided by users. To illustrate, dynamic commands utilize command loaders for registration, such as ‘useCommandLoader’ and ‘usePageSearchCommandLoader’.
For instance, here is a code snippet to register a command that facilitates page searching. This code comprises two components:
- The first part retrieves pages based on search terms, and
- While the second part generates the corresponding commands.
| 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
These commands hold a higher priority and consistently appear in the command palette list within specific contexts. For instance, by assigning a static command to the “Site Editor” context property, it will invariably show up whenever you are working within the Site Editor.
In WordPress 6.3, there are just two available contexts:
- site-editor – This context makes the commands accessible when users navigate the Site Editor with an open navigation sidebar.
- site-editor-edit – This context ensures the commands are available when users edit any content within the Site Editor.
To render a command contextual, you simply need to include the context property during command registration. For instance, here is the same static command example from earlier, this time with the site-editor context applied:
| 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’,} ); |
02. PHP 5 Dropped Support
Did you know?
A mere 3.8% of all monitored installations utilize PHP 5.6.
Consequently, the WordPress core team has decided to discontinue support for PHP 5 and has elevated the minimum supported version to 7.0.0. Typically, the team employs a 5% baseline to establish the minimum PHP version.
Nonetheless, websites operating on PHP alongside WordPress 6.2 will still receive security updates. If your current PHP version is 5.6 or below, we strongly advise upgrading to version 7.4 to enjoy improved performance and security.
03. Caching Improvements
The WordPress Performance team has introduced several enhancements to the core WordPress caching system. Notably, these include improvements in WP_User_Query caching and changes to cache groups.
WP_User_Query Caching
WP_User_Query was the last class lacking database caching capabilities. Fortunately, the WordPress performance team has addressed this in WordPress 6.3.
The approach for implementing caching in WP_User_Query resembles that of other query classes. When a user initiates a query, the cache retains the results retrieved from the database. Subsequent queries of the same type draw data from the cache. This enhancement will alleviate the overall database query load, ultimately enhancing the site’s performance.
It is worth noting that WordPress has already incorporated query caching in other classes such as WP_Comment_Query, WP_Site_Query, WP_Network_Query, and WP_Term_Query.
New Groups in Cache API
With the implementation of query caching for WP_User_Query in WordPress 6.3, there is a need to modify the approach to cache storage within the Performance realm. As a result, the WordPress team has introduced six new cache groups tailored to queries. Here is an overview of these new cache groups:
- post-queries
- term-queries
- comment-queries
- network-queries (global cache group)
- site-queries (global cache group)
- user-queries (global cache group)
This update also bestows increased control over cache objects. This allows you to specify expiration times for any cache group. Additionally, you can clear a specific cache group using the wp_cache_flush_group() function.
Final Thoughts On WordPress 6.3
In conclusion, WordPress 6.3 “Lionel” is a game-changer. Its synced patterns, style revision, and improved performance redefine content creation. Developers gain new tools too, with database query caching and the command palette API.
With WordPress 6.3, the future of web design and development is brighter than ever. Embrace these updates and unlock a world of possibilities for your digital endeavors.
