What’s new in Gutenberg 16.7? (27 September)

“What’s new in 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/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg.

What's New In Gutenberg 16.7?

Gutenberg 16.7 has been released and is available for download!

16.7 is the last Gutenberg release ahead of the upcoming WordPress 6.4 release, so it’s packed with features and 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. Exciting new features include the new Font Library for font management within the editor, lots of enhancements to pattern management, simplified lightbox functionality, and many UXUX User experience enhancements.

This release consists of 331 pull requests authored by 88 contributors, including 7 new contributors! 🥳 🎉

Table of Contents

  1. Font Management with the Font Library
  2. Import/Export of Patterns
  3. Explore New Pattern Filtering
  4. Naming Group Blocks in the Editor
  5. “My Patterns” Category Reinstated in Post Editor Inserter
  6. Simplified Lightbox Functionality for Images
  7. Background Image Control Added to Group Block
  8. New Social Link Icon for X
  9. Changelog
  10. First time contributors
  11. Contributors

Font Management with the Font Library

Screenshot of the Styles panel in the editor with the Typography settings open

The new Font Library allows users to install, remove, and activate typographic fonts from various sources in WordPress via the editor. The installed fonts are enabled globally, independent of the active theme in the /wp-content/fonts directory, similar to the Media Library. As part of this new feature, users can add fonts manually by uploading them from their local machine or choosing from a list of Google Fonts. (#53884 & #53307)

Import/Export of Patterns

Screenshot of a pattern in the editor with the options panel open, showing the new "Export as JSON" option

It’s now possible to import and export patterns as 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. files directly from the site editor’s patterns screen. This change mirrors the existing import/export functionality in the /wp-admin patterns screen, making it more straightforward for all users to migrate patterns between sites. (#54337)

Explore New Pattern Filtering

Screenshot of the pattern list panel, highlighting the new filters dropdown

Pattern filters have been restructured, with filters now being housed within a dropdown at the top of the pattern list panel. A sticky 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. has also been added to the top of the list panel for improved navigation. (#54681)

Naming Group Blocks in the Editor

Screenshot of the editor with the List View open, showing a custom named block with the name, "My custom name"

Group blocks can now be named using custom naming. Naming these blocks will update their name in the List View, making it easier to distinguish between blocks. 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. marks another step forward as the Site Editor’s tools and features continue to expand. (#53735)

“My Patterns” CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Reinstated in Post Editor Inserter

Prompted by feedback, the “My patterns” category has been reintroduced to the post editor’s inserter, providing a central place for users to view their custom patterns. (#54767)

Simplified Lightbox Functionality for Images

The Behaviors UIUI User interface introduced as an experimental feature in Gutenberg 15.9 has been removed and replaced with an “Expand on click” toggle in the 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.’s Inspector Controls and in the Global Styles. (#54509) (#54509)

The support for Behaviors in the theme.json has also been deprecated and will be removed completely in Gutenberg 17.0:

  • Users who enabled the “lightbox” behavior in their theme.json file should migrate to a new syntax where the lightbox is simply a new block-level setting:
“settings”: {
	“blocks”: {
		“core/image”: {
			“lightbox”: {
				“enabled”: true | false
				“allowEditing”: true | false
			}
		}
	}
}
  • Note that the support for the “animation” value has been removed.

If you enabled the lightbox on any Image blocks using the previous Behaviors UI, please open and re-save posts that include those blocks to ensure they get migrated to the latest syntax.

With the removal of support for the “animation” value, all images will now only use the “expand” (zoom) animation, even if they had previously used the “fade” animation.

Background Image Control Added to Group Block

Background image support has been added to the Group block, in line with the color controls. (#53934 & #54439)

A new social link icon has been added for the X service. It can be found when searching for “X” or “Twitter”. (#54092)

Changelog

Features

Block Library

  • Social Links: Add X. (54092)

Typography

Font Library:

  • Add mime type validation for font uploads. (53986)
  • Font Collection backend. (54098)
  • Frontend [Stage 1]. (53884)
  • Font Collections frontend. (54566)

Patterns

  • Allow import/export patterns as JSON files. (54337)

Block Editor

  • Adds ‘nofollow’ setting to inline links (rich text only). (53945)
  • Rename Group blocks in the Editor via Modal. (53735)

Enhancements

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data

  • Add edits data to the useEntityRecord. (54167)

Components

  • Add non-listbox functionality back to CircularOptionPicker. (54290)
  • Added missing “middle” allowed tooltip position. (52147)
  • BlockSettingsMenu: Ensure only one block settings menu is open at a time. (54083)
  • Bundle the block copy handler within the BlockCanvas component. (54207)
  • Bundle the block selection clearer hook into the BlockCanvas component. (54209)
  • Ensure that ‘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.’ color pickers have relevant labels. (54468)
  • Export ProgressBar to allow it to be used. (54404)
  • FormTokenField – add prop to allow saving of tokens onBlur. (53976)
  • Refactoring BorderControl‘s unit tests. (54155)
  • Remove unnecessary padding-right on the dismissible notice. (52240)
  • Support controlling open/closed state for Dropdown and DropdownMenu. (54257)
  • ToggleGroupControl: Rewrite backdrop animation with framer motion shared layout animations. (50278)
  • ToolTip: Refactor using ariakit. (48440)
  • Tooltip: Add placement prop to replace deprecated position. (54264)
  • Tooltip: Add new hideOnClick prop. (54406)
  • Tweak border control button to proper metrics and simpler action. (53998)
  • Update FormTokenField styling for consistency and visibility. (54402)
  • Update spacing sizes control metrics and icons. (54470)
  • Update/form token field onblur. (54445)
  • Popover: Update positionToPlacement types. (54101)
  • SearchControl: Allow for 32px compact size, introduce option to change default size to 40px. (54548)

Block Library

  • #39457: Image block keep image size on replacing image. (49982)
  • Add __next40pxDefaultSize to 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. opacity control. (54389)
  • Add aspect ratio to image placeholder. (54216)
  • Allow using a button element for button blocks. (54206)
  • Buttons Block: Show inserter if button have variations (#53498). (53783)
  • Change dialogdescription for renaming group block. (54358)
  • Footnotes: Add missing placeholder instructions text. (54056)
  • Heading block: Add support for writingMode. (54351)
  • Improved description for the post-terms core block. (47715)
  • Make matrix position behave like valign. (54050)
  • Navigation block: Add core/buttons to the allowed blocks. (53966)
  • Remove unused prop from GroupPlaceHolder component. (51493)
  • Template parts: Use the template actions component for template parts patterns. (54173)
  • Text orientation: Rotate vertical text when the text is aligned (Upside down text). (53175)
  • Update parent labels in page attributes panel and page list block. (54403)
  • Use __next40pxDefaultSize on more UI. (54400)

Interactivity 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.

  • Add timeout option to navigate(). (54474)
  • Add manual Server Side Rendering (SSR) to the Interactivity API blocks. (54343)
  • Ensure that the view scripts of core blocks have the wp-interactivity dependency. (54594)
  • Image block: Revise lightbox UI to remove ‘behaviors’. (53851)
  • Image block: UI updates for the image lightbox (redo). (54509)
  • Override unfinished navigate calls. (54201)
  • 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.: Add design enhancements for the “enhanced pagination” setting. (54455)
  • Query Loop: Allow “enhanced pagination” only with core blocks. (54347)
  • Query block: Start prefetching on first click to next/previous. (54781)

Patterns

  • Add categories to user patterns, and allow filtering by these in site and post editor. (53835)
  • Add editing of pattern categories to site editor. (54640)
  • Add user categories to site editor 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. navigation screen. (53837)
  • Add user pattern categories to post editor inserter patterns tab. (53933)
  • Apply white background to the preview as a fallback. (54534)
  • Merge unsynced into inserter patterns tab and add paging and filtering. (54007)
  • Update empty template part label. (53842)
  • Memoize useSelect for usePatterns. (54588)
  • Site Editor: Prevent unintended actions on the classic theme. (54422)

Design Tools

  • Add back tooltip to styles UI. (54574)
  • Add block gap to Post Content block. (54282)
  • Add block instance elements support for buttons and headings. (53667)
  • Background Image block support: Add reset menu item. (54341)
  • Block Supports: Add background image support to Group block. (53934)
  • Columns: Adopt button and heading element colors. (54104)
  • Update block styles UI. (54446)
  • Improve background image control. (54439)

Site Editor

  • Copy: End the Templates page description in the Site Editor with a period. (54221)
  • Edit Site: Update progress bar to determinate. (53399)
  • Follow up visual tweaks to block-specific commands. (54427)
  • Site editor sidebar: Abstracting footer so it can be used across details screens. (54082)
  • [Page Inspector]: Add ability to switch templates. (51477)

Global Styles

  • Rename settings & userSettings props to value & inheritedValue respectively in ImageSettingsPanel. (54593)
  • Update Block specific CSSCSS Cascading Style Sheets. label to include additional instructions. (49626)

Block Editor

  • Use gray color on link control advanced toggle. (54545)
  • Verse: Exit on triple Enter. (53332)
  • Block editor: hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.: Fix rules of hooks violations (2). (48943)
  • Always show the total number of patterns even with only one page. (54813)

Typography

  • Font Face: Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. from Core changeset 56500. (54218)
  • Font Library: Changing the upload directory to wp-content/fonts. (54122)
  • Font Library: Load collection JSON data from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the collection configuration. (54067)
  • Font Library: Use wporg cdn to host the google fonts json data. (54795)

Themes

  • Theme Previews: Make the back button customizable. (54242)

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

  • Remove ‘Footnotes’ and ‘Comments’ from the non-dynamic block registration list. (54154)

Media

  • Correct function name handleFileChange is replaced by wrong function name. (52250)

List View

  • Allow Escape key to deselect blocks if blocks are selected. (48708)
  • Try directing focus to the list view toggle button when closing the list view. (54175)

Block API

  • Deprecated get_file_path_from_theme method. (45831)

Keyboard Shortcuts

  • Make the shortcuts provider optional. (54080)

Blob

  • refactor(blob): Type URL parameter as optional. (49201)

Collaborative Editing

  • Try bundling sync package. (54738)

New APIs

Components

  • Revert “Export ProgressBar to allow it to be used”. (54428)

Block API

  • Stabilize Block Hooks feature. (54293)

Data Layer

  • Data: Introduce countSelectorsByStatus redux metadata selector. (53767)

Framework

  • Add useStateWithHistory hook and use to show a block editor with undo/redo. (54377)
  • BlockEditor: Add BlockCanvas component = 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. + BlockList + WritingFlow. (54149)
  • Extract undo/redo as a separate package. (54292)

Bug Fixes

Components

  • Add children back to toolbar item render for rendered components. (53314)
  • Add missing useState import in Border Control documentation. (49476)
  • Adjust input-style__focus mixin to proper focus size. (54398)
  • DropdownMenu v2: Fix submenu chevron direction in RTL languages. (54036)
  • Fix incorrect focus style size on InputControl. (54394)
  • Make CircularOptionPicker focus styles resilient to button size changes. (54196)
  • PaletteEdit: Fix padding in RTL mode. (54034)
  • Popover: Set is-positioned class only after animation has finished. (54178)
  • Storybook: Restore previous URL for the introduction documentation page. (54247)
  • Storybook: Update doc param values for ConfirmDialog. (54130)
  • Update borderFocus to ADMIN.theme. (54425)
  • Use standard focus style on BorderControl. (54429)
  • DateTimePicker: Fix onChange callback check so that it also works inside iframes. (54669)

Post Editor

  • Adds animation state for DFM off to post editor header. (54244)
  • Block Editor: Memoize the createPageEntity callback. (54580)
  • Edit Post: Avoid fetching the edited template for non-viewable posts. (54158)
  • Editor: Catch errors when creating terms. (53369)
  • Fix layout when post content is root block. (54485)
  • Make order of pinned items consistent. (53908)
  • Prevent the list view shortcut from typing unexpected characters. (54078)
  • Top Toolbar: Prevent the focus outline of the button from being cut off. (54172)
  • Try using fallback layout instead of default in post editor. (54371)
  • [Edit Post]: Toggle Distraction free mode mode based on compatibility. (54073)

Block Library

  • Block Moving Mode: Prevent the block from being moved into itself. (54137)
  • Fix navigation block submenu focus when closing menu with the ESC key. (54299)
  • List Block: Fix numbering style to be applied correctly. (53301)
  • Navigation Link: Restore tooltip. (54263)
  • Post navigation link: Fix the writing mode setting on the front. (54053)
  • PreviewOptions: Fix critical error when children not passed. (54284)
  • Remove role attribute when set to null in data-wp-bind. (54608)
  • [Commands]: Add group/ungroup commands only when eligible. (53988)
  • Replace the gutenberg_ prefix with wp_ in image block. (54678)
  • Navigation block: Fix padding on mobile overlay when global padding is 0. (53725)

Patterns

  • Command Palette: Fix duplicate Patterns command. (54133)
  • Don’t output root padding when editing patterns. (54373)
  • Fix user pattern categories in site editor inserter. (54641)
  • Remove pattern category as a variation for post terms block. (54532)
  • StartPageOptions: Improve conditions to show modal only on a brand new page. (54245)
  • Add My patterns back to post editor inserter categories. (54767)
  • De-emphasise pattern filters in inserter. (54681)
  • Fix All Patterns category default display. (54721)
  • Fix bug with new categories not showing. (54768)
  • Fix bug with pattern categories not saving sometimes. (54676)
  • Fix category type for back link. (54753)
  • Fix duplication of uncategorized patterns. (54755)
  • Inject the theme name into the block attributes. (54595)
  • Reinstate my patterns category in site editor. (54726)
  • Require a title in the creation modal. (54717)
  • Use slug as fallback for empty title. (54731)
  • Allow non-user patterns under Standard sync filter. (54756)
  • Check that pattern is synced before replacing blocks with synced pattern on creation. (54804)
  • Fix back navigation after pattern creation. (54852)
  • Fix category control width in site editor. (54853)
  • Improve sentence case consistency of labels and notices. (54807)

Block Editor

  • Add keyboardReturn submit button back to LinkControl. (52620)
  • Formats: Memoize link value passed to the LinkControl. (54603)
  • List: Merge consecutive lists. (52995)
  • Rich text: Fix useAnchor (remove nextElementSibling). (54013)
  • Iframe: Adjust keydown event bubbling. (54565)
  • Reset page after changing pattern filters or search value. (54774)
  • Block Editor: Fix ‘isBlockSubtreeDisabled’ private selector. (54618)

Site Editor

  • Bump the z-index of the rename modal. (54277)
  • Default template lookup should use slug, not the full permalink, in the site editor. (54599)
  • Fix “Blogblog (versus network, site) title” input border radius in Index / Home details panel. (54192)
  • Hide ghost top toolbar. (54555)
  • CreateTemplatePartModal: Disable the ‘Create’ button while saving. (54716)

Plugin

  • Ensure font-face styles are printed in iframe editors. (54313)
  • Font Face & Font Library: Load PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files only if the main class does not exist. (54103)
  • Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property. (54581)
  • Update readme.txt “tested up to 6.3”. (54072)
  • Update cherry-pick script to correctly verify 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/ CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. setup. (54720)
  • Conditionally remove deprecated ‘print_emoji_styles’. (54828)

Typography

  • Font Library: Ensure merged fontFace data is enconded as an array instead of an object. (54435)
  • Font Library: Fix duplicate variants with different file types. (54490)
  • Font Library: Setting wp_font_family custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. as _builtin and not plublic. (54559)
  • Font Face: Get name from “fontFamily” setting, not “name”. (54615)
  • Font Library: Fix modal width on mobile viewport. (54518)
  • Font Library: Fix space above theme fonts in font library modal. (54598)
  • Font Library: Fix error installing system fonts. (54713)
  • Font Library: Remove font files created by tests after tests run. (54771)
  • Font Library: Avoid rendering font library ui outisde gutenberg plugin. (54830)

Widgets Editor

  • Edit Widgets: Fix broken layout. (54372)
  • Edit Widgets: Fix invisible action area when the top toolbar is enabled. (54329)
  • Fix top toolbar for 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. widgets sidebar control. (54255)

Global Styles

  • Font Library: Fix notification error for actions related to custom fonts. (54535)
  • Prevent layout changes from saving the whole inherited settings object. (54500)

Block API

  • Blocks: Fix incorrect placement for hooked blocks in the parent container. (54349)
  • Pass correct content argument to enter transforms. (54108)
  • Block Hooks: Avoid processing empty content for loaded templates. (54719)

Rich Text

  • Revert: Rich text: Copy 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.) name on internal paste. (54301)

Interactivity API

  • Image: Fix block serialization test case to cover deprecation of behaviors. (54570)
  • Query Loop: Select first anchor inside Post Template with “enhanced pagination” enabled. (54730)

Icons

  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. forwardRef warnings for TooltipAnchors. (54492)

History

  • Fix extra undo/redo step when removing or replacing all blocks. (54457)

Synced Patterns

  • Patterns: Apply layout and alignment to synced patterns in the editor. (54416)

npm Packages

  • Workflow: Fix the issue with npm publishing for WP major version. (54088)

Media

  • useMediaQuery: Avoid crashing on Safari < 14. (54023)

Nested / Inner Blocks

  • Fix: InnerBlocks allowed blocks change with different sizes. (53943)

Layout

  • Post Content: Ensure layout classnames are applied in readonly preview. (53864)

Document Settings

  • Set the timezone correctly. (48083)

React i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.

  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. import in react-i18n documentation. (54308)

Design Tools

  • Background Image control: Use consistent button, ensure descriptive text accounts for no image selected. (54711)

Collaborative Editing

  • Make sure sync code only runs when experiment is enabled. (54710)

Core Data

  • core-data: Fix nested property access with undefined name. (54790)

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)

Block Library

  • Comments form: Accessibility fixes for back-end. (54393)
  • Navigation: Add ariaLabel block support. (54418)
  • Table block: Fix semantic structure for screen readers on back-end. (54324)

Components

  • Improve Notice component accessibility. (54498)
  • Making Circular Option Picker a listbox. (52255)
  • Allow Modal to place focus on first element within contents via new API. (54590)
  • Improve the placeholder instructions accessibility. (45801)

Site Editor

  • Clarify the “Entity” message of the snackbar. (54333)
  • Use solid accent color selection in command palette. (54318)

Block Editor

  • Update nofollow control label. (54184)

Performance

  • Use median instead of average to stabilize First Block metric. (54157)
  • improvement: Reduce the use of the _wp_array_get function. (51116)

Block Library

  • Footnotes: Add block-level caching when parsing content for footnotes. (52577)
  • Table of Contents: Use a custom store subscription for observing headings. (54094)
  • getClientIdsOfDescendants: Support single ‘clientId’ as a argument. (54421)

Site Editor

  • Edit site: Prevent enqueuing entire stylesheet in iframe. (54254)
  • Fix first block locator’s page reference. (54188)

Patterns

  • Move mapping of values from core-data selector into consumers. (54576)

Block API

  • Unnecessary JSON decoding in block parser. (54424)

Components

  • Tooltip: Render tooltip markup in the DOM only when open. (54312)

Post Editor

  • Editor: Memoize ‘getNestedEditedPostProperty’ selector helper. (54160)

Developer Experience

  • Tests: Improve the environment setup. (54309)

Experiments

Interactivity API

  • Remove wp_store from query block. (54359)

Documentation

  • Add a documentation page to explain how to implement undo/redo in a third-party editor. (54546)
  • Add the Commands Data page to Handbook. (53634)
  • Bootstrap a documentation website tailored towards the usage of Gutenberg outside WordPress. (54375)
  • Button: Undocument the focus prop. (54397)
  • Docs: Add missing callout class. (54558)
  • Docs: Add note about enqueueing assets in the iframe and trim whitespace. (54125)
  • Docs: Consolidated design Reference with the main Design Contributions doc. (51065)
  • Docs: Move Glossary page to Getting Started. (54120)
  • Docs: Move the FAQ page to Getting Started. (54117)
  • Docs: Overhaul the Development Environment section of the Block Editor Handbook. (54395)
  • Docs: Remove Outreach doc from Getting Started section. (54314)
  • Docs: Remove unneeded block theme docs. (51071)
  • Fix bullet hierarchy. (47178)
  • Fix createI18n package import location. (51328)
  • Fix incorrect image src in Design Contributions doc. (54302)
  • Fix: Broken links on ToolbarGroup documentation. (54229)
  • Fix: Remove unrequired code from BorderControl documentation. (54348)
  • Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • Incorrect file extension?. (54134)
  • Theme JSON schema: Fix “not allowed error” in settings property. (54521)
  • Try: Allow multiple attribute to be a string in upload components. (53350)
  • Update Commands documentation with examples and more context. (54441)
  • Update the components changelog to mark the popover slot removal as a breaking change. (54022)
  • Update versions in WP for 6.3.1. (54069)
  • Updated Related Components Links. (49176)
  • Updates Edit and Save code examples to have matching open/closing tags. (53915)
  • [Docs: Getting Started / Block Development Environment] Updates on the text to improve clarity and preciseness. (54563)
  • documentation – Contribution Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.: Formatted text and changed some titles and structure. (54258)
  • documentation [Block Editor Handbook / Getting Started / Block Development Environment]: Fix links. (54571)
  • Add missing global declaration in DocBlockdocblock (phpdoc, xref, inline docs) of interactivity files. (54683)

Code Quality

  • Adds removal notice to view.js.mustache. (54105)
  • Block editor: Remove __unstableElementContext and filter EditorStyles instead. (52888)
  • Improving error messages and codes in jest-console, matcher.js. (53743)
  • Indicate nested paths on __experimentalSaveSpecifiedEntityEdits. (54161)
  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests: Update popover matcher. (54168)
  • Style engine: Sync doc changes from core. (54650)

Components

  • Composite: Refactor to TypeScript. (54028)
  • FocusableIframe: Refactor to TypeScript. (53979)
  • IsolatedEventContainer to Typescript (just test file). (54316)
  • Popover: Remove custom frame scroll/resize listeners. (54286)
  • Revert FormTokenField – add prop to allow saving of tokens onBlur. (54444)
  • Toolbar/ToolbarDropdownMenu Typescript Conversion. (54321)
  • ToolbarGroup – Typescript. (54317)
  • with-focus-outside: Convert to TypeScript. (53980)

Patterns

  • Revert usePatternsState to return an array instead of object. (54582)
  • Add missing dependency of @wordpress/patterns on @babel/runtime. (54118)
  • Move category map creation out of useSelect. (54584)
  • Remove experimental prefixes from patterns package. (54338)
  • Site editor: Consolidate constants. (54484)
  • Fix sidebar nav screen fallback category. (54754)

Post Editor

  • Annotations: Run end-to-end tests with iframe. (54191)
  • EditPostPreferencesModal: Refactor to remove snapshots for index.js. (54141)
  • Extract WordPress specific styles from the BlockTools component. (54356)
  • PageAttributesParent: A minor fixes for useSelect and useMemo hook usages. (54433)
  • PostSyncStatus: Derive sync status inside the selector. (54159)

Block Library

  • Heading: Remove unused ‘aria-label’. (54223)
  • Image Editor: Fix ESLint warnings and remove unnecessary dependencies. (53506)
  • Pattern Category: Set ‘publicly_queryable’ to false. (54567)
  • Post Terms: Fix a ‘useSelect’ warning in the ‘usePostTerms’ hook. (54068)

Interactivity API

  • Prepare image lightbox for private version of the Interactivity API in 6 4. (54547)
  • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks. (54297)
  • Search block: Switch interactivity to the Interactivity API. (53343)

Site Editor

  • Remove Tooltip workarounds added in the site and block editor. (54450)
  • 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.: Remove ‘gutenberg’ query param from revisions.php. (54166)
  • Prune store constants. (54585)
  • Use constants rather than hard coded template strings. (54586)

Rich Text

  • RichText: Remove __unstableOnSplitMiddle. (54183)

Typography

  • Fluid typography: Backporting Core since annotations. (54204)
  • Font Face: Remove static instance in wp_print_font_faces(). (54228)
  • Font Library: Refactor logic to disable font library in the frontend. (54748)

Block Editor

  • Improve code commenting around focus mount behaviour of rich text Link UI. (54085)
  • List e2e: Run all tests with iframe. (54181)

Layout

  • Use override editor style API. (54466)

Plugin

  • Require minimum WordPress 6.2. (53451)
  • Ensure that Block Hooks work correctly after landing in WP core. (54651)
  • Update uuid package to 9.0.1. (54725)

Themes

  • Iframe: Skip scoping styles. (46752)

Tools

Testing

  • Button: Update test assertion to match test name. (54260)
  • E2E: Do not run page actions in beforeEach hook when using fixme. (54065)
  • Fix Font library unit tests. (54645)
  • Font Library: Remove upload_mimes filter after uploading fonts. (54647)
  • Migrate RichText end-to-end tests to Playwright. (53493)
  • Perf Tests: Update base point to compare. (54111)
  • Puppeteer tests: Try to fix failing tests related to notices in core. (54452)
  • Remove accidental addition of perf test results (2). (54363)
  • Remove accidental addition of perf test results. (54355)
  • Update WPCSWPCS The collection of PHP_CodeSniffer rules (sniffs) used to format and validate PHP code developed for WordPress according to the WordPress Coding Standards. May also be an acronym referring to the Accessibility, PHP, JavaScript, CSS, HTML, etc. coding standards as published in the WordPress Coding Standards Handbook. to v3.0, and fix all reported Coding Standards issues. (53866)
  • Modal: Add more unit tests. (54569)
  • end-to-end Test Utils: Add new fixtures for performance metrics. (52993)
  • end-to-end Tests: Fix ‘no-useless-not’ ESLint warnings. (54652)
  • package(e2e-test-utils): Update fixtures. (54128)
  • wp-scripts: Add support for Playwright. (53108)
  • Font Library: Use resolvable domain in test. (54763)
  • Global styles tests: Fire hooks when updating post. (54836)
  • Remove action to fix tests. (54806)
  • Font Library: Fix set upload dir test. (54762)

Build Tooling

  • Backport tools: Filter PRs to be cherry picked by merged date. (54171)
  • Changelog tool: Update Automated Testing label. (54070)
  • Running npm run format:Php may result in an error. (54162)
  • Scripts: Correctly resolve entry points when the directory is symlinked. (54212)
  • Upgrade wp-prettier to v3.0.3. (54539)
  • Update typescript-eslint to v6. (53975)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Making Circular Option Picker a listbox. (52255)
  • @jamiemchale: Fix createI18n package import location. (51328)
  • @johnhooks: refactor(blob): Type URL parameter as optional. (49201)
  • @MericKarabulut: Improving error messages and codes in jest-console, matcher.js. (53743)
  • @Piyush-Deshmukh: Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • @Rajinsharwar: Editor: Catch errors when creating terms. (53369)
  • @toolstack: Set the timezone correctly. (48083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewhayward @andrewserong @annezazu @anomiex @anton-vlasenko @aristath @artemiomorales @atachibana @bangank36 @bfintal @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @chintu51 @ciampo @DAreRodz @dcalhoun @derekblank @draganescu @ediamin @ellatrix @fluiddot @gaambo @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jamiemchale @jeherve @jffng @johnhooks @jordesign @jorgefilipecosta @joshuatf @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kkoppenhaver @kmanijak @leewillis77 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @margolisj @masteradhoc @matiasbenedetto @mburridge @mcsf @MericKarabulut @mhimon @michalczaplinski @mikachan @mikejolley @mokagio @ndiego @ntsekouras @Olein-jp @petitphp @Piyush-Deshmukh @Rajinsharwar @ramonjd @richtabor @SantosGuillamot @SaxonF @scruffian @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @thelovekesh @toolstack @torounit @tyxla @vcanales @walbo @WunderBart @youknowriad

Props to @siobhyb, @czapla, and @artemiosans for co-writing; @saxonafletcher for the visual assets; @annezazu, @priethor, @andraganescu, @cbringmann, and @ngreennc for peer review; @bernhard-reiter for helping publish the release to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

#block-editor, #core-editor, #gutenberg, #gutenberg-new

Introducing Twenty Twenty-Four

Hey, everyone! It’s that time of the year. A brand new default theme will be featured with the next WordPress 6.4 release: Twenty Twenty-Four.

The Concept

The idea behind Twenty Twenty-Four is to make a default theme that can be used on any type of site, with any topic. Because of that, and contrary to past years, it has no single topic. Instead, three use cases were explored: one more tailored for entrepreneurs and small businesses, one tailored for photographers and artists and one specifically tailored for writers and bloggers. In essence, it’s a collection of templates and patterns which, all combined, make up a theme. These patterns include different Home templates for different use cases such as an About page, project overviews, RSVPs, and landing pages.

Twenty Twenty-Four’s styles and elements are instantly recognizable, inspired by modern design trends. The theme uses Cardo font for headlines, which provides a hint of elegance and a sans-serif system font for paragraphs. The default color palette of Twenty Twenty Four is light, and it also includes a dark style variation that maintains the same typography. Additionally, there are two more sans-serif variations available: one in light mode and another in dark mode.

Twenty Twenty-Four will be 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. theme fully compatible with all the site editor tooling and it will surface new design tools like the details block or vertical text. Another key intent for the theme is to properly present whole page patterns and template variations so that users don’t need to assemble whole pages themselves, thus easing up their site building process.

Thanks to Twenty Twenty-Four’s remarkable flexibility and adaptability, a multitude of possibilities open up with just a few adjustments to color and typography. This beautiful theme was designed by Beatriz Fialho.

Development

As part of the 6.4 release, Maggie Cabrera and Jessica Lyschik are leading development. We are looking forward to your involvement and support throughout the process. If you’re interested in contributing, make sure you’re following this blogblog (versus network, site).

There’s a guiding Figma file that will continue to be updated as work progresses.

Theme development will happen on 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/ and, as usual, once the theme is stable, it will be merged into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and its GitHub repository will be deprecated. A repository has been created here that you can follow if you’d like:

https://github.com/wordpress/twentytwentyfour

Starting on August 30th at 3:00 PM UTC, there will be weekly 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/. meetings in #core-themes to coordinate development of the theme.

Learn more

For information about about previous default themes, you can read the following posts:

If you’re interested in learning more about Block Themes and Full Site Editing, here are some resources for you:

Props @kellychoffman @richtabor @beafialho @annezazu @onemaggie @luminuu @joen for helping co-create this post.

#6-4 #bundled-theme #core-themes #twenty-twenty-four

+make.wordpress.org/themes/

#core-themes

6.4 Release Parties Schedule and Hosts

This post aims to prepare a calendar with the expected start time for each release party and who is involved in the upcoming 6.4 milestones.

As we saw happening with 6.3 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1, things can change at the last minute, so expect some flexibility. The release team will do their best to respect the calendar and communicate any change promptly.

If you can fill any of those roles, please add your name in the comments, with the date and role, so that I can finalize the calendar. Having two people with the same access level for each party is also okay. This will allow us to help each other if the party takes longer than expected.

I always proposed 16:00 UTC for release parties because it’s a time that allows us to cover quite a few time zones. However, it does not favour contributors in APAC. I will contact those in that area to see if we have people with enough access to run at least one release party in their time zone.

Please check the Hosting Release Page in the Handbook to read about the different roles.

Thank you all for the team effort!

Date/TimeMilestoneHostCommittercommitter A developer with commit access. WordPress has five lead developers and four permanent core developers with commit access. Additionally, the project usually has a few guest or component committers - a developer receiving commit access, generally for a single release cycle (sometimes renewed) and/or for a specific component.SecurityMission ControlMarcomms
Tuesday, September 26, 2023 at 16:00 UTCBeta 1@francina (backup @akshayar)@karmatosed@davidbaumwald@davidbaumwald@rmartinezduque (backup @meher)
Tuesday, October 3, 2023, at 16:00 UTCBeta 2@akshayar (backup @francina)@sereedmedia (backup @rmartinezduque)
Tuesday, October 10, 2023 at 16:00 UTCBeta 3@metalandcoffee (backup @akshayar)@meher (backup @meaganhanes)
Tuesday, October 17, 2023, at 16:00 UTCRelease Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1@metalandcoffee (backup @francina)@rmartinezduque (backup @meher)
Tuesday, October 24, 2023, at 16:00 UTCRelease Candidate 2@marybaum@meaganhanes (backup @meher)
Monday, October 30, 2023, at 16:00 UTCRelease Candidate 3@rmartinezduque (backup @sereedmedia)
Monday, Novembre 6, 2023, at 16:00 UTCDry Run@francina (backup @cbringmann and @metalandcoffee)@meher, @rmartinezduque, and @sereedmedia
Tuesday, November 7, 2023, at 17:00 UTC*General Release@francina (backup @cbringmann and @metalandcoffee)The whole focus team 💪

General release is scheduled 1 hour later than the Dry Run time to allow for a 24-hour freeze.

Thanks @cbringmann and @metalandcoffee for the peer review.

#6-4, #release

Performance Chat Agenda: 26 September 2023

Here is the agenda for this week’s performance team meeting scheduled for Sep 26, 2023 at 15:00 UTC. If you have any topics you’d like to add to this agenda, please add them in the comments below.


This meeting happens in the #core-performance channel. To join the meeting, you’ll need an account on the Make WordPress Slack.

#agenda, #meeting, #performance, #performance-chat

Dev Chat Summary, September 20, 2023

The notes from the weekly WordPress developers chat which took place on September 20, 2023 at 20:00 UTC in the core channel of Make WordPress Slack.

Key Links

Announcements

No announcements were made this week.

Highlighted Posts

Hallway Hangout: Performance Improvements for WordPress 6.4: Make plans to talk Performance at this hangouts session planned for October 19, 2023 at 15:00 UTC.

Analyzing the Core Web Vitals performance impact of WordPress 6.3 in the field: Read this thorough breakdown from @felixarntz of how 6.3 performance improvements have been reflected on production sites using WordPress at scale. Feedback in invited on the post.

Community Summit Discussion Notes: Increasing contributor recognition and celebration: Join the discussion on how contributor impact can be better identified and highlighted. The discussion at the summit considered the system of props, credit outside of a release, badges, encouragement of contribution.

Evolving the FSE Outreach Program: A reminder to provide feedback on the next phase for the #fse-outreach-experiment: Deadline for feedback: Friday, September 22, 2023

Additional Highlighted Post on Interoperability under Open Floor.

Release Updates

Next major WordPress release: 6.4

The last 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. scrub before BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 will be on Monday, September 25, 2023 at 17:00 UTC.

More on 6.4 highlighted under Open Floor.

Beta 1 is scheduled for next Tuesday, September 26.

Stay in the 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. with 6.4 by following:

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/

Reminder: the revised release schedule for the next Gutenberg release is as follows:

  • Gutenberg 16.7 RC1: released September 20 (originally planned for September 13)
  • Gutenberg 16.7: September 27

Components & Tickets

Testing request following a recent bug scrub from @joedolson:

  • TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. #58912: Mobile: Adminadmin (and super admin) menu unexpectedly closes with Safari – after the patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. is updated, this will be ready for testing
  • Trac ticket #58756: Media library improvements: UIUI User interface, Non-closing options, and Button select state issues in image editing – this is ready for testing
  • Trac ticket #40822: no longer requires further feedback and is ready for commit


From the tickets posted by @oglekler before dev chat, assistance is needed with the list of tickets left to tackle before Beta 1 (updated September 22, 2023):

  • Trac #55459: Change Login Label name
  • Trac #56886: Admin facing add site screen missing search engine visibility field
  • Trac #58703: wp-list-table: <label> is preceding <input> in the checkbox column – this ticket has a new patch, and further testing is requested
  • Trac #40762: Login: add canonical admin shorthand URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for login.php

Open Floor

  • Call for WordPress developer proposals: Update from @adamsilverstein regarding Interop 2024 was added to the Highlighted Posts list by @webcommsat.
    Seeking proposals for Interop 2024. WordPress developers are asked to contribute their proposals for 2024 as on GitHub or as a comment on the proposals post. Interop aims to improve interoperability across the three major web browser engines (Chromium, WebKit and Gecko) in important areas as identified by web developers.
  • Call for assistance with 6.3.2: @joemcgill highlighted @mikeschroder‘s message about next steps for getting another bugfix out for 6.3, and if there were any contributors available to help lead the release.
    • @ironprogrammer raised that there may be many busy with beta 1 next week, and more hands may be raised after this
    • @jeffpaul thought the concern before WCUS was that something(s) milestoned for 6.3.2 might be worth getting out before 6.4 lands. He asked if people had interest and availability, could they share this in the #6-3-release-leads Slack channel as it would be very helpful.
  • ** A number of contributors highlighted the final stretch to 6.4 Beta 1, and the calls to help deal with as many bugs as possible, clear triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. queues, and review available content.
    @cbringmann reminded the meeting that contributions are for all and not restricted to just the release squad and cohort. She thanked everyone who is lending a hand to the 6.4 release.

Next Meeting

The next meeting will be on Wednesday September 27, 2023, at 20:00 UTC.

Are you interested in helping draft Dev Chat summaries? Volunteer at the start of the next meeting on the #core Slack channel.

Props to @ironprogrammer for hosting the meeting,
@webcommsat and @zunaid321 for the notes,
and to @marybaum and @oglekler for reviews and updates on tickets.

#6-3, #6-4, #dev-chat, #meeting, #summary

Hallway Hangout: What’s new for developers in WordPress 6.4

Next month, @greenshady, @welcher, and I will host a casual conversation about the most important and exciting developer-related changes coming soon in WordPress 6.4. From 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. HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. and the Font Library to improved Editor flows and the new Twenty Twenty-Four theme, there is just so much to talk about.

The Hangout will begin with a brief overview of the major changes, and then we’ll open it up for group discussion and Q&A.

This event will be held on Thursday, October 12, 2023, at 1:00 PM CST (18:00 UTC), which is right before WordPress 6.4 RC1. The meeting link will be shared through the Learn WordPress MeetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. group. RSVP for the event to access the link. We hope to see you there!

Props to @greenshady for review.

#hallwayhangout

Analyzing the Core Web Vitals performance impact of WordPress 6.3 in the field

As highlighted in the WordPress 6.3 performance summary post, the 6.3 release included numerous performance enhancements. Based on the lab benchmarks cited in that post, the test sites used with WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. were loading 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 based on the Largest Contentful Paint (LCP) metric.

While lab benchmarks are great to estimate the projected performance impact of a release, the tests are not representative of the average WordPress site and real-world traffic. Therefore, it is crucial to further review and attempt to validate the impact in the field, i.e. on actual production sites using WordPress, at scale. Last week, three analyses were conducted to assess the performance impact of WordPress 6.3, using the public data sets from HTTP Archive and the Chrome User Experience Report.

Highlights of the WordPress 6.3 performance analysis findings

Before diving into the results, the term “passing rate” should be briefly explained here. It denotes the percentage of sites in a dataset for which a specific Web Vitals metric performs better than the threshold value that is considered “good”. For LCP, that encompasses all sites in the dataset that load faster than 2.5 seconds in total per the LCP metric. For example, if 600,000 out of 1,000,000 URLs have an LCP faster or equal to 2.5 seconds, the LCP passing rate is 60%.

The results from the analyses indicate that WordPress 6.3 is indeed a great success from a performance perspective, as indicated by the lab benchmarks. Some notable findings to highlight include:

  • Looking at all applicable sites in the dataset, the Largest Contentful Paint (LCP) passing rate has improved by 5.6% for classic theme sites and by 2.7% for block theme sites for mobile viewports. In terms of the absolute LCP passing rate, for classic theme sites this means a bump from 31.3% to 33%, while for block theme sites it means a bump from 42.8% to 44%. For desktop viewports, the improvements are not as pronounced, yet they are still positive. See the source for overall LCP passing rate changes.
  • When segmenting between sites that use the emoji loader script and the sites that have disabled it, the impact of the improvements to the emoji loader script are clearly visible. The Largest Contentful Paint (LCP) boost for classic theme sites using the emoji loader script is 3.4% to 7% higher than for those that don’t use it, and for block themes it’s 0.7% to 4.5% better as well. To outline the numbers behind that more clearly, classic theme sites using the emoji loader script see a relative LCP boost of 8.4% on phone and 2.4% on desktop, compared to only 1.4% and -0.8% for those that don’t use the emoji loader script. Similarly, for block theme sites using the emoji loader script the relative LCP boost amounts to 4.2% on phone and 0.8% on desktop, compared to only -0.3% and 0.1% for those that don’t use the emoji loader script. See the source for LCP passing rate differences between sites using vs not using the emoji loader script.
  • When looking at the impact of more accurate lazy-loading heuristics and support for fetchpriority="high", segmentation is especially important, since the enhancements themselves have a varying degree of accuracy. As a reminder, the LCP image of a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org should not be lazy-loaded, but it should have fetchpriority="high". When looking at only the sites where that is the case and which were still lazy-loading the LCP image with WordPress 6.2, the LCP performance impact amounts to a massive 16% to 21% improvement for mobile viewports and 6% to 9% on desktop. Even in absolute LCP passing rate numbers, this is a jump of 4.3% for classic theme sites and 8% for block theme sites, which is nothing short of amazing. See the source for LCP passing rate changes for sites that no longer lazy-load LCP image and use fetchpriority correctly.
  • Of course this only applies to a subset of sites, however the accuracy of the lazy-loading heuristics has notably improved as well: In WordPress 6.3, only 9–10% of sites still lazy-load their LCP image for classic theme sites (down from 27–28% in 6.2) while for block theme sites it’s 5–8% (down from 17–29% in 6.2), so this multiplies the above LCP improvements horizontally. See the source for the accuracy comparison of how many sites (correctly) no longer lazy-load their LCP image.

Explaining the metrics

Tooling used

HTTP Archive is an open-source project that runs a pipeline across millions of URLs every month to monitor the state of the web, recording aspects like which technologies are used, how specific web features are being leveraged, how many HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tags or attributes of a specific kind are present on pages, and much more. The Core Performance Team has been heavily relying on this tool to measure success of specific features or enhancements in WordPress core releases. In fact, HTTP Archive even monitors a few specific metrics that are specific to WordPress.

The Chrome User Experience Report (short “CrUX”) exposes Core Web Vitals (CWV) performance data for millions of URLs, based on how real-world Chrome users experience visiting those URLs. While the tool can be used for individual sites to monitor their Web Vitals (e.g. via PageSpeed Insights), the data can also be aggregated at a larger lens. While CrUX does not contain much data other than the actual Web Vitals metrics, intersecting its dataset with that of HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. Archive allows gathering valuable insights. For example, it becomes possible to group sites into specific segments (such as all sites that use WordPress) and measure their CWV passing rates.

Both HTTP Archive and CrUX expose data aggregated on a monthly basis.

Joining data from HTTP Archive with data from CrUX is the foundation for tools like the Core Web Vitals Technology Report, which displays CWV passing rates for numerous technologies over time. The dashboard also includes WordPress-specific passing rates, which can be helpful to look at for a quick overview of how WordPress sites are performing on the web at a glance. However, it should be noted that those numbers are quite broad, since the passing rates are based on all WordPress sites in the dataset, regardless of the version used or any other factors. Therefore, in order to assess the impact of a specific WordPress release such as 6.3, a more granular approach is needed.

Methodology

The WordPress 6.3 performance summary post highlighted two client-side performance enhancements as the main sources for the improved LCP performance, which are the optimizations of the emoji loader script (see #58472) and the lazy-loading fixes plus the newly added support for the fetchpriority attribute, which are closely related (see the WordPress 6.3 image performance enhancements post). To assess whether those enhancements resulted in the anticipated LCP improvement, two analyses were conducted specific to those efforts.

Additionally, a broader analysis was conducted to compare the LCP performance of WordPress 6.3 and WordPress 6.2 sites overall, as well as their Time to First Byte (TTFB) performance, which directly impacts LCP as well. While with broader analyses like this one it is impossible to directly connect it to specific enhancements or fixes that launched as part of that release, it is crucial to look at the performance impact as a whole as well to get an idea how successful the release is at scale, regardless of how a specific feature is being used.

The analyses were conducted by running various BigQuery queries against the intersection of HTTP Archive and CrUX datasets, specifically zooming in on only the sites that were using WordPress 6.2 in July 2023 and WordPress 6.3 in August 2023. To present the approach, queries, and results transparently, the research tool Colab was used.

The links below point to the three Colabs with the analyses. They are quite detailed, so for a quick summary you may want to continue reading this post first. Please feel free to dive into the individual Colabs and their details, which you can also use to validate the summary below. Potentially you will find other notable metrics to highlight, or additional conclusions to draw.

It should be noted that any field metrics need to be interpreted carefully as they always contain some degree of noise. Websites change over time in many ways, and it is impossible to eliminate external factors from the data. For example, a WordPress site may be slower with WordPress 6.3 than it was in 6.2 simply because it activated a new 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 the meantime that impacts performance. Such scenarios cannot be reliably detected and are therefore part of the metrics as well. Fortunately, the number of WordPress sites in the dataset is quite large: Looking at only the WordPress sites in the dataset that match the aforementioned criteria, we are looking at more than 500,000 WordPress home page URLs. This means that such specific side effects of individual sites usually have only negligible impact when looking at the overall data. Still, this is something to keep in mind: While field data is the closest there is available to assess the actual performance impact of a change, field data cannot be used to confidently claim that something is true or false — it has to be interpreted.

Conclusion

The large positive LCP impact confirms that the 6.3 release is an important milestone for WordPress performance. The numbers are particularly impressive on the sites for which the lazy-loading behavior was fixed and where fetchpriority support was correctly added. This shows the potential vertical impact that a few specific changes like that can have. Of course the overall LCP improvements are not as high, but it confirms this is a large opportunity: By further improving the heuristics so that they apply correctly to more WordPress sites, the horizontal impact of the change can be increased so that in the future the large LCP benefits may scale to even more sites.

Another metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. observation worth noting is that the LCP passing rate improvements in WordPress 6.3 compared to 6.2 for the correct behavior above (16-21% higher LCP passing rate) is actually not too far off from the lab benchmarks measured for 6.3 a few months ago (18-27% faster LCP). This makes sense, given that for lab benchmarks the test site was a simulated scenario where lazy-loading and fetchpriority were behaving correctly. It is great to know that the lab benchmarks carry some weight even when compared to the field impact.

Last but not least, there are also two points to be highlighted which show that there is still room for improvement:

  • The accuracy with which fetchpriority="high" is applied to the LCP image is only around 50% across all scenarios. While this is okay for the newly added support of the attribute, it is clearly something to follow up on. Getting the heuristics for applying fetchpriority right is even more challenging than not lazy-loading the LCP image especially since the LCP image may differ between different viewports, but it’s safe to say there should be more that WordPress core can do in that area. At least, it is relieving to see that the negative LCP impact of adding fetchpriority="high" to the wrong image is fairly low, compared to the negative LCP impact of lazy-loading the LCP image. See the source for fetchpriority accuracy against the LCP image and the source for LCP passing rate changes for sites that no longer lazy-load LCP image but use fetchpriority incorrectly.
  • At a higher level, the Time to First Byte (TTFB) passing rate is not seeing much of an improvement and in parts is even regressing: For mobile viewports, the TTFB passing rate is improving between 1.6-1.7%, while for desktop viewports it is regressing by ~4.9% for classic theme sites and ~9% for block theme sites. It’s impossible to connect that to specific changes that landed in WordPress 6.3, and as mentioned before it could be affected by external factors, but it clarifies that server-side performance needs to continue to be a point of focus. See the source for overall TTFB passing rate changes.

Please feel free to take a closer look at the analyses and leave your feedback as comments on this post. Additional thoughts, observations and questions are much appreciated.

Props @joemcgill @westonruter for proofreading.

#6-3, #analysis, #performance, #summary

Evolving the FSE Outreach Program

What started as an experimental program in May 2020 with the expectation that the Site Editor would ship in the following 6 or so months turned into nearly 3.5 years of feedback loops, knowledge sharing, and community building. With WordPress 6.3 bringing Phase 2 to completion, it’s time for the FSE Outreach Program to evolve alongside the broader WordPress project and needs. All good things must come to an end–or they need to adapt to continue to stay relevant. 

The proposed plan:

  • The FSE Outreach Program transitions into a focused space for solving issues, creating resources, and facilitating conversations around adopting Phase 2 led by a new crew of folks (@ndiego, @greenshady, @bph). If you are interested in contributing, please comment on this post. Big thank you to those folks for stepping into this! 
  • After 6.4 betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1, the facilitated calls for testing will be replaced by ad hoc calls for testing run by the Make Test team or contributors who need specific features tested.

The program will run for an additional 6 months minimum with this evolved approach before concluding with hand-offs and collaboration with the Training, Documentation, and Test teams as needed. This is the proposal so please share your feedback below so it can be iterated upon as needed.

Why is this happening?

With WordPress 6.3, the Site Editor is firmly part of the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. WordPress experience. What was once experimental, is now matured and can use the usual WordPress feedback pathways available for all. The intention of this experimental Outreach Program was to “get feedback about pain points to the right people faster and help keep us on track for Phase 2”. We did this! You did this. 

Now, it’s time to focus even more on adopting what’s been built, something that has been a part of the Outreach Program efforts but that deserves a greater spotlight at this stage. With Phase 3 coming into view, this will also open up an opportunity for new outreach efforts. 

When will this happen?

Here’s the expected timeline if we follow the above proposal:

Where was this discussed? 

While this has been a topic of discussion throughout the duration of the FSE Outreach Program (it’s one of the most repeated questions I’ve been asked), it gained more prominence around the 6.3 release and the wrap up of phase 2. The first mention of what was to come happened on August 7th which was followed up with a flurry of conversations in the last few weeks including in a #make-test meeting, recap pings in the outreach program, and an amplifying ping in #6-4-release-leads. This post in and of itself is part of the broader discussion too so please share your thoughts/questions/concerns. 

Where will user feedback go when this happens? 

User feedback is always valued and can go the same places we’ve always brought it in the community: 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/ and TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.. It’s so important to continue receiving user and contributor feedback, and moving it to the main feedback channels will help streamline the triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. process at this stage and scale. Additionally, keep in mind that some contributor team meetings, like #core-editor offer Open Floor times to ask questions, or feature channels like #feature-website-navigation where you can talk about a specific topic.

What do you all want to see documented for future outreach efforts?

I’d love to know what I can do to ensure that anyone else who tries to start an outreach program in WordPress has an abundance of helpful places to turn. Here’s what I have currently that I plan to sweep through before wrapping everything up: 

What’s missing? I am happy to write personal blogblog (versus network, site) posts as well, similar to prior reflections like On future outreach program models in the WordPress community, if something doesn’t fit nicely in the mix.

Want to help with the future of the Outreach Program?

Fantastic, please comment below. I’d love for this evolution to be even more impactful than the current version. 

Thank you for making WordPress better

For the folks who translated the calls for testing to bring others along:

For folks who ran group testing and summarized the feedback: 

For the folks who responded 3+ times to a call for testing: @paaljoachim @piermario @bgturner @elbsegler @get_dave @priethor @courane01 @poena @luminuu @beckej @itsjustdj @hage @antigone7 @robglidden @clubkert @chopinbach @franz00 @jordesign @soivigol @josvelasco

For the folks who responded 5+ times to a call for testing: @paaljoachim @piermario @courane01 @hage @antigone7 @robglidden @clubkert @franz00

For @paaljoachim who responded to every single call for testing without fail, rain or shine. 

For folks who shared the calls for testing and helped get the word out, even when they couldn’t contribute directly.

For everyone who helped run or participated in the various hallway hangouts.

For all 140 folks who received Test Contributor badges for responding. 

For everyone who asked a question, opened an issue, shared a piece of feedback, and tried the Site Editor long before anyone else saw it. Thank you for making WordPress and the open web better. Thank you for engaging in a time and place when it’s so easy not to, especially during the depths of the pandemic when this all began.

Share your feedback by September 22nd, 2023

To help focus incoming feedback and to stay in an actionable place, please share any questions/comments/concerns in the next two weeks. I will write a summary then and help facilitate any next steps.

Thank you to @chanthaboune @juanmaguitar @bph @cbringmann @rmartinezduque for helping to review this post.

#fse-outreach-experiement

Default Theme Chat Agenda: September 20th, 2023

his is the agenda for the weekly Default Theme chat scheduled for 20th September 2023, 3pm UTC.

This meeting is held in the #core-themes channel in Making WordPress 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/..

  • Topics
    • Upcoming BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1:
      • A11YAccessibility 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) issues
      • String translations
    • First build for Beta 1 at the end of the week
  • Open Floor

#6-4 #agenda #bundled-theme #core-themes #twenty-twenty-four

Editor Chat Agenda: September 20th 2023

Facilitator and notetaker: @fabiankaegy.

This is the agenda for the weekly editor chat scheduled for Wednesday, September 20th, 2023 at 04:00 PM GMT+2.

This meeting is held in the #core-editor channel in the Making WordPress 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/..

  • Announcements
  • Project updates
  • Task Coordination
  • Open Floor – extended edition.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting