Core Editor Improvement: Simplified Query Loop block with smarter defaults & intuitive settings

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

In the spirit of Matt’s “simple things should be easy and intuitive, and complex things possible”, the Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. has been refreshed with a focus on ensuring the most intuitive default state possible out of the box and increased clarity when trying to achieve anything more complex with custom queries. All of what’s shared below is slated for inclusion in the upcoming WordPress 6.7 release on November 12th, 2024

Strong defaults

With recent updates, you no longer need to manually enable “Inherit query from template.” The Query Loop block now automatically inherits the query by default, ensuring expected posts are displayed both in the editor and on the front end. This change simplifies the process for most users, who typically just want to see their posts appear without complications. It also minimizes the likelihood of confusion, such as when a Query Loop block is added but posts don’t show up. Now, whenever you add a Query Loop block—whether starting from scratch or using a pattern—your posts will display immediately. This includes when adding a Query loop block to single post or page where the settings will automatically be configured to work in that context. Additionally, the Post List variation has been removed from the Inserter, as its default settings often caused posts to not display, leading to a confusing user experience.

Added clarity

To make this complex block more user-friendly and predictable, the settings have been simplified. Now, there’s a toggle to choose between using the default options or creating a custom query. If you select a custom query, another toggle lets you choose between posts or pages, with the usual filtering options. For custom post types, this section becomes a dropdown for easier selection. In response to feedback about scattered settings for the Query Loop block, options for Posts Per Page, Offset, and Max Pages to Show have been moved to the Settings panel. This change makes the settings sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. the central place to configure the Query Loop block fully.

Refined details

The details matter, and these refinements are no exception: a preview now appears when selecting the Query Loop block, and the “Add a new post” prompt now reflects the specific type of content you’re querying. The help text for sticky posts has been updated to clarify that sticky posts will always appear first. Additionally, the enhanced pagination setting has been moved to the Advanced section with a new label for better clarity.

Post format support

To help take steps towards post formats in Block themes, the Query Loop block has a new parameter called “format” that allows you to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the content shown by post format, in the same way you’d filter by any other option. This additional filter can be combined with others so you can create custom queries for something as nuanced as posts by a specific author across two categories and with a certain post format. 

Query Loop block filter settings showing Categories, Tags, and Author with the "Formats" option highlighted for emphasis.

#core-editor-improvement, #query-loop

Core Editor Improvement: Upgrade your designs

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Important design tools have shipped in the last few GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases, with additional ways to take advantage of the creative flexibility already available with blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes. Here’s a closer look at what these tools unlock ahead of the next major WordPress release.

Offer individual typography and color variations

Style variations bundled with block themes allow you to seamlessly transform your site’s look and feel fast, all while using the same theme. Sometimes though, you may want to offer more design options without offering entirely new styling changes. 6.6 is slated to add the ability to target color or typography only variations and offers them as presets, separate from overall style variations. These new color and typography presets offer more contained changes, making it simple to offer broader color options or typography options out of the box with your theme. To use this new option, theme authors will need to create color or typography only variations that ideally work well with the overall variatiosn you’re already offering. For example, perhaps you want to provide a few more typography options for folks to use across each variation. Of note, for any style variations that only contain color and typography changes, these will now automatically appear in this separate preset flow.

For a greater view of this general area, dive into the Colors and typeset presets from theme style variations overview issue and see the latest. 

Create overlapping designs with negative margins

Previously, you could only create overlapping designs with negative margins. As of Gutenberg 18.3, you can add negative margins right in the Site Editor for all blocks that support margin controls. The negative values need to be manually entered to balance some UXUX User experience considerations and add some guardrails, meaning they can’t be selected by dragging. 

Want to share something you create with this new option in the next WordPress release? Share it in the Pattern Directory! For now, enjoy exploring.

Embrace the Grid

Grid is a new layout variation for the Group block stabilized in Gutenberg 17.8 that allows you to display the blocks within the group using CSSCSS Cascading Style Sheets. grid. Of note, any block can use this new grid layout thanks to the supports key in block.json. There are two options for the grid layout:

  • “Auto” generates the grid rows and columns automatically using a minimum width for each item. 
  • “Manual” lets you specify the exact number of columns.

This is just the beginning. Efforts are underway to let you drag and drop, andresize blocks on the grid, providing a more visual and intuitive experience. Work is also in progress to improve how folks create layouts in general. If you want to follow how this feature evolves, check out this tracking issue, watch the recent demo, and join the dedicated #feature-grid SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel. 

Changelog

June 6th: updated the Mix and Match variations in light of a discussion that has changed this feature changing it to allow theme authors to create typography or color only variations that show up outside of the main style variation flow.

Thanks to @richtabor and @laurlittle for help with editing this post.

#core-editor, #core-editor-improvement, #gutenberg

Core Editor Improvement: Power in the Details

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Numerous small gains are slated for WordPress 6.5 that you might have missed in the excitement around more prominent features, like the Font Library. While they garner less attention, the following improvements contribute to more flexibility and efficiency, making a big difference in your everyday WordPress experience. Take a moment to learn more about them—and explore how the power of details in 6.5 can transform your current workflows.

New List View shortcuts

6.5 will introduce new List View shortcuts for improved efficiency, saving you time when performing common actions with this tool:

  • Simplified access to a block’s setting menu: This update lets you open a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.’s settings menu by right-clicking on a List View item, enabling swift changes as needed.
  • Quick block selection shortcut: Use CMD+A on Mac or CTRL+A on Windows to select all blocks within List View, facilitating faster batch actions.
  • Copy, paste, and cut blocks using the keyboard shortcuts you’re used to when selecting blocks in List View (CMD+C and CMD+X to copy and cut blocks, and CMD+V to paste blocks).
List View opened to a Group block that's been right clicked to reveal the block settings.


View your template when editing pages or posts

A lot of code-wise work has been done to unify the Site Editor and Post Editor experiences for block themes. Thanks to these efforts, you can now view your template when editing a page in the Post/Page Editor and enjoy the same experience regardless of where you’re working. This ability allows for convenient on/off toggling of the template preview, offering you even more flexibility. Similar to the Site Editor experience, selecting any part of the template triggers a snackbar notification and a quick pathway to edit the template directly.


Duplicate patterns to quickly change the sync status or make theme pattern your own

Patterns provided by a theme are currently locked. As a result, reusing them as a basis for creating your own patterns previously required several steps. WordPress 6.5 adds a new quick option to streamline this process and let you duplicate a theme pattern without the hassle. This also eases the experience of changing the sync setting.


Review a summary of styling changes and quickly view your site while saving

With so many styling options available, it’s important to know what’s changing when you hit save. Now you can, thanks to a short summary that matches the summary you’d see you’re browsing revisions, giving you the information you need when changing up the look and feel of your site. After saving, you can then select “View Site” in the updated snackbar notice to check out the front end of your site and marvel at how good it looks (or line up some additional changes).


Rename blocks for better organization

Building on the ability to rename Group blocks in List View introduced in WordPress 6.4, the next release will allow renaming nearly every block for better organization and personalization. This update makes it easy for users to see at a glance and understand how the content has been structured. On the other hand, it helps theme authors provide a more intuitive experience for those using and interacting with their themes and patterns.

List view showing Group blocks with different names, opened to a block named "Main Content" with the option to rename.

It’s worth noting that the following blocks cannot be renamed intentionally:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigation

Enjoy drag-and-drop improvements 

Drag and drop is an essential aspect of building with blocks, providing an easy, simple way to add, combine, and rearrange content as desired. This release will introduce a diverse range of enhancements aimed at making both drag-and-drop functionality and actions more intuitive:

  • Allow dragging and dropping to the beginning or end of your content
  • Add a drag cursor when hovering over items that can be dragged in List View 
  • Improve dragging and dropping between adjacent container blocks, such as Group and Cover blocks
  • Enable dragging blocks into template parts for easier placement of elements, like a site logo next to a site title
  • Show a visual indication when a block isn’t allowed to be dropped, helping guide and communicate where one can and can’t drag and drop
  • Allow dragging and dropping to create rows and galleries; for example, placing an image next to another will automatically create a gallery
  • In List View, collapsed blocks expand when a block is dropped into them, ensuring visibility of the dropped block
  • In List View, items are displaced to help provide a more visual and tangible experience of dragging and dropping blocks
  • In List View, a drag cursor is shown for any draggable block

Taken together, anyone using the next version of WordPress will find dragging and dropping blocks more versatile and powerful to use.

Customize your experience with a new Preferences panel

WordPress 6.5 will bring a reorganized preference modal to personalize the editor interface to your liking, including new dedicated panels for Appearance and AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) settings. You will also notice improved clarity and consistency in text descriptions and a few more new settings.

Preferences panel open to Appearance tab showing four different options to choose from.

Create consistent designs with Cover block aspect ratios

In addition to minHeight support, the Cover block now offers aspect ratio support. This means you can easily set predefined aspect ratios to customize your visuals further and help maintain design consistency with less effort. For added convenience, you can control this feature globally for all Cover blocks or adjust it individually for each block.

Use the block toolbar in Distraction Free mode for quick changes

WordPress 6.5 makes it easier to make quick customizations while staying focused in Distraction Free mode. Simply moving your mouse to the top of the editor will smoothly reveal the block toolbar. Previously, accessing the block toolbar wasn’t an option in Distraction Free mode, requiring users to toggle it on and off for even minor adjustments.

Thank you to @rmartinezduque for collaborating on this post and all of the designers who helped make some of these visual assets!

#core-editor, #core-editor-improvement, #gutenberg, #site-editor

Core Editor Improvement: Robust Revisions in the Site Editor

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. are an integral part of the creation experience, providing a safety net and a way to see where you’ve been to know where to go next. It’s so important that there’s a dedicated area of focus for phase 3 efforts dedicated to the broader area of work! While lots of work lies ahead, WordPress 6.5 is slated to include some impactful changes and new features to current revision functionality in the Site Editor. 

If you want to try out what’s shared below for yourself, head over to the post on Early Opportunities to Test WordPress 6.5 where you can quickly spin up your own test site to experience it for yourself and give feedback. Everything shared below is available as of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 17.4 and planned for inclusion in WordPress 6.5.

Let’s look at a before and after 

To help bring these changes to life, below is a video showcasing what’s written below. The “before” site is using WordPress 6.4.2 and the “after” site is using WordPress 6.4.2 with Gutenberg 17.5.1 installed. These test sites were pulled from Early Opportunities to Test WordPress 6.5 so anyone is welcome to explore:

Read a short summary of styling changes thanks to a new design

Alongside a new design showing more granular information, like a more granular timestamp, a short summary of changes made in each revision is now available. Combined, this greatly simplifies understanding what’s in each revision rather than relying on spotting visual changes. 

View all style revisions thanks to pagination

Rather than showing just the last 100 revisions, all revisions are now available thanks to pagination. This both works around a technical limitation of 100 results per REST response and helps make navigating between revisions much easier than scrolling endlessly in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.

Toggle on the Style Book to get a different angle

In the same way you might be used to using the Style Book when making changes to your site in the Site Editor, you can now do the same when looking at different revisions to see changes that might not otherwise be visible on the current template. Just as when you use the Style Book normally, you can toggle it on and off as you’d like. 

Rely on full revisions for everything 

While the undo and redo buttons have a role to play, having access to full revision history allows for a much greater understanding of changes, their impact, and actions one can take. While this was mentioned in a previous post, revisions for templates and template parts are finally slated for inclusion in Core for WordPress 6.5. This means out of the box folks can browse changes to templates, template parts, and styles providing a nice safety net. 

#core-editor, #core-editor-improvement, #gutenberg, #site-editor

Core Editor Improvement: Ensuring Excellence in the Writing Experience

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Writing in WordPress, whether your latest post or a new page, needs to be seamless and enjoyable–the tooling should always aim to aid creativity rather than get in the way. Blocks with all of their variations, design tools, and transforms should leave you feeling empowered. To make sure of that, some extra effort was put into the 6.4 release cycle to make the simple act of writing better with new keyboard shortcuts, smoother list merging, some key fixes, and more. Below is a video demonstrating some of these enhancements in one cohesive flow starting with the captured toolbars in a Quote blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. and ending with easily merging two List blocks:

Cohesive Toolbar experience with Navigation, List, & Quote blocks

There’s a new toolbar experience for the Navigation, List, and Quote blocks. Each of these blocks have built-in child blocks and rather than having the toolbars for each child block visible, they are now seamlessly attached to the overall parent blocks. This both helps prevent toolbars from blocking other pieces of content, like a different list item than the one selected and provides a more organized editing experience where you always know where your tooling options are. 

Orange background with the words Toolsbars, captured next to a view of a list block with a few list items shown and the overall block toolbar remaining attached to the parent block.

Strengthening the experience

Several bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes and improvements contribute to a more seamless and predictable writing experience.

Updating List View 

List View has some neat, new options to get the most out of this robust tool: 

What’s next?

This work is never over and current efforts can be followed in this tracking issue. Consider this encouragement to continue sharing directly any issues you’re running into, whether a bug to fix or an experience to polish. 

#core-editor-improvement

Core Editor Improvement: Commanding the Command Palette

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

The following dives deep into the latest updates to the Command Palette, a new tool available with WordPress 6.3 designed to speed up your workflow. You can use the keyboard shortcut Cmd+kon Mac or Ctrl+k on Windows to activate it and get started. With work underway for WordPress 6.4, here are some very early looks at what you can look forward to when it comes to this new option in your WordPress creation experience and a reminder of what it’s capable of already.

Use commands to do more, faster in any editor

The Command Palette is available across the editing experience, whether you’re switching between templates in the Site Editor or toggling open settings in the Post Editor, with specific contextual options depending on where you are. In the video below, you’ll see the keyboard shortcut used to evoke the Command Palette, open and close List View, display and hide breadcrumbs, toggle on distraction free mode, and preview the page in a new tab.

Think of the Command Palette as the ultimate shortcut tool, allowing you to do more with less clicks, whether you’re trying to enable a specific setting or transform an Image blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to a Cover block.

Explore every option

If you’re using WordPress 6.3, the following commands are ready to use to allow you to quickly switch between different parts of your site and personalize your experience without needing to find every setting individually:

  • Edit Template when editing a page.
  • Back to page to return to editing a page from a template.
  • Reset template
  • Reset template part
  • Reset styles to default
  • Delete template
  • Delete template part
  • Toggle settings sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
  • Toggle block inspector
  • Toggle spotlight mode
  • Toggle top toolbar
  • Open code editor
  • Toggle list view in the Post Editor.
  • Toggle fullscreen mode
  • Open editor preferences
  • Open keyboard shortcuts
  • Customize CSSCSS Cascading Style Sheets.
  • Open styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.
  • Open styles
  • Learn about styles to trigger the welcome guide for Styles
  • View site
  • View templates
  • View template parts
  • Open Navigation Menus
  • Manage all custom patterns

Since WordPress 6.3, new commands have been added with more planned as part of a larger effort to have contextual commands in place across the various editors:

  • Open List View (in the Site Editor)
  • Exit code editor
  • Hide breadcrumbs
  • Show breadcrumbs
  • Enable pre-publish checklist 
  • Disable pre-publish checklist
  • Preview in a new tab

Shown when selecting a block:

  • Group
  • Ungroup
  • Duplicate
  • Remove
  • Add before
  • Add after

Additionally, you can access all transforms a block has defined using the Command Palette. For example, with an Image block, you will see the option to transform to a Cover block, a Gallery block, Columns block, File block, Group block, and Media & Text block. Finally, for the various reset, delete, and edit commands related to templates, the name of the template has been added to ensure you’re taking the actions you want on the exact item you want. 

What commands do you want to see? Please share in Gutenberg’s GitHub repository or in the comments below to help make this feature even more powerful.

Enjoy a refreshed design and experience

To better accommodate a growing number of commands and make it easier to skim what each option allows, new styling was added that includes darker icons and an always present search icon. Below is an image showing the design before on the left and the current design on the right:

Two visuals of the UI of the Command Palette showing a before and after following some design changes with the Command Palette open with the word "edi" in the search field and various results listed below.

Thanks to a recent fix, this new design looks great on all screen sizes. Work has also been done to ensure that the commands that are listed are most applicable to the context at hand. For example, if a block is locked, grouping is no longer listed as a command, resulting in a more intuitive experience. For a bonus quality of life detail, the keyboard shortcut is also displayed when in site view in the Site Editor when you hover over the search icon.

Add your own commands (with or without an icon)

The Command Palette is an excellent option for extenders to seamlessly add commands related to their specific plugins. For instructions on how to do this, check out the dev note introducing this feature. Of note, with a recent change, the requirement of having an icon has been dropped as well with a discussion underway around how best to identify third party commands. 

Thank you to @richtabor for creating the visuals used in this post.

#command-palette, #core-editor-improvement

WordPress 6.3 performance improvements

Update (Aug 8, 2023): Benchmarks in this post were updated with results for the 6.3 stable release.

With WordPress 6.3 now available, this post summarizes the performance improvements that are part of this release. While WordPress 6.2 set the bar high with its notable boost to load time performance of CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., WordPress 6.3 has been able to exceed these results: Based on the performance benchmarks conducted, WordPress 6.3 loads 27% faster for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes and 18% faster for classic themes, compared to WordPress 6.2, based on the Largest Contentful Paint (LCP) metric. For WordPress 6.2, those improvements amounted to 18% and 5% respectively, so it is fair to summarize that WordPress 6.3 is a major achievement in terms of performance.

Thank you to @clarkeemily for collaborating on this post!

What makes 6.3 so much faster?

To break down the performance improvements in 6.3, it is crucial to understand the different load time performance metrics and how they relate. The most holistic metric is Largest Contentful Paint (LCP) because it captures overall load time performance. As such, the percentages mentioned in the introduction of this post were specifically the LCP improvements measured.

An important part of LCP is the Time to First Byte (TTFB) metric, which captures server-side load time performance and thus directly affects LCP: Effectively, TTFB is the server-side part that contributes to the LCP result. For client-side load time performance, there is no dedicated standalone metric. However, since client-side performance is effectively everything else, it can be concluded that client-side load time performance can be expressed by the difference between LCP and TTFB, i.e. “LCP-TTFB”.

Client-side performance

In WordPress 6.2, the majority of the performance boost came from improvements to server-side performance (TTFB), as highlighted in the aforementioned 6.2 performance improvements post. In WordPress 6.3, that is different: Most of the performance boost stems from client-side performance improvements (LCP-TTFB). In fact, client-side performance in WordPress 6.3 is 40% faster for block themes and 31% faster for classic themes, compared to WordPress 6.2. For reference, in the comparison of WordPress 6.2 with 6.1 LCP-TTFB amounted to only a 1.5% and 2.5% improvement respectively.

The vast majority of the client-side performance improvement comes from optimizing the emoji-loader.js script, by leveraging modern JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. APIs such as Web Workers, OffscreenCanvas, and sessionStorage. Unless your WordPress site has disabled the related emoji functionality, you should notice a performance improvement due to this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.. See #58472 and [56074] for additional context on this change.

The other notable portion of the client-side performance improvements stem from adding support for the fetchpriority="high" attribute on images. As such, this improvement is only relevant on content with images above the fold, but given that images are by far the most common media used on web pages, it is very likely that you will notice a performance improvement from this enhancement as well. For a comprehensive overview of how to leverage and modify the new functionality as a developer, please refer to the 6.3 dev note on image performance improvements. For additional context on the change, see #58235 and [56037].

The following list highlights a few additional tickets that can improve client-side performance in certain scenarios, several of them enhancing the heuristics for whether to add the loading="lazy" attribute to images:

Last but not least: A notable developer feature that should be highlighted here is the introduction of script loading strategies, which adds support for loading scripts with defer or async. This is a major milestone for performance in general, however so far only the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. itself has been introduced, which means there is no actual performance impact from it yet, which is why the change was not mentioned earlier in the post. As WordPress core and the ecosystem starts adopting the API (e.g. defer for block view scripts and async for comment-reply), it is anticipated that in the future we will see notable performance improvements from it as well. Please read the 6.3 dev note on registering scripts with async and defer to learn more on how you can leverage the API as a developer and the advantages over approaches that directly manipulate the script tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.). See #12009 and [56033] for additional context on this change.

Server-side performance

While server-side performance improvements in 6.3 overall did not account for as much of the performance boost, the release still includes several notable enhancements, particularly for block themes, where server response time is 19% faster. Many of the server-side performance enhancements are the result of optimizing low-level logic in WordPress core internals. While this makes the improvements difficult to describe in isolation, it means that they don’t require any adoption or modifications in the WordPress ecosystem in order to become effective.

One of the most notable performance enhancements for block themes was a low-level change which optimizes how WordPress core block styles are registered. This is relevant since core block styles are handled slightly differently from those of custom blocks. Prior to 6.3 however, all blocks were using the same general logic which included quite a bit of flexibility, and thus also a performance cost, which was unnecessary for the core blocks. The change introduced a dedicated function to register core block styles in a more efficient way. See #58528 and [56044] for more context on this change.

Another major win for block theme performance was an improvement to the get_block_templates() function. The logic in that function was optimized to no longer process all block templates but only those that match the current query. See #57756 and [55687] for more context on this change.

The wp_common_block_scripts_and_styles() function is another optimized function that is certainly worth highlighting. This enhancement is only relevant to hybrid themes, specifically classic themes that call add_theme_support( 'wp-block-styles' ), but for those themes it results in a major server-side performance boost. See #58560 and [56064] for more context on this change.

The biggest change that has a notable performance impact for both block themes and classic themes is a performance optimization in the wp_maybe_inline_styles() function which avoids unnecessary calls to relatively costly functions to get the size and contents of stylesheet files. See #58394 and [55888] for more context on this change.

The following list highlights a few additional tickets that can improve server-side performance in certain scenarios:

Database performance

Several enhancements were made in WordPress 6.3 to lazy-load metadata, which can avoid database queries in certain situations. These changes are outlined in the 6.3 dev note post on metadata API improvements. See the individual tickets #57227, #57645, #57901, and #58185 for more context.

Additionally, the get_pages() function now uses WP_Query internally, which not only means elimination of duplicate code, but more importantly it leads to a performance improvement in the function as it now benefits from the same solid caching behavior, something that was missing in the previous custom implementation of the function. For more context, please see the 6.3 dev note on the get_pages() function and the ticketticket Created for both bug reports and feature development on the bug tracker. #12821.

Last but not least, the WP_User_Query class now supports caching query results, becoming the last of the WordPress core query classes to support it. This can avoid database queries when querying user information. For more context, please see the 6.3 dev note on WP_User_Query caching and the ticket #40613.

A note on the benchmarks used

While the metrics shared in this post are based on benchmarks that were conducted with the same methodology used for WordPress 6.2, any benchmarks need to be interpreted with nuance: Other than how the WordPress site used for benchmarking is configured, benchmarks are heavily dependent on the environment that they are run in. To have additional reference points, a few different contributors conducted and shared their benchmarks as well, based on a slightly earlier version of the release, 6.3 RC1. All of the benchmark results are summarized in this spreadsheet.

It can be noted there that some of the other benchmarks did not see improvements as high as noticed in the benchmarks highlighted (which, for context, were run on the author’s machine), but the main takeaway is that there is a notable performance boost overall. For now it made sense to focus on the performance benchmark with the numbers highlighted in this post in order to be consistent with the numbers from the aforementioned 6.2 performance improvements post, since that was using the same environment for the performance benchmarks as well. For any of the other contributors’ benchmarks where the relative improvements were not as high, it can be assumed that the 6.2 performance benchmarks on their environments would have shown an equivalently lower performance boost as well.

While this means we cannot get a definite answer to how much faster WordPress 6.3 is, it is safe to say that it is a lot faster than 6.2, and relatively speaking the performance improvement is even higher than it was between 6.2 and 6.1.

Automated benchmarking workflow

Some of the benchmarks referenced were conducted using a new reusable automated benchmarking workflow that @swissspidy recently implemented, using the same approach as the manual benchmarks, but using GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions. Those results show that using this workflow leads to more consistent results overall due to using the same environment, and it furthermore reduces the effort needed to conduct performance benchmarks. In the future it may be a good idea to rely on the numbers from that workflow rather than those from an arbitrary environment of a specific contributor. For reference, the automated workflow numbers roughly indicate the following performance improvements in WordPress 6.3 compared to 6.2:

  • LCP is 10.6% faster for block themes and 8.8% faster for classic themes.
  • TTFB is 4.7% faster for block themes and 5.6% faster for classic themes.
  • LCP-TTFB is 13.4% faster for block themes and 9.3% faster for classic themes.

Get involved

If you’re interested in working on improving performance across the project, make sure to join #core-editor, #core-performance, and attend meetings for both.

Props to @adamsilverstein, @annezazu, @joemcgill, @oandregal, @spacedmonkey, @westonruter for review and proofreading.

#6-3, #block-themes, #core-editor-improvement, #core-performance, #performance

Core Editor Improvement: Advancing the power of Patterns

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

The following covers a few new features, big and small, coming to WordPress 6.3 that impact the experience of creating and using patterns. You can explore these features if you’re using Gutenberg 16.2 with the exception of the ability to rename and duplicate custom patterns coming to 16.3.

Create your own patterns (synced or unsynced)

Since GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 16.1, users can create patterns within the Editor. This includes a “Patterns” section where you can create and manage Patterns and Template Parts. As a result, you can now use your theme’s patterns, patterns from the Pattern Directory, and your patterns (and any combination you can think of) as you build your site.

Patterns section of the Site Editor, showing the sidebar with template parts and theme patterns on the left and previews of patterns on the right.


With the ability to set the sync status of patterns as well, Reusable blocks have a new name: Synced Patterns. This is a step forward in reducing the concepts you need to learn, and unlocking functionality for folks to create their own patterns:

  • A Synced Pattern means that any change made to one Pattern gets deployedDeploy Launching code from a local development environment to the production web server, so that it's available to visitors. to all instances of that Pattern across your site.
  • Unsynced Patterns are included in the Inserter alongside other patterns. Changes to these patterns will not be reflected throughout your site and you can customize each instance to your liking.
  • You can edit, rename, duplicate, and delete patterns all from within the Patterns section with the launch of Gutenberg 16.3.
  • Once you’ve set the sync status, you cannot change it after the fact. You will need to duplicate the pattern and create it again to change the sync status.
  • For blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, all patterns are listed alongside template parts in the Site Editor > Patterns section, where you can enter an isolated editing mode to make changes.
  • For classic themes, the prior reusable block management page has been reused to house patterns in a list, similar to the Posts > All Posts view. 
  • Custom pattern categories will likely arrive in a future release. You can read more here

Nudges have been added throughout the interface to help with this shift, including in the pattern creation process itself:

Modal for pattern creation showing a notice about the change from Reusable blocks to synced patterns, alongside options to name the pattern and keep it in sync before saving.


Keep design integrity with aspect ratio added to Image blocks

Aspect ratio controls have been added to Image blocks, unlocking the ability to set the design you want for an image, knowing that it’ll be preserved when that image is replaced. While it’s a small change, this has a big impact on the capabilities and experience of using patterns. Now you can worry less about skewing carefully curated layouts and more about your content.

In the future, imagine being able to set height/width and aspect ratio with just the Image block placeholder so patterns don’t have to include images at all, and you can begin setting the structure of content without needing images. 

Explore new bundled Core patterns

To continue offering unique and beautiful designs, the Pattern Directory includes a variety of new patterns with a focus on adding banner, text, and image-related options:

A new Pattern Directory filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. makes it easy to search for Curated patterns provided by Core or Community patterns created by WordPress contributors.

Pattern directory view with the new Curated vs Community filter displayed.


Add starter patterns to ease the template creation process

Building on changes made to the Patterns API in WordPres 6.2, you can also register custom patterns meant for specific template types (e.g., single post, 404, etc.) and they will appear in the start modal to ease the creation process. This is especially helpful for theme authors and site owners as it expands the power of patterns as starter content for template and post types alike.

Thank you to @richtabor @eidolonnight @dansoschin for helping review and edit this post.  

#6-3, #core-editor-improvement

Core Editor Improvement: Smoother Site Editing

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Over the last few GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ releases, a few more deeply technical changes have unlocked some big improvements across the experience of exploring and using site editing. The result is a smoother experience of exploring blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, making changes, and entering the Site Editor. The work mentioned here addresses key areas of feedback that have been raised over the months and years with the FSE Outreach Program, particularly around revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. and the ability to preview themes. While what’s shared here is available in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party (in some cases as an experiment with block theme previewing), please help explore and test these features to ensure they each make it into the official WordPress 6.3 release come August 8th, 2023. 

Rely on revisions for templates, template parts, and styles

While the undo and redo buttons have a role to play, having access to full revision history allows for a much greater understanding of changes, their impact, and actions one can take. Revisions have been added across the Site Editor to templates, template parts, and style changes providing an across the board safety net for changes you’d like to make (or undo). For styles, changes are shown in a timeline alongside a reference for who made the changes.

This work has addressed a longstanding piece of feedback from the FSE Outreach program, mostly recently shared in the following call for testing:

With all the various changes I’ve done, I couldn’t help but notice the need of “what if” and wanted to use a previous style, but because I refreshed the editor, I couldn’t use a previous setup so I really felt the need of a revision system.

@jordesign in this comment.

Expect more to come here when phase 3 work gets underway to improve the revision experience, including making them more visual. Of note, a bug fix backport will land in Gutenberg 15.9 to resolve a key pain point in the current experience.

Preview block themes before switching

A while back, @poena shared the following in an FSE Outreach Program exploration that imagined the future of block theme switching:

When I choose a theme to switch to, before I activate it, I can preview it in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. But it is difficult to view other pages than the frontpage that way. I feel like the “live preview” for block themes should be in the site editor, not the customizer, and that the flow should be the same; I should be able to “publish” to activate the new theme.

That vision has been reached with a theme preview option built into the Site Editor itself, allowing folks to check out block themes before activating, resolving a major blockerblocker A bug which is so severe that it blocks a release. to exploring block themes in general. While this is currently listed as an experiment to enable under Gutenberg > Experiments, when stabilized it should have a far reaching effect with folks being able to explore block themes and get an early taste of the Site Editor experience all in one. 

Please help test and give feedback as work continues to refine this experience. The current FSE Outreach Program Rapid Revamp call for testing explores this option and is a great place to offer relevant feedback.

Enjoy loading state improvements

While 6.2 brought improvements to the loading state, the work hasn’t finished with a recent update greatly improving the editor canvas loading experience. While subtle to some, these improvements help make entering the Site Editor less jarring and more cohesive, showing a fully loaded state before you start interacting. Below are before and after visuals to demonstrate the changes and the smoother experience that exists today as of Gutenberg 15.8. 

Video of prior experience:

Video of updated experience: 

Alongside the improvements to the loading state, additional animation related changes and general fixes, like removing a screen flash upon deleting templates and template parts, offer a refined, calmer workflow. 


Stay tuned for more as work continues for the WordPress 6.3 release

#core-editor-improvement

WordPress 6.2 Performance improvements for all themes

With the latest WordPress release out in the world, this post seeks to recap the performance improvements available for all sites. According to this analysis done by @flixos90 that you’re encouraged to dig into, WordPress 6.2 loads 14-18% faster for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes and 2-5% faster for classic themes. Server-side performance is seeing a major boost of 17-23% for block themes and 3-5% for classic themes. These changes demonstrate WordPress’s continued commitment to ensuring that websites built on the platform are optimized for performance.

This builds on efforts done in the past that you can read about in the following posts: Need for Page/Post Speed and Performance Matters.

Thank you to @oandregal and @flixos90 for collaborating on this post!

What’s changed

theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. APIs

Leading up to WordPress 6.2, theme.json related code received more performance related attention partially thanks to an understanding that this newer configuration file has an important role to play in the future of themes. This work aimed to improve Time To First Byte (TTFB), a metric related to server-side performance. It focused on three aspects:

According to this analysis, caching wp_get_global_settings had the most impact in the release, improving classic themes by 9% and block themes by 24%. For context, while wp_get_global_settings was introduced in WordPress 5.9, it’s usage expanded to cover many more use cases, including querying data for rendering front-end blocks. As a result, it benefitted immensely from caching the response.

Lazy-loading images for block themes

While Time To First Byte (TTFB) was a big focus of the 6.2 release, there was also a major change to Largest Contentful Paint, the main user-perceived performance metric: the first image or iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. of the post will no longer be lazy loaded for block themes.

As a reminder, lazy-loading images landed in WordPress 5.5. After an analysis reported that lazy loading images above the fold negatively impacted user-perceived performance, a fix landed in WordPress 5.9 with WordPress 6.2 following up to ensure block themes won’t lazy load the first image or iframe.

Front-end metrics

Outside of the work done to directly improve performance, there was also a focus on making front-end metrics readily available to all. The aim being to ensure developers have the necessary information to make new features performant and catch regressions earlier, all aiding in creating performant future major releases. All Pull Requests in the Gutenberg and wordpress-develop repositories now include front-end performance information. This information is also reported in the following places for a more comprehensive look:

  • The Gutenberg dashboard now collects a number of front-end metrics:
    • Largest Contentful Paint (LCP): tracks the overall user-perceived performance.
    • Time To First Byte (TTFB): tracks server-side performance.
    • LCP-TTFB: tracks client-side performance.
  • There is a new WordPress core dashboard that reports the following server-side metrics:
    • Total: tracks server-side performance. Equivalent to TTFB in the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ dashboard.
    • Before template: tracks the time it takes to dispatch the template_redirect hook.
    • Template: the difference between total time and the time it took to dispatch the tempate_redirect hook.

Get involved

If you’re interested in working on improving performance across the project, make sure to join #core-editor, #core-performance, and attend meetings for both. 

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

#block-themes, #core-editor-improvement, #performance, #themes