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

Core Editor Improvement: Strengthening style options

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. 

There are a variety of tools and methods for styling your site, from global edits via the  Styles interface to more nuanced changes for individual blocks. Ahead of WordPress 6.2, there are new features that make it easier to create consistent designs, understand at a glance what impact changes will have, and customize more aspects of your site to your liking. There’s something for everyone, whether you’re creating your next 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. theme, a designer seeking a pixel-perfect layout, or someone looking to reuse a design. Taken together, these changes create a clearer design process that is intuitive and efficient for modification and reuse. 

Interfaces for creating your style

While expanding the tools and options for what you can style are incredibly important, so are the ways in which design changes are represented. The following interface updates help ensure you can more clearly see the impact of the changes you want to make:

  • Design blocks globally with the new Style Book that allows you to see all blocks on your site as you style them (44420). 
  • Rely on an inline preview of blocks when working with Styles to better understand the impact of changes (42919). 
  • See a broader view of your template when selecting a style variation (44987).

Tools to customize further

While some are content with relying on what a block theme or Core provides, others want more ways to get a design or layout just right. With the last few releases 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/, the following options have been added that allow for that exact kind of deeper customization folks are used to:

  • Add Custom CSSCSS Cascading Style Sheets. for your entire site directly from the Styles interface (30142). 
  • Add Custom CSS on a per block basis directly from the Styles interface (44412). 
  • Edit block style variations, like with the Button or Image blocks, from the Styles interface (46343)

Options to create consistent designs

With a growing number of design tools in each WordPress release, designs can become both more complex and nuanced. To help streamline the design process and make it easier to reuse your work, take a look at these new options:

  • Take local changes from a single block and apply them globally across your entire site, with a new control within the Advanced block settings (44361, 46965). 
  • Copy and paste block styles to create consistent designs in a few clicks (44418). 

Thank you to @dansoschin and @cbringmann reviewing this post. 

#core-editor-improvement, #gutenberg

Core Editor Improvement: Advancing the Site Editor 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. 

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, a collection of work provides massive improvements to the Site Editor to scale the experience, provide clarity, and add new functionality with more planned. These features make it easier to get a complete view of your site and add more ways to make changes to it, from a new Navigation 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. experience to Custom CSSCSS Cascading Style Sheets.. The improved experience also addresses key pieces of feedback that have come up in places like the FSE Outreach Program: frustration with the navigation block, confusion around what pieces are globally editable, desire to add custom CSS, a sense of overwhelm with the number of block settings, and more. While iteration will always be required, this marks a substantial shift in refinement, functionality, and ease, paving the way for wrapping up phase 2

Providing clarity and ease

Previously, when making changes to your site, it was hard to know how those changes might impact other pieces. For example, if you opened up Styles and made changes to a block that wasn’t visible on the template you were on, it wasn’t clear how the changes might land. The same thing happened with Template Part blocks where changes made to one instance impacted all others. There was no indication in the interface that these blocks functioned differently. 

Now, with both the Style Book and built in previews of the Styles system, it’s far easier to know the impact of what you’re doing with Styles. The Style Book accomplishes this by providing a way to toggle a view of Styles that shows all blocks, separated into sections:

Meanwhile, the previews baked into Styles offer another way to see at a glance the changes you’re making without needing to fully enter the Style book. Each offers a specific way to engage with styling your site as you see fit. 

Finally, template parts and reusable blocks have been colorized both in the editor and in list view to clearly show how they are distinct blocks with different functionality compared to other blocks. The Navigation block is slated for the same treatment! This change in color adds visual friction that helps better conceptualize how the design of your site pieces together. 

List View with a Header template part in focus with purple coloring, showing off the new colorization feature.

Site navigation is an incredibly important part of building most sites and the Navigation block has often struggled to offer an experience that covered the majority use case of building a simple menu. While improved fallbacks in 6.1 provided a big step forward, the base usability still needed to be refined. Over the last few releases, as an experiment in Gutenberg > Experiments, an editable list view in block settings has been added to the Navigation block. This editable list view feels reminiscent of the prior menu editing experience but rooted in the world of blocks. You can follow this work in the project’s dedicated GitHub board or the current Navigation block tracking issue.

Scaling the experience

With more templates being added, more functionality, and more types of content in the Inserter, there are numerous situations where the interface needed to scale to accommodate the growing nature of the site editor. This ensures that, as more is added to the experience, the complexity is managed in a way that still makes building a site delightful and intuitive.

Rather than being in a more narrow yet important part of your site when opening the Site Editor, you can now explore it in its entirety and edit from there with Browse mode. This new mode reorganizes the site editor by providing a way to move between templates and template parts. You can add new templates or template parts directly from this interface or choose to edit whenever you’d like. This stands in contrast to the prior experience of opening the Site Editor and being dropped into the template powering the homepage, without necessarily knowing how to get to other templates or template parts.

The Inserter experience was leveled up for patterns, a key part of content and site creation which save time by relying on pre-built designs. The previous design required you to choose from a dropdown before viewing each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of patterns. The new design provides an easy way to see and click between each category before showing larger previews of each pattern, with the option to hover over a pattern to see its name. More work is underway to continue refinements by updating the category names and distinctions. When looking ahead to integration with the Pattern Directory and potential exposure to far more patterns, this iteration provides a strong foundation. 

With an immense number of new design tools introduced in 6.1, the block settings interface needed to adapt. To simplify and organize the experience, the block settings were split into different tabs, adapting based on the needs of each block. While this results in more steps to get to different settings, it provides a mental framework for customizing blocks that better reflects what each option does. This is particularly relevant for more complex blocks, like the Navigation or Group blocks. Room remains to improve this experience, particularly around how to best handle unset/inherited values, and it currently is listed as an experiment to enable in Gutenberg > Experiments. 

Isolated Group block settings, showing a split between styles and settings, on a yellow background.

Thinking longer term, more work is slated for scaling the UI for adding new templates as well

Adding functionality

While the site editor, launched in WordPress 5.9, initially started in a more contained state, each WordPress release brings new functionality to accomplish more. In some cases, this means old things done in new ways to customize your content, like with Custom CSS, and in other cases it has more to do with easing embracing the Site Editor, like with the ability to migrate widgets to block themes. 

Block themers and designers alike have long requested Custom CSS, even as design tools grow enabling you to use built in functionalitytools. For many, there are always going to be items that aren’t covered by Styles, As of Gutenberg 14.8, there’s now the option to add Custom CSS directly in the Style’s interface so you can customize directly while using the Site Editor and ensure those customization stick across themes. This is currently listed as an experiment in Gutenberg > Experiments with work underway to stabilize the feature. Alongside this effort, work is underway to add per block Custom CSS too so they can work in unison.  

Previously when creativity struck in the Site Editor as you were styling an individual block, you’d have to copy what you came up with to the Styles system for that individual block at a global level. As of Gutenberg 14.9, that changes with the introduction of a “Push changes to Global Styles” button which automatically moves those changes to an individual block to Styles. This new functionality makes it easier to design on the go, knowing you can ensure consistency with a press of a button. Iterations are already underway to make this option even more user friendly.

Advanced settings of the Post Title block showing an option to apply changes made to that block to the overall styles system.

Switching to a Block theme needs to be as seamless as possible to help folks begin using the Site Editor. In Gutenberg 14.9, a way to import widgets from a Classic theme into the Site Editor was released, ensuring no content is lost when switching. 

Lastly, the Inserter now allows for media to be added directly so you can add blocks, patterns, and your recent media library items all from one place. Next up, Openverse integration is underway, meaning you’d soon have access to everything within Openverse to use as you create your site. 

What’s next?

More work remains to be done around each of these areas and you can follow along in this tracking issue on GitHub where updates are provided weekly for a main set of tasks. If you want to help shape what’s being worked on, know GitHub issues/PRs are always welcome and the FSE Outreach Program continues to facilitate explorations and calls for testing to explore each of these features. All are welcome to join, regardless of experience level with the Site Editor or WordPress in general. 

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

Core Editor Improvement: Advancing 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. 

The experience of writing your latest post, whether as part of your weekly routine or out of excitement from a recent adventure, just got easier in many different ways. From a new mode that helps you focus on just writing to more keyboard shortcuts for quickly navigating content, there’s something for everyone, no matter how you approach writing your posts. 

For clarity, everything that will be included in the 6.1 release is explicitly noted below. Otherwise, it is available 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/ 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

Select exactly what you want (available in WordPress 6.1)

After the introduction of multi-select, where you can select text across multiple blocks without selecting the blocks as a whole, new enhancements were introduced to balance against situations where you might want to select across blocks. Specifically, partial selection remains the default option until you select 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. that can’t be combined, like an Image block. Tied to this, the animation and appearance of the overall experience were also updated to be clearer and smoother. You can see this at play in the visual below, where partial selection is used until an image is selected and the overlay selection color switches to every block.  This should make both the feeling of selecting blocks and the accuracy of doing exactly what you want much more cohesive. 

GIF showing text being selected at first across individual paragraph blocks before, when selecting an image block, all blocks being selected.

Move faster with keyboard shortcuts (available in Gutenberg 14.3)

Gutenberg 14.3 included support for alt + arrow keyboard combinations to make navigating blocks of text quick and easy:

  • If your cursor is at the end of a long paragraph, you can press the alt + up arrow to move to the beginning of that paragraph. 
  • If you are already at the beginning of a text block, you can press the alt + up arrow to move to the start of the previous paragraph. 
  • If you press alt + down arrow, it will move you to the end of a block of text.

Improved document settings (available in WordPress 6.1)

A revamped document settings experience improves legibility and resulting usability with a cleaner, more organized display. It should help you more readily access all the important information about your post/page, including the template picker and scheduler. Specifically, the fields for post format, slug, template, and authors are aligned and have the same width. The template displays ‘default template’ instead of none, and the Permalink link opens a popover to edit the slug when clicked. The result is a cleaner, more organized display so you can see exactly what you need to before sharing your next post. 

Before and after images next to each of changes to document settings with the after image showing more consistency.

Do more with the Quote & List blocks (available in WordPress 6.1)

The Quote block now allows you to add nested blocks, meaning you could add the new List block inside the new Quote block. Similarly, the List block uses inner blocks, meaning your list items can be easily sorted and indented with a much-improved user experience.

Quote block with multiple inner blocks listed, including image and list.

Opt in to fewer distractions and more focus (available in Gutenberg 14.4)

For those looking for an even more focused experience, enter distraction-free mode available as soon as Gutenberg 14.4 is released. It’s a more drastically reduced experience with the following settings in place, allowing you to focus on the creation experience as much as possible: 

  • Hides the top toolbar until one intentionally hovers over where it typically sits.
  • Removes many top toolbar buttons.
  • Automatically closes any open sidebars, from block settings to list view. 
  • Hides the insertion point indicator, reducing visual clutter. 
  • Hides the block toolbar. 

More work remains to be done to fully form this new mode but the promise of what it provides is exciting for those looking for a more contained writing experience.

Use the autocompletion for links anywhere you want (available in WordPress 6.1)

While the [[ shortcut was introduced a while ago, it can now be used anywhere you want to add any internal link you’d like. Previously, it was isolated to just the blocks that explicitly opted in, and as you can see in the video below, you can now take advantage of this feature no matter what you’re editing:

Transform blocks with ease with improved organization (available in WordPress 6.1)

The transforms menu offers a shortcut to switch to different blocks, depending on your content. As the number of blocks has grown and the reliance on this menu has increased, the menu’s organization has evolved to emphasize content blocks. Specifically, blocks that support paragraph, heading, list, and quote transforms, are now weighted over other more structural blocks, like a Group or Column. This should help common pathways be easier to find as more common transformations. 

Heading block transform menu open showing prioritized content blocks.

Keep List View open by default (available in WordPress 6.1)

For any List View fans, Gutenberg 13.3 introduced the option to have List View open by default. This makes navigating complex content, like a long post sharing every detail of a big adventure, much easier. Rather than needing to open it every single time you enter the editor, it’ll be waiting for you with every new post you write:

Preferences modal open showing "always open list view" checked off.

Enjoy improvements to the various inserters (available in Gutenberg 14.2)

The inserters are a big part of the base experience of using the block editor. An update to the animation effect for the sibling and in-line inserters now offers a more natural and responsive feel. On the flip side, when you’re typing, the block inserter is now hidden to reduce visual noise and allow more of a focus on the writing experience itself: 

Taken together, these enhancements will allow you to engage with the inserters better only when you need them. 

Control image captions from the block toolbar (available in Gutenberg 14.4)

You can now add or remove a caption for an image directly from the block toolbar. If a caption has already been set, it will be included by default when the image is added to your content, saving you time and giving you options.

More to come

Ensuring the base editing experience is excellent is always a work in progress and a focus, especially as work is underway to bring the block editing experience to more parts of the site for more people. As you run into bugs, feature requests, or feedback, please remember to share in GitHub so the experience can continue to be refined. 

#core-editor-improvement, #gutenberg

Core Editor Improvement: Catalyst for creativity and control

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. 

Alongside the addition of more blocks to edit more parts of your site, more design tools are being added across all blocks to both ensure consistency in the experience and to allow folks to customize their site even more, without needing to use CSSCSS Cascading Style Sheets.. This post goes through each categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. of design tools, what blocks they are available in, the progress made, and some fun examples showing off what you can now do. The result is a catalyst for creativity, with more to come on the horizon. 

Typography 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. Support

Visual listing out all of the block with typography support in four columns with a green color scheme.

These settings include font size, line height, font style, font weight, text transform, letter spacing, font family, and text decoration. When combined, these allow you to have new ways to differentiate your content, whether by making something stand out more or less. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

  • Column/Columns
  • Categories
  • Code
  • Comment Author Name
  • Comments Content
  • Comment Date
  • Comment Edit Link
  • Comments Reply Link
  • Comment Template
  • Paragraph
  • Comments
  • Comments Pagination
  • Comments Pagination Next
  • Comments Pagination Numbers
  • Comments Pagination Previous
  • Comments Title
  • Cover
  • Home Link
  • Group
  • Latest Comments
  • List
  • Media & Text
  • Page List
  • Post Author
  • Post Author Biography
  • Post Author Name
  • Post Comments Count
  • Post Comments Link
  • Post Content
  • Post Date
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.
  • Post Template
  • Post Terms
  • Post Navigation Link
  • Preformatted
  • Pullquote
  • Search
  • Table of Contents – not available in 6.1
  • Latest Posts
  • Navigation
  • Query No Results
  • Query Pagination
  • Query Pagination Next
  • Query Pagination Numbers
  • Query Pagination Previous
  • Query Title
  • Quote
  • Term Description
  • Verse
  • Button/Buttons
  • Archives
  • Calendar
  • Site Title
  • Site Tagline
  • Table
  • Heading
  • Navigation Link
  • Read More

      To see the power of these supports in action, here’s an example of using them to personalize a button: 

      The audit for this set of design tools is 85.71% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Dimensions and Spacing Block Support

      Visual listing out all of the block with dimension and spacing support in four columns with a blue color scheme.

      These supports include padding, margin, block gap, height, width, and min height. As the name suggests, they give you exact control over the layout of blocks both in relation to inner blocks (like the layout of a List or Gallery) and in relation to blocks nearby. At a high level, various combinations of these options are available in the following blocks with many added for the 6.1 release cycle: 

      • Archives
      • Audio
      • Tag Cloud
      • Table of contents – not available in 6.1
      • Table
      • Term Description
      • Spacer
      • Post Date
      • Heading
      • Paragraph
      • Query Title
      • Post Title
      • Video
      • List
      • Media & Text
      • Verse
      • Categories
      • Comment Edit Link
      • Comment Date
      • Comment Reply Link
      • AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.
      • Site Logo
      • Social Links
      • Gallery
      • Button/Buttons
      • Code
      • Column/Columns
      • Comment Author Name
      • Comment Content
      • Comments Title
      • Cover
      • Group
      • Heading
      • Navigation
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Excerpt
      • Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.
      • Read More
      • Separator
      • Site Tagline
      • Site Title

      To show how you can use these tools to refine your work, here’s an example of just using the block gap option to manage the layout of social links: 

      The audit for this set of design tools is 54.76% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Colors Block Support

      Visual listing out all of the block with color support in four columns with an orange color scheme.

      This includes text color, background color, link color, gradient options, and duotone filters. These options allow you to do everything from add a custom duotone 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. to all featured images in a display of posts to picking unique color combinations for your social links. At a high level, various combinations of these options are available in the following blocks with various ones added for the 6.1 release cycle: 

      • Social Links
      • Gallery
      • Calendar
      • Table of Contents – not available in 6.1
      • Social Links
      • Button
      • Avatar – Duotone only
      • Code
      • Column/Columns
      • Comment Author Avatar – Background only
      • Comment Author Name
      • Comment Content
      • Comment Date
      • Comment Edit Link
      • Comment Reply Link
      • Comments
      • Comments Pagination
      • Comments Pagination Next
      • Comments Pagination Previous
      • Comments Title
      • Cover – Duotone only
      • Gallery – Background only
      • Group
      • Heading
      • Image – Duotone only
      • List
      • Media & Text
      • Navigation
      • Paragraph
      • Post Author
      • Post Author Biography
      • Post Author Name
      • Post Comments Count
      • Post Comments Form
      • Post Comments Link
      • Post Date
      • Post Excerpt
      • Post Featured Image – Duotone only
      • Post Navigation Link
      • Post Terms
      • Post Title
      • Preformatted
      • Pullquote
      • Query
      • Query No Results
      • Query Pagination
      • Query Pagination Next
      • Query Pagination Numbers
      • Query Pagination Previous
      • Query Title
      • Quote
      • Read More
      • Search
      • Separator
      • Site Logo – Duotone only
      • Site Tagline
      • Site Title
      • Social Links
      • Table
      • Table of Contents
      • Term Description
      • Verse

      To see these supports in action, here’s an example of providing your own colors for social link icons that match with the branding on your site: 

      The audit for this set of design tools is 65.47% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Layout Block Support

      Visual listing out all of the block with layout support in one columns with a blue color scheme.

      Of note, this support only applies to container blocks (buttons, columns, gallery, etc) since it impacts the layout of blocks within each.  At a high level, various combinations of these options are available in the following blocks. Note that no new supports were added for the 6.1 cycle: 

      • Buttons
      • Column
      • Columns
      • Comments Pagination
      • Gallery
      • Group
      • Navigation
      • Post Content
      • Post Template
      • Query
      • Query Pagination
      • Social Links

      To see these specific container related options in play, here’s an example with the navigation block where you can quickly switch between different configurations as you find which best fits with the headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. of your choosing:

      The audit for this set of design tools is 52.17% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      Border Block Support

      This includes the ability to control color, radius, style, and width on each side of the border. These powerful set of tools allows for some neat ways to decorate everything from individual images to overall columns of content. At a high level, various combinations of these options are available in the following blocks with a few added for the 6.1 release cycle: 

      • Post Featured Image
      • Column/Columns
      • Image
      • Avatar
      • Button
      • Code
      • Column/Columns
      • Comment Author Avatar
      • Comments Title
      • Group
      • Pullquote
      • Read More
      • Search

      To see how borders can transform a block, here’s an example showing how a theme author can customize a featured image block to make it stand out even more: 

      The audit for this set of design tools is 14.28% complete. To follow further efforts and see more details about the support added to each block, please review this tracking issue

      The power of combining tools

      While this post sectioned out the various design tools to make it easy to catch up on all that’s happened, remember that the true power in these tools comes when they are combined altogether. For a simple yet powerful and common example, here’s a video showing how with some very quick changes you can make a paragraph pop to better call attention to a part of your post:

      For a more complex example, here’s a video showing how you can customize your featured image block with various borders and a duotone filter, long before you select the image of your choosing: 

      More to come

      The above simply captures the initial set of work to create consistency across blocks, with tons more planned to offer an increasingly intuitive default experience for all blocks and to stabilize the underlying block support APIs. This has been a massive effort involving a flurry of PRs across multiple different 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 ahead of 6.1. As these tools grow, the question of how best to scale the interface becomes more important, with explorations already underway for a better way to reset values and clarify inherited styles. Tied to this, it’s also important that any omission of support is deliberate in order to ensure a more cohesive experience. 

      Props to @markoserb for the design help with the visuals you see above and @beafialho for help with the video demos!

      #core-editor, #core-editor-improvement