New Feature: The Block Bindings API

WordPress 6.5 is introducing a new way of extending blocks that substantially reduces the custom code needed to integrate different kinds of data in the 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. editor.

This can now be done through the new Block Bindings 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..

What is the Block Bindings API?

Given a coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block, rather than displaying a user’s inline written content inside of it, imagine wanting to populate that block with data from a particular source instead. For example, the post metadata or custom PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher logic. What would be the process for doing that?

Screenshot showing a heading and paragraph in the Gutenberg editor, with a large red arrow pointing to the paragraph. The paragraph reads: "How would you replace this sentence with data from somewhere else?"

This is actually a trick question: In previous versions of WordPress, you were unable to do this with 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/’s core blocks — it would instead require creating a custom block with particular logic for reading from the source in question. But this is no longer the case.

With the Block Bindings API, you can now bind core blocks to read from different sources without needing to write custom block boilerplate — this means it is possible to bind a Paragraph to read from a post’s metadata, or a Heading to read from a 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’s PHP logic, all without needing to deal with ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/., block registration, and other particulars of writing custom blocks from scratch for each new source you want to read from.

This initial release of the Block Bindings API in WordPress 6.5 is a big step towards simplifying the process of extending the editor and expanding the capabilities of blocks. Under the hood, the API already powers a showcase feature being shipped in WordPress 6.5 alongside it: Connecting core blocks to custom fields in the post metadata.

Using the same functionality, as an advanced use case, it is also possible to define and have blocks read from custom sources — more on that briefly below.

Note: For a more detailed walkthrough on creating and using Block Bindings than can be related in this brief dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase., see the Introducing Block Bindings tutorial from the WordPress Developer Blogblog (versus network, site).

How do block bindings work?

Overview

Before getting into the rich functionality Block Bindings can enable via custom sources, this section will first review how the API works in general, then detail how to bind core blocks to custom fields in the post metadata.

The following table shows the current compatible blocks and attributes that can be bound: 

Supported BlocksSupported Attributes
Imageurl, alt, title
Paragraphcontent
Headingcontent
Buttonurl, text, linkTarget, rel

While the list of compatibility is short for now, this already enables a wide range of use cases, and support for the rest of the core blocks, as well as custom blocks, is planned for the future.

To use Block Bindings, you would specify that these attributes should be read from particular registered sources using the block markup; the logic for those sources would then be executed when rendering on the frontend.

Upon being bound, editing of the attribute in question will be locked and indicators will appear in the editor to signal that the binding has been created.

Screenshot of the Gutenberg editor; a paragraph is selected and there are icons in the block toolbar, as well as a purple outline around the paragraph, declaring the block as bound.

Specifically, here is how to make use of this via the built-in custom fields support.

Custom fields

Importantly, in this first version of the Block Bindings API, there is no UIUI User interface for binding attributes to custom fields yet. Therefore, it is necessary to add the markup manually using the Code Editor in Gutenberg.

To bind a supported attribute to a custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes. in the post metadata, you would use markup such as the following:

<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"book-genre"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->

In order for this to work, you would need to make sure the field is registered to the post metadata by including code such as the following in the theme’s functions.php or a plugin.

register_meta(
'post',
'book-genre',
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'default' => 'Default text field',
)
);

*Note that the show_in_rest property must be set to true for the time being due to security considerations, though there are plans to explore how to remove this requirement in the future.

Future sources

Support for post metadata is just a start, and the plan is to add more built-in sources, such as site, user, and taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. data, for WordPress 6.6.

That being said, the Block Bindings API already has the functionality to allow for registering of custom sources as well, which is the same functionality used internally to register the core/post-meta source above.

Registering a custom source

Overview

To register a Block Bindings source, one needs to use the register_block_bindings_source() function, which has the following signature:

register_block_bindings_source(
string $source_name,
array $source_properties
);

There are two available parameters:

  • $source_name: A unique name for the custom binding source in the form of namespace/slug. The namespace is required.
  • $source_properties: An array of properties to define the binding source:
    • label: An internationalized text string to represent the binding source. Note: this is not currently shown anywhere in the UI.
    • get_value_callback: A PHP callable (function, closure, etc.) that is called when a block’s bound attribute source matches the $source_name parameter.
    • uses_context: (Optional) Extends the block instance with an array of contexts if needed for the callback. For example, to use the current post ID, it should be set to [ 'postId' ].

When WordPress encounters the custom bindings source while parsing a block, it will run the get_value_callback function, whose signature should look like this:

projectslug_bindings_callback(
array $source_args,
WP_Block $block_instance,
string $attribute_name
);

It can accept up to three parameters, though you don’t need to include them unless your logic requires them:

  • $source_args: An array of arguments passed via the metadata.bindings.$attribute.args property from the block.
  • $block_instance: The current instance of the block the binding is connected to as a WP_Block object.
  • $attribute_name: The current attribute set via the metadata.bindings.$attribute property key on the block.

Using the Registration Mechanism

In practice, here is how you might use the above registration function to create a simple binding for copyright information:

add_action( 'init', 'projectslug_register_block_bindings' );

function projectslug_register_block_bindings() {
register_block_bindings_source( 'projectslug/copyright', array(
'label' => __( 'Copyright', 'projectslug' ),
'get_value_callback' => 'projectslug_copyright_binding'
) );
}

function projectslug_copyright_binding() {
return '&copy; ' . date( 'Y' );
}

And here is how you would bind a paragraph to the copyright source in the block markup, and how it would look on the frontend:

<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"projectslug/copyright"
}
}
}
} -->
<p>Copyright Block</p>
<!-- /wp:paragraph -->
A screenshot of a post titled "Block Bindings Copyright Example"; in the content is a copyright symbol and the year 2024.

Of course, this is a simple example, and you could make use of the other parameters in the callback signature to create more extensive logic.

Additional API functions

Additionally, there are a few other functions currently part of the public API:

  • unregister_block_bindings_source( $string source_name ): Unregisters a source
  • get_all_registered_block_bindings_sources(): Gets all registered sources
  • get_block_bindings_source( $string source_name ): Retrieves a registered source

Also, please note that while the core sources use shared APIs in the editor UI, be aware that these editor APIs will remain private for the time being while discussion continues on how to standardize extensions to the UI around this feature.

This means that if you would like to implement a UI to handle your custom fields easily, for now, you will need to create that functionality yourself.

Further learning and next steps

For more inspiration on how to use Block Bindings in your own projects, see the registration logic in block-bindings.php and the built-in core/post-meta source, and take a look at the Introducing Block Bindings tutorial series.

With that in mind, Block Bindings are just getting started, and future plans include:

  • Add the possibility of editing the value of the 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. fields directly from the UI.
  • Add UI to allow users to add bindings through the Editor.
  • Create new built-in sources: Site data, post data, and taxonomy data.
  • Add support for more core blocks.
  • Add the ability for developers to extend the Editor UI.

As always, feedback is more than welcome, and we invite you to share your ideas and use cases on Github, this post, or 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/. to help shape the development of the Block Bindings API.

A big thanks to @greenshady for providing code snippets and the initial ideas for this post, as well as @santosguillamot, and @czapla for offering their feedback.

#6-5, #dev-notes, #dev-notes-6-5

What’s new in Gutenberg 18.1? (10 April)

“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 and the Editor project (formerly called Full Site Editing).


What’s new in Gutenberg 18.1? (10 April)

Gutenberg 18.1 is ready and available for download!

With more than 150 pull requests (PRs), Gutenberg 18.1 is 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 to suit all tastes — new pattern and template part insertion functionality, site backgrounds in global styles, 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) and performance improvements.

Lovers of documentation and code quality enhancements will be pleased to learn that their favorite PRs make up almost a third of the total number in this release!

As always, a big thank you goes out to all who contributed, with special gratitude to first-time contributors. Great work!

In this issue:

Set site background images in the Site Editor

Set site background images in the Site Editor

Version 18.1 extends background image support to top-level global styles in the Site Editor, which means you can add custom background images and photos to sites. Images can set to repeat, or be displayed as contain or cover backgrounds. (#59454)

And for those wondering — yes, as well as regular images, looping animated gifs will also work.

See more with data views

New data views in the block editor for pages and patterns

Whether it’s sorting or searching your patterns in grid and table layouts (#60337), or filtering and previewing all of your sites pages (#59950), version 18.1 brings further design consistency to configurable adminadmin (and super admin) views, not to mention quicker access and management of site assets. 

Alongside the continuous integration into 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. Editor workflows, data views have undergone improvements to accessibility and keyboard navigation (#59637).

Pattern schema and insertion

Pattern insertion with zoomed out view

Pattern insertion gets an upgrade in the latest version of Gutenberg. The editor canvas will zoom out when browsing and inserting patterns using the block inserter, allowing a greater overview of how your patterns appear alongside the rest of your site’s content. (#59775

Patterns are a powerful way to define design assets with configurable content. You can now give your patterns a “schema” by naming blocks that are overridable in all instances of those patterns. Users of your patterns will be able to see exactly which blocks are editable via a handy list in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (#59977)

Swap and edit template parts

Swapping template parts design in the Site Editor

When editing your site’s templates, you can select template parts and immediately view alternative designs for that template part in the sidebar. Want to replace your footer design? Click on your template’s footer and select a new one from the available designs. Voilà! (#60203)

Gutenberg has long had an option to preview a page’s template when editing that page. 18.1 lets you select and edit a page’s important template parts, such as 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. and footer. To do so, click on a template part, then hit “Edit” in the toolbar. (#60010)

Other notable highlights

The editor displays a confirmation modal before clearing template customizations. (#60119

You can collapse non-selected items in the list view using a handy new keyboard shortcut (Option-L on Mac, or Alt-L on Windows). (#59978).

Changelog

View the full changelog

Enhancements

Block Editor

  • Zoom out: Invoke zoom out mode when opening the patterns tab, and move the code to do so to a shared hook. (59775)
  • Block Previews: Update shadows in different contexts. (60161)
  • Update: Move post actions to the editor package. (60092)
  • Try: Show copy shortcut in block options. (60339)
  • Update image role description text to fix spacing. (60338)

Site Editor

  • Add rename page action. (60230)
  • Center the document title. (59134)
  • Consolidate when showing 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. link or action. (60194)
  • Editor: Update hover color of editor document title. (60113)
  • Improve the frame animation. (60363)
  • Try selecting closest editable block when clicking on a disabled block. (60016)
  • Update index view for pages. (59950)

Patterns

  • Add content schema to pattern editing view. (59977)
  • Close inspector on pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. select. (60004)
  • Focus block selection button only in navigation mode. (60207)
  • Pattern Shuffling: Make the results deterministic. (60074)
  • Patterns page: Enable table layout. (60337)
  • Prevent reordering of header and footer template parts when zoomed out. (60054)
  • Remove manage all of my patterns link. (60345)

Block Library

  • Add __next40pxDefaultSize to Image block Title Attribute. (60117)
  • Add support “HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Element” to Site Tagline. (59654)
  • Image: Remove temporary image check for rendering controls. (60212)
  • Quote block: Button for cite add/remove. (59073)
  • Quote block: Remove appender. (60307)
  • Reduce specificity of block library styles conflicting with block supports. (59457)
  • Update navigation blocks to use consistent link UIUI User interface labels and field sizes. (60116)
  • Summary: Polish 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.. (60110)

Post Editor

  • Block Editor: Deprecate __experimentalGetReusableBlockTitle selector. (60278)
  • Editor: Move PluginPostPublishPanel and PluginPrePublishPanel to editor package. (60344)
  • Editor: Move publish panel handling to editor store. (60340)
  • Editor: Unify publish sidebar preference. (60334)

Global Styles

  • Add background to global styles changes output. (60229)
  • Background UI controls. (59454)
  • Follow up design tweaks for global styles presets. (60031)
  • Try reducing specificity of global styles selectors only. (60106)

Data Views

  • DataViews: Add a utility to share filtering, sorting and pagination logic. (59897)
  • Data views: Remove the enumeration type as redundant. (60084)
  • Data views: Update template actions. (60075)
  • Data views: Add confirmation modal for clearing customizations in templates. (60119)
  • Data views: Make trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. a quick action again. (60165)

List View

  • Add keyboard shortcut to collapse list view items other than the focused item. (59978)
  • Adjust the List View close icon to resemble the Inspector close icon. (59999)
  • Update “Actions” string to “Options” in List View. (60136)

Templates

  • Add 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 allow extending the list of post content blocks. (60068)
  • Render non-editable preview of template part when user does not have capability to edit template part. (60326)
  • Template Parts: Remove pattern title from sidebar. (60160)
  • Template Parts: Update replace flow to separate template parts from patterns. (60203)
  • Template Parts: Update the ‘Replace’ label to ‘Design’. (60156)

Zoom Out

  • Add a delete control to toolbar on zoomed out mode. (60214)
  • Media dialog push content in zoomed out mode. (60170)

Components

  • Popover / ToggleGroupControl: Use useReducedMotion() from @wordpress/compose. (60168)
  • date-fns: Bump to v3.6. (60163)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Allow view access of template rest endpoint to anyone with the edit_post capability. (60317)

Commands

  • Polish Command Palette. (60134)

Page Content Focus

  • Allow selecting template parts in page content focus mode. (60010)

Inspector Controls

  • Add: PostCardPanel component. (59870)

Package and utility updates

  • Router: Update history package to 5.3.0, fix query string generation. (60271)
  • Create block: Add new namespacePascalCase template variable. (60223)

New APIs

Extensibility

  • Extensibility: Support PluginBlockSettingsMenuItem in the site editor. (60033)

Bug Fixes

Block Library

  • Fix enqueuing block theme styles when separate asset loading is enabled. (60098)
  • Fix lightbox UI disallow editing. (59890)
  • Fix navigation link ui close focus management. (59925)
  • Removed pointer-events none inline style due it blocking crop action. (60305)
  • Search Block: Apply font-related style inheritance to input field. (60321)
  • Columns block: Fix arrow up into it. (55197)

Site Editor

  • Fix rendering PluginTemplateSettingPanel when we’re editing a template. (60215)
  • Fix: Use viewportWidth in pattern preview data view. (60315)
  • Templates: Fix deferred rendering. (60361)
  • Site Editor: Consolidate save button functionality. (60077)
  • Revert #60300: Make sure the CSSCSS Cascading Style Sheets. class id-dark-theme is added to the editor 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. body. (60616)

Block Editor

  • Make sure the CSS class is-dark-theme is added to the editor iframe body. (60300)
  • Raw handling: Preserve class. (60331)
  • Raw handling: Preserve empty paragraphs. (59476)
  • Wiriting flow: Backspace at beginning of first paragraph block prevents block from being deleted. (56329)
  • DOM: Fix return types of focus.tabbable methods. (60274)

Components

  • CustomSelectControlV2: Fix hint behavior in legacy. (60183)
  • InputControl: Ignore IME events when isPressEnterToChange. (60090)
  • TextControl: Apply zero margin to input element. (60282)

Global Styles

  • Fix missing class for Global Styles > Colors. (60094)
  • Reset specificity of body selector when processing with postcss. (60266)
  • Shadow: Revert shadow default presets opt-in to opt-out. (60204)
  • Global Styles: Make strings translatable. (60127)
  • Skip outputting base layout rules that reference content or wide sizes if no layout sizes exist. (60489)

Zoom Out

  • Fix zoom out mode toggling between pattern category selection. (60225)

Data Views

  • Fix focus outline visibility and truncation in data view record titles. (60191)

Layout

  • Fix horizontal flex layout in classic themes. (60154)

Post Editor

  • Editor: Memoize ‘getInsertionPoint’ selector. (60015)
  • Fix block toolbar dropdown separator color. (60336)
  • 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. r57868 (Editor: Prevent font folder naive filtering causing infinite loops) from WordPress-Develop. (60141)

Block templates

  • Add null check to prevent errors in get_block_template filter. (60491)

Utilities

  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Return early in getFilename where URL argument is falsy. (60265)

Accessibility

Data Views

  • Add click-to-select behavior on table rows. (59803)
  • Data views list layout: Apply focus styles to items on focus-visible rather than focus. (60253)
  • Update field display in grid layout. (60083)
  • Data Views: Updating keyboard navigation in list layouts. (59637)

Site Editor

  • Restore Style book close button tooltip. (60177)

Block Library

  • Remove CSS order property from social icons placeholder UI. (60032)

Performance

Block Editor

  • Avoid fetching all reusable blocks (user patterns) on post/site editor load. (58239)
  • Block editor: Optimize hasSelectedInnerBlock selector. (60330)
  • Templates performance: Resolve patterns server side. (60349)

Block Library

  • Template part: Avoid pattern fetch on mount. (60297)

Block Editor

  • Inserter: Cache search normalization results. (60080)
  • Format library: Improve unknown format performance. (48761)

Experiments

Site Editor

  • Zoom-out view: Disable canvas resizing. (60104)

Documentation

  • Add auto generated 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. documentation for editor package. (60356)
  • Add component props documentation. (60350)
  • Add php @global documentation. (59931)
  • Change heading level on troubleshooting section. (60233)
  • CustomSelectControlV2: Match v1 stories to test legacy component. (60182)
  • Docs (general): Fix some typos. (60260)
  • Fix @todo tags to follow standards in WordPress comments. (60148)
  • Fix Font Collection 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. schema definition. (60285)
  • 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. documentation link to load 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/.. (60181)
  • Fix: Invalid links to the block supports api. (60199)
  • Fix: Non existent link to submitting to the block directory. (60389)
  • Interactivity API: Variable name correction in the documentation. (60056)
  • Create Block: Update external template documentation to include variants. (60095)

Code Quality

Block Editor

  • Add comment for unmemoized context. (60272)
  • Fix ESLint warning in BlockListBlock component. (60064)
  • RichText: Switch from disableEditing to standard html readonly attribute. (60327)
  • Site Editor: Reuse inserter search term normalization. (60218)
  • canInsertBlockType: Extract helper for selector dependants. (60235)
  • Fix editor canvas overflow on search results with position: Relative. (60287)
  • Editor: Move template areas to editor package. (60179)

Components

  • CustomSelectControlV2: Rename for consistency. (60178)
  • Navigator: Fix two nits. (60273)
  • NavigatorProvider: Move all state management to one reducer. (60190)
  • Components: Try obviating Popover pointer event trap. (59449)

Post Editor

  • Memoize the getTemplateInfo selector. (60200)
  • Update: Remove template summary component. (60351)
  • Update: Use getPostIcon selector on document bar. (60128)
  • Distraction free: Remove unwanted space from string. (60108)

Global Styles

  • Additional CSS: Add code comments contextualising tranformStyles for clarity. (60267)
  • Global styles: output :root selector for CSS custom properties. (42084)
  • Style Engine: Continue get_classnames 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. after adding the default classname. (60153)

Font Library

  • Add test for Font Library and Theme Style Variations. (60250)
  • Update google fonts font collection data URL to the latest version available. (60079)

Block Library

  • Image: Use the new ‘useUploadMediaFromBlobURL’ hook. (60208)
  • Navigation Block: Add test coverage to check that post content is not removed. (60189)

Site Editor

  • DataViews: Don’t memoize every callback ‘PagePages’ component. (60103)
  • History: Simplify the push and replace methods. (60112)

Rich Text

  • RichText: Separate fallback instance ID for selection retrieval. (60277)

Block Locking

  • E2E: Test BlockSwitcher availability in l-post-ul-group CPT. (60254)

Data Views

  • DataViews: 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/. warning error in list layout. (60101)

Tools

Testing

  • Automated Testing: Remove Puppeteer CI Job. (59311)
  • CustomSelectControlV2: Stabilize tests. (60133)
  • E2E: Fix flaky Site Editor pages end-to-end test. (60109)
  • Font Library: Add upload font test. (60221)

Build Tooling

  • Blocks: Fix double gutenberg_ prefix in built dynamic blocks PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60288)

First-time contributors

The following PRs were merged by first-time contributors 🎉 :

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @artemiomorales @bph @draganescu @ellatrix @fabiankaegy @geriux @getdave @glendaviesnz @interdevel @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @madhusudhand @MaggieCabrera @Mamaduka @matiasbenedetto @mcsf @mikachan @mikeybinns @mirka @mujuonly @n2erjo00 @nirav7707 @noisysocks @ntsekouras @oandregal @ockham @okmttdhr @pedro-mendonca @peterwilsoncc @ramonjd @richtabor @ryanwelcher @scruffian @shail-mehta @Soean @steveariss @stokesman @t-hamano @talldan @tellthemachines @torounit @tyxla @youknowriad

Props to @andrewserong, @isabel_brison and @saxonf for assisting with the preparation of this post.

#gutenberg, #gutenberg-new

Agenda, Dev Chat, Wednesday April 17, 2024

The next WordPress Developers Chat will take place on  Wednesday April 17, 2024 at 20:00 UTC in the core channel on Make WordPress Slack.

The live meeting will focus on the discussion for upcoming releases, and have an open floor section.

Additional items will be referred to in the various curated agenda sections, as below. If you have ticketticket Created for both bug reports and feature development on the bug tracker. requests for help, please do continue to post details in the comments section at the end of this agenda.

Announcements

The WordPress 6.5 retrospective post has been published, please fill in the survey if you would like to leave feedback or suggestions for improvements to the release process.

Forthcoming releases

Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: 6.6

We are currently in the WordPress 6.6 release cycle.

Next maintenance release: 6.5.3

There are currently 15 open tickets in the 6.5.3 release milestone. There is more information about this release in this post, including the 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 schedule and how you can get involved.

Next 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/ release: 18.2

Gutenberg 18.2 is scheduled for April 24 and will include these issues.

Discussions

As there are no immediate 6.6 discussion points and the 6.6 release squad has not yet been finalized, we can discuss some previously suggested topics:

  • How can we get PHP8 support completed and out of “compatible with exceptions”: suggested by @jorbin
  • Aligning the coding standards for CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and Gutenberg so that both can use the same tooling: also suggested by @jorbin

Feel free to suggest additional topics in the comments.

Highlighted posts

Core Editor Updates

Props to @annezazu for helping put together these updates.

Tickets for assistance

Tickets for 6.6 will be prioritized.

Please include detail of tickets / PR and the links into comments, and if you intend to be available during the meeting if there are any questions or will be async.

Open floor

Items for this can be shared in the comments.

Props to @joemcgill for reviewing.

#agenda, #core, #dev-chat

Performance Chat Summary: 16 April 2024

Meeting agenda here and the full chat log is available beginning here on Slack.

Announcements

  • Welcome to our new members of #core-performance
  • The team launched the Performance Lab 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 version 3.0.0 on Mon April 15

Priority Items

Structure:

  • WordPress performance TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets
    • Current release (WP 6.6)
  • Performance Lab plugin (and other performance plugins)
    • Final decision regarding streamlining PL plugin and other standalone plugins #1061
  • Active priority projects
    • Improve template loading
    • INP research opportunities
    • Improving the calculation of image size attributes
    • Optimized autoloaded options

WordPress Performance Trac Tickets

  • For WordPress 6.6:
    • Nothing to discuss this week

Performance Lab Plugin (and other Performance Plugins)

  • Final decision regarding streamlining PL plugin and other standalone plugins #1061
    • @thelovekesh added a workflow diagram on the issue itself and had some initial conversation with @swissspidy as well.
    • In the new workflow, we will be aiming to automate the other chores like:
      • auto creation of a release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".
      • raise a PR on the trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. from the release branch which will be having updated since tags and bumped version.
      • renaming of milestone and creating a next milestone.
  • @mukesh27 has the following PR ready for review PR #1148 – Warning notice about read-only file system remove even when all plugins are installed
  • @westonruter For Speculative Loading, I learned about an issue yesterday where WooCommerce links to add-to-cart and remove-from-cart are erroneously being prefetched/prerendered. WooCommerce shouldn’t be using links for these UIUI User interface elements, but such is WP.

Active Priority Projects

Improve template loading

  • @thekt12 ticketticket Created for both bug reports and feature development on the bug tracker. #59595PR#6392 is good for some initial review and feedback. Findings and reasoning behind each changes is added to PR description and inline comments. In TT4 homepage, I can see 4% improvement for non persistent cache and 6% improvement for site with persistent cache.
  • @thekt12 In #59600,
    • Working on improving performance 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. Template  PR#6369 ( current results not that good )
    • Template Parts caching PR#6391 ( current results not that good )

INP research opportunities

  • @adamsilverstein created this top level issue to track the work: https://github.com/WordPress/performance/issues/1120
    • opened a few coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. tickets about adopting the 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. to replace jQuery (#60986 #60985 and #60987) These are open for contributions if anyone wants to get a chance to try the Interactivity API out.
    • created a sheet with the list of scripts identified in the audits and have started to inventory which themes/plugins have public 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/ repositories we can contribute to.
    • created a PR to add custom metrics to httparchive so we can track adoption of the Interactivity API and I also started exploring adding performance instrumentation to the Interactivity API, so we can debug performance issues with callbacks.

Improving the calculation of image size attributes

  • @joemcgill I have an update on https://github.com/WordPress/performance/issues/760
    • One of the first steps to this project is to get a baseline of what the impact of inaccurate sizes attributes have on the web. I’ve updated an earlier HTTPArchive query that was created a few years ago to get some of that info, and am planning to work with @adamsilverstein on some additional ways to measure the impact of any changes we make.
    • I’ll plan on creating a bit of a roadmap for how we can improve the sizes attribute via a Performance Lab project once we’re happy with how to measure this.

Optimized autoloaded options

  • @swissspidy we have this long-standing module proposal for optimizing autoloaded options however @joostdevalk just published something very similar. So I was thinking that maybe we should collaborate
    • @joostdevalk I’ve done (in what’s probably a pretty rough way) something similar to what @swissspidy proposed in his ticket too; measure which options are used, remove autoload from those that aren’t used
    • I was kinda shocked by the results on some sites, going from multiple megabytes of options to 2-300 KB
    • I do still think though that maybe we should look at more aspects. We currently only have autoload yes and no, and I’ve basically always thought it’s weird that we don’t use the fact that it’s a string to also allow other contexts, like admin
    • Anyway, my code is there, happy to look at it together with someone and build something for performance labs
    • @joostdevalk One other thing related to options; the impact of a “miss” on an option that’s supposed to be autoloaded is actually way higher, as that always results in a DB query. If we could get a way to prevent that from happening, by having a get_autoloaded_option or something like that, I think the impact could be quite big.
  • @joemcgill For 6.6, we just added some functionality in #42441 that could be useful for automating some of this. After that change, any new option that is added can have its autoload value determined based on some additional criteria. For example, in that issue disables autoloading for large options if they weren’t explicitly added while passing true to the autoload param.
  • @pbearne asked @joostdevalk have you looked #347 code

Open Floor

Our next chat will be held on Tuesday, April 23, 2024 at 15:00 UTC in the #core-performance channel in Slack.

#core-performance, #performance, #performance-chat, #summary

WordPress 6.6 Planning Proposal & Call for Volunteers

  • Please leave your feedback about the schedule and release squad size in the comments by April 7th.
  • If you are interested in participating in WordPress 6.6’s release squad as a lead or as a cohort, please show interest in the comments below, specifying the role and the type of involvement (lead/cohort).

With WordPress 6.5 almost ready, it’s time to start planning WordPress 6.6 so that the release leads can participate from the start of the release cycle.

The timeline for the second release of 2024 takes into consideration WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. Europe in June, WordCamp US in mid-September, and the observed lower number of contributors available during the northern hemisphere summer. To avoid having major milestones (Beta1, RC1) conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with flagship events, this proposal suggests having WordPress 6.6 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 before WCEU 2024, as the opposite would result in an even shorter release cycle for WordPress 6.7.

According to the schedule proposed below and 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/ release cadence, WordPress 6.6 would include up to Gutenberg 18.5 for a total of 8 Gutenberg releases.

Proposed WordPress 6.6 Schedule

MilestoneDate
Alpha (trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. open for 6.6 release)March 5, 2024
Beta 1June 4, 2024
Beta 2June 11, 2024
Beta 3June 18, 2024
Release 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). 1June 25, 2024
Release Candidate 2July 2, 2024
Release Candidate 3July 9, 2024
Dry RunJuly 15, 2024
WordPress 6.6 General ReleaseJuly 16, 2024

Please leave your feedback about the schedule in the comments by April 7th.

Release Leads call for volunteers

Having more than one lead per role has proven helpful in sharing responsibilities, especially in the case of unexpected events, and fostering leadership by pairing experienced leads with first-timers. However, recent feedback has also pointed in the opposite direction, with the squad having too many voices when combining role duplicity with the increased number of different roles. These larger squads have also fostered a bystander effect, creating the sometimes false feeling that somebody else must be working on things, resulting in unclear direction.

Since this release cycle is shorter than the last ones, I propose scaling back the release squad size again, trying to find a middle ground. Reducing role duplicity is less risky at this point as, in the event of unexpected release leadRelease Lead The community member ultimately responsible for the Release. availability, plenty of now-experienced contributors are ready to step up and lend a hand in case of necessity.

This squad reduction also includes experimenting with unifying the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and Editor Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. roles so that the Triage Leads have a wider picture of issues across the technical side and can act as a nexus between Core and Editor Tech Leads.

With this smaller release squad, release leads should have proven experience and good availability during the release cycle. Less experienced folks and newcomers are still welcome to join as a cohort.

Some folks have already volunteered in the previous call for volunteers; some roles are already filled, whereas availability has changed for some people and there are still open spots. The TBDs found in the list below indicate the number of desired vacancies to fill.

  • Release Lead: Matt Mullenweg
  • Release Coordinator:
  • Core Tech Leads: TBD, TBD
  • Editor Tech Leads: Ella van Durpe, TBD
  • Triage Leads: Fabian Kägy, Damon Cook *
  • Documentation Leads: TBD, TBD
  • Marketing & Communications Lead: TBD
  • Test Lead: TBD
  • Design Lead: TBD
  • Performance Lead: TBD
  • Default Themes Lead: TBD

* Both Triage Leads had volunteered for either Core or Editor Triage roles.

All release decisions will ultimately be this release team’s to make and communicate while gathering input from the community.

As a reminder, if you are interested in participating in WordPress 6.6’s release squad as a lead or as a cohort, please show interest in the comments below, specifying the desired role and level of involvement (lead/cohort).


Thanks to @jeffpaul and @desrosj for the peer review and feedback

#6-6 #planning

What’s new in Gutenberg 18.0? (27 March)

“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 and the Editor project (formerly called Full Site Editing).


Graphic w/ text: What's new in Gutenberg 18.0

Gutenberg 18.0 has been released and is available for download!

The 180th 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 release comprises a total of 206 closed PRs by 59 contributors and with a record-setting 17 first-time contributors. You’ll find in the release the result of additional Data View work, improvements for 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. and and media+ text 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. . The changelog also lists a ton of 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, performance improvements and about 35 PRs of Documentation updates. 

Table of Contents

Sitewide Color and Typography presets

In addition to Style Variations, the Site view screen is now populated with the controls to set side-wide color and typography choices. This will streamline designers’ workflows.  (59594)

Users can use the Media + Text block in their templates as it now supports the featured image. The design possibilities now opened up beyond a column-bases layout also for single post or page templates. Drop shadow controls expand the design tools for developers, designers and site owner alike. (51491) (59616)

Data Views with improved filters and updated Template index page

The data views screens, which are also prototypes for the future adminadmin (and super admin) list pages, received quite a few intriguing updates. The Templates index page is now very flexible. In addition to the table view, users can now also enable a grid layout with preview cards or a list view that allows for full preview in a three-page window. The list view is available for templates, pages, and template parts. Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to select multiple criteria for filters. (59610)  (59858) (59792)

Other Notable Highlights

The Grid layout experiments are the next step to consistent responsiveness of posts, pages, and templates.
They are evolving quite a bit. If you haven’t opened them up you might want to start doing so now. This release includes a couple of updates. Blocks can now be grouped as a grid via the transform feature. With Column Start and Row Start controls in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme., the Drag and Drop of blocks around the grid is now possible. (59483) (59853)

Changelog

Full changelog available

Enhancements

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Update method generating plural names. (59881)
  • Expand main content area to viewport when zoomed out. (59512)
  • Update ‘sidebar card’ appearance. (59997)

Data Views

  • Add: Command click to select item on table view. (59563)
  • DataViews: Add AND logic operators to filters. (59953)
  • DataViews: Add default getValue for fields. (59810)
  • DataViews: Implement multiple selection for filters. (59610)
  • DataViews: Make list layout stable. (59858)
  • Pages data view: Update quick-actions. (59551)
  • Reduce visual prominence of primary actions in table data views, and consolidate primary + secondary actions in ellipsis menu. (59128)

Site Editor

  • Patterns: Add a title to the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. delete flow and increase line height. (59645)
  • Standardize block tools toggle button size to 32px. (59625)
  • Update index page for templates. (59792)
  • [Site Editor]: Move featured image at the top of the inspector controls. (59783)

Block Library

  • Add featured image to Media & Text block. (51491)
  • Social Icons: Update Medium icon. (57073)
  • Table Block: Fixed width table cells on by default. (49672)
  • Update Reddit social icon to latest brand guidelines. (59438)

Components

  • Add typing for date and time typing for TextControl. (59666)
  • Add: Support for menu group to the Dropdown. (59723)
  • Update the line height for components. (60028)

Design Tools

  • Add Box Shadow support for featured image. (59616)
  • Background block supports: Move block support defaults to gutenberg_render_background_support and revert gutenberg_get_background_support_styles. (59889)

Layout

  • Add Column Start and Row Start controls to Grid children. (59483)
  • Allow blocks to be grouped as a Grid. (59853)

Global Styles

  • Remove preset headers. (59504)
  • Try color and typography presets in Site View. (59594)

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

  • Display settings ‘label’ defined by the ‘register_setting’ method. (59243)

Rich Text

  • RichText: Add non-breaking space shortcut on Windows. (43150)

New APIs

  • Support the PluginDocumentSettingPanel slot in the site editor. (59985)
  • Add pre 6.5 compat for viewStyles. (59322)

Bug Fixes

Block Library

  • Add 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. for duotone to account for gutenberg_restore_image_outer_container in classic themes. (59764)
  • Add richText identifier to blocks. (59056)
  • Close navigation link ui on escape. (59838)
  • Code block: Preserve newlines. (59627)
  • Do not focus new navigation block menu until loading is finished. (59801)
  • File: Add center alignment editor class for classic themes. (59975)
  • Fix create menu after menu switch. (59630)
  • Fix image layout shift from placeholder to selected placeholder. (59857)
  • Fix overlay issue when empty featured image is used in Cover Block. (59855)
  • Media & Text: Remove the duplicate Media width control. (59776)
  • Prevent default on primary+k to prevent command center from opening on navigation link. (59845)
  • Quote: Show as active when deeply nested child block is selected. (59662)
  • RichText: Document the identifier prop. (60036)
  • Social icons: Only render label container when there’s a label. (60060)
  • Template Parts: Fix typo in translatable string. (59816)
  • Ensure consistent return type in WP_Navigation_Block_Renderer::Get_markup_for_inner_block(). (59820)
  • Return early from saving 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. data for the navigation without a $post->ID. (59875)
  • Fix root ID calculation when check if block can be transformed. (60167)
  • Featured Image: Fix overlay rendering in the editor. (60187)
  • Fix self closing navigation overlay. (60130)
  • Navigation: Avoid content loss when only specific entity fields are edited. (60071)

Font Library

  • Avoid auto-removing font families without font faces. (59910)
  • Ensure that errors reported from uploading font files are not duplicated. (59564)
  • Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. errors when activating or deactivating system fonts. (59935)
  • Fix typo in upload text. (59655)
  • Polish Google Fonts consent box. (59631)
  • Refactors the upload handler in order to check if files being uploaded are valid font files. (59648)
  • Reset notices when navigating away from the collection. (59981)
  • Activate the fonts coming from the backend and not the data from the frontend. (60093)
  • Install fonts in sequence to work around race condition. (60180)

Interactivity API

  • 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. fixes from Core. (59903)
  • Fix interactivity api end-to-end tests. (59836)
  • Interactivity: Ensure stores are initialized on client. (59842)
  • Interactivity: Restore scope when yielded promise rejects. (59708)
  • Prevent non-object state from being added. (59886)
  • Re-introduce data_wp_context() with _deprecated_function() call. (59834)

Site Editor

  • Don’t display welcome guide in hybrid theme. (55865)
  • Editor: Fix loading templates using a top level pattern block that includes a template part. (59900)
  • Fix opening of save panel when using the save shortcut. (59647)
  • Fix selected featured image when opening media library. (59769)
  • Make the delete navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. confirm dialogs consistent. (59825)
  • Restore the back button when navigating to the template from the home page. (59639)

Block Editor

  • Fix allow mouse users to edit link text when Link UIUI User interface is active. (59635)
  • Fix crash when unmounting an editor 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.. (59992)
  • Handle when attributes param passed into hasStickyOrFixedPositionValue is nullish. (59800)
  • List view: Fix stuck moving animation on Enter. (59644)
  • Shadow support enable skip serialization for dynamic blocks. (59887)
  • FlatTermSelector: Invalidate optimistic update if term creation fails. (59945)

Global Styles

  • Fix retrieval of referenced preset values in editor. (59811)
  • Global Syles: Apply fallback background color to typography elements. (59347)
  • Presets: Show the default empty variation as well as the other presets. (59717)
  • Remove filter for same number of settings. (59590)
  • Site editor: Find font families for typography presets crashes editor. (59806)
  • Force root min-height of 100% for backgrounds. (59809)
  • Featured Image: Fix block support selectors after shadow support addition. (60184)
  • Fix list of base theme fonts when a theme variation is applied.. (59959)

Patterns

  • Add pattern title in create modal in post editor. (59550)
  • Implement pattern overrides behind IS_GUTENBERG_PLUGIN flag. (59702)
  • Pattern Explorer: Pass ‘rootClientId’ to the pattern list. (60014)
  • Pattern Shuffling: Don’t assume that patterns have categories. (60070)

Data Views

  • Ensure the ‘select all’ checkbox appears on hover. (59799)
  • Fix: Regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.: Default templates and template parts views do not work. (59794)
  • Ignore cmd-click when row not selectable. (59697)
  • [DataViews]: Fix item actions. (59748)

Components

  • DateTimePicker: Change day button size back from 32px to 28px. (59990)
  • Fix unwanted ToggleGroupControl backdrop vertical animation. (59642)
  • PaletteEdit: Fix order numbers. (52212)

Layout

  • Experiments: Fix label typo: “Grid interactivity”. (59796)
  • Show inherit toggle in the absence of settings.layout object. (59580)
  • Use correct layout type to display controls. (59979)

List View

  • Block Bindings: Remove Block Bindings icon from List View, fixes and CSSCSS Cascading Style Sheets. updates. (59477)
  • Heading Block: Show default block name in list view when content is empty. (59827)
  • Blocks: getBlockLabel: Use RichTextData.toPlainText if available. (58524)

Data Layer

  • Fix getEntityRecordsTotalPages when per_page is not provided. (59983)

Icons

  • Fix return icon viewbox. (59669)

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)

  • Add tooltip to several Back buttons. (59760)
  • Make save panel a dialog with proper labels, fix site editor focus loss after save. (59622)
  • Fix labeling of the navigation links in the list view. (59370)

Documentation

  • Block 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. schema: Add layout.allowCustomContentAndWideSize field. (59736)
  • Components: Fix headline hierarchy in README. (59726)
  • Components: Hide private READMEs from handbook. (60003)
  • Dataviews: Improve story. (59773)
  • Docs/fix typo in metadata reference guide. (59577)
  • Docs/fix typos and clarify wording in blocks supports guide. (59721)
  • Docs/fix typos in block context. (59575)
  • Docs/fix typos in block registration guide. (59720)
  • Docs/fix typos in block supports. (59919)
  • Docs/fix typos in edit and save reference guide. (59576)
  • Docs: Flex – Fix headline hierarchy. (59686)
  • Docs: List all minor versions on Versions in WordPress page. (58003)
  • Docs: Remove alert callout on block selectors page. (60020)
  • Docs: Update Interactivity API package readme. (59763)
  • Fix broken links in Interactivity API documentation. (59715)
  • Fix sample code on InputControl documentation. (59517)
  • Fix typo in platform-docs. (60042)
  • 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. links to getting started with 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/.. (59927)
  • Fixes pseudo code doc block to use real PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (60012)
  • HeadingLevelDropdown: Fix JSDoc and documentation. (59727)
  • Improve Gutenberg platform documentation homepage. (59749)
  • InputControl: Make onChange observable in Storybook. (60055)
  • Interactivity API Docs: Clarify that getElement()’s ref can be null. (59868)
  • Platform Docs: Fix JSX error. (59967)
  • Plugin short description less than 150 characters. (59661)
  • RadioControl: Update deprecated suggestion in readme. (60002)
  • Replace screenshots of Radio Control. (60024)
  • Replace “sidebar” with “panel” in README.md. (59664)
  • Update 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/ edit URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in docusaurus.config.js. (59969)
  • Update ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. documentation links for forms. (59657)
  • Update api-reference – data-bind–hidden is an incorrrect attribute – should be data-wp-bind–hidden. (59955)
  • Update block supports documentation for WordPress 6.5. (59862)
  • Update dependency-extraction-webpack-plugin documentation. (59973)
  • docs: Fix syntax in block filters example. (59636)
  • theme.json schema: Add settings.color.caption definition. (60017)

Code Quality

  • Add $schema to tsconfig files. (59861)
  • Added @global to PHP documentation Comments. (59725)
  • Consolidate template actions components. (59586)
  • Core Data: Clarify comments for entities’ plural methods. (59946)
  • Fix Code Standards for RCrelease 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). 2 release. (59774)
  • Fix typo in Dataviews and Font Collection packages. (59656)
  • Fix: Typo correction tff to ttf. (59665)
  • Global styles utils: Remove unused vars. (59805)
  • Refactor zoom-out iframe scale. (59618)
  • Refine include/exclude patterns in phpcs.xml.dist. (59712)
  • Typography Presets: Use && rather to avoid a messy nested conditional. (59920)
  • synchronizeBlocksWithTemplate: Extract common functions. (59682)

Block Editor

  • Block tree reducer: Avoid nested update for insertUsage. (59681)
  • Block tree reducer: Avoid repetitive Map.get. (59672)
  • BlockSettingsDropdown: No need to cast ‘clientIds’ to an array. (59940)
  • BlockSettingsMenuControls: Remove ‘__unstableDisplayLocation’ prop. (59942)
  • Don’t memoize callbacks in ‘BlockSettingsDropdown’. (59397)
  • Link dialog: Remove CSS hack. (59746)
  • Pattern Explorer: Remove leftover source filter state handlers. (60019)
  • Fix code formatting in Nav block view file. (60162)

Components

  • Button : Deprecate isSmall prop. (59734)
  • Button: Keep deprecated props in type definitions. (59913)
  • Replace isSmall prop with size in NavigationMenuSelector. (59667)
  • Replace isSmall prop #53560. (59302)
  • TextareaControl: Remove extra closing curly brace in inputStyleNeutral. (59744)
  • Update Snapshots for line height. (60041)

Block Library

  • Add explanatory comment to Nav Link block fix for Command Center. (59864)
  • Enforce @SInCE tags in block-library/src//.php files. (59700)
  • Refactor Enter keypress on Nav Link. (59848)
  • Update Nav block permissions variable naming accuracy. (59882)

Global Styles

  • Fetch the variations inside the component. (59588)
  • Theme JSON: Remove unused vars in layout class. (59938)
  • Use the preivew iframe to preview typography for consistency. (59587)
  • Background block supports: Move size defaults to 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 block.json. (60008)

Plugin

  • Remove unnecessary ‘IS_GUTENBERG_PLUGIN’ check in ‘load.php’. (59873)
  • Update PHP Sync Issue generation script to ignore PRs with given labels. (59549)

Data Views

  • Update: Dataviews do not use strings on isCustom props passed down. (59609)
  • [Data Views]: Remove separator in item actions. (59822)

Data Layer

  • Data: Deprecate the getIsResolving selector. (59679)

Tools

Build Tooling

  • Add inline comment denoting version for Ruby setup. (59640)
  • Build: Dedupe packages. (57800)
  • GitHub Actions: Fix PHP file change detection logic. (59653)
  • Improve likelihood of Cherry Picking script including all PRs. (59871)
  • Interactive template: Use wp_interactivity_data_wp_context function. (59995)
  • Test: Dynamically detect and set max-workers. (59904)
  • Update docusaurus to the latest version. (59866)

Testing

  • Remove @kevin940726 and @Mamaduka from end-to-end test codeowners. (60067)
  • Upgrade Playwright to v1.42. (59339)
  • Use viewScriptModule block.json field for interactivity end-to-end tests. (59705)
  • end-to-end theme switch: Match incoming theme slug, then optional folder. (59851)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @afragen @ajlende @alexstine @andrewfleming @anton-vlasenko @artemiomorales @bacoords @c4rl0sbr4v0 @carolinan @chrisbellboy @colinduwe @creativecoder @DAreRodz @dcalhoun @draganescu @ellatrix @enejb @enodekciw @flexseth @fluiddot @gaambo @georgestephanis @geriux @getdave @huzaifaalmesbah @inc2734 @J0n-92 @jaclync @jameskoster @jasmussen @Jayanth-Parthsarathy @jeryj @jorgefilipecosta @jsnajdr @kevin940726 @krokodok @luislard @Mamaduka @matiasbenedetto @mattsherman @mcsf @megane9988 @michalczaplinski @mirka @mujuonly @mzahir @ndiego @noisysocks @ntsekouras @oandregal @pbking @ramonjd @rcoll @SahilThakur02 @Sam-Xronn @scruffian @shail-mehta @SiobhyB @sirreal @Soean @Strangehill @sunil25393 @swissspidy @t-hamano @talldan @tellthemachines @TeresaGobble @tjcafferkey @tomepajk @tyxla @vcanales @youknowriad

Props to @greenshady for review, @annezazu for highlights selection ,and @joen for the visuals in this post.

#gutenberg

Speculative Loading in WordPress

The WordPress Performance Team recently published a new plugin called “Speculative Loading” which enables a new technology of the same name to automatically prerender certain URLs on the page, which can lead to near-instant page load times. The functionality is powered by the Speculation Rules 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., a new web API that allows defining rules for which kinds of URLs to prefetch or prerender.

Please install and test the 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 to provide feedback to inform further improvements before a potential consideration to include such a feature in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. You can install the plugin by searching “speculative loading” in WP Adminadmin (and super admin), or via the Performance Lab plugin.

A brief history of prefetch and prerender in WordPress

WordPress core has for several years provided a simple Resource Hints API which allows injecting <link> tags into the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. document that can be used to prefetch or prerender certain resources, among other actions. While prefetching can be useful for certain sub-resources of an HTML document, such as third-party script providers, prerendering goes as far as processing the resource and already performing some rendering offscreen and thus can be useful for entire web pages.

However, using the approach of injecting link[rel="prefetch|prerender"] tags is not very flexible, as the URLs to prefetch or prerender need to be defined as soon as the HTML is loaded. Providing a <link> 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.) for every potential anchor link a user may click on the page would be wasteful, while not providing any misses a great opportunity for performance optimization. So far, solutions like Quicklink could be used to dynamically insert <link> tags to prefetch resources in the user’s viewport, which is more flexible, but still far from ideal as it may still excessively prefetch too many resources and requires a 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/. library.

More importantly though, link[rel="prerender"] does not actually support prerendering, as the “prerender” value is in fact used for something called NoState Prefetch, which means it is still only prefetching certain resources rather than prerendering them, which for instance would include running JavaScript. Last but not least, the “prerender” value is deprecated at this point.

Introducing the Speculation Rules API

The Speculation Rules API is a new web API that solves the above problems. It allows defining rules to dynamically prefetch and/or prerender URLs of certain structure based on user interaction, in 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. syntax—or in other words, speculatively preload those URLs before the navigation. This API can be used, for example, to prerender any links on a page whenever the user hovers over them. Also, with the Speculation Rules API, “prerender” actually means to prerender the entire page, including running JavaScript. This can lead to near-instant load times once the user clicks on the link as the page would have most likely already been loaded in its entirety. However that is only one of the possible configurations.

The following code example shows the general syntax of the Speculation Rules API JSON spec and outlines a configuration where any links other than WP Admin or login URLs are prerendered.

<script type="speculationrules">
{
	"prerender": [
		{
			"source": "document",
			"where": {
				"and": [
					{
						"href_matches": "/*"
					},
					{
						"not": {
							"href_matches": [
								"/wp-login.php",
								"/wp-admin/*"
							]
						}
					}
				]
			},
			"eagerness": "moderate"
		}
	]
}
</script>

The Speculation Rules API allows defining URL patterns for which kind of URLs should be eligible for speculative loading. Rules can be configured to either prefetch or prerender certain URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org patterns. A so-called “eagerness” value can also be specified which dictates how eagerly the prefetching or prerendering should be applied. For example, a value of “moderate” triggers the speculative loading when the user hovers over the link. A value of “conservative” delays this until the user clicks on the link (which still provides a decent performance benefit), while a value of “eager” acts as soon as there is the slightest suggestion a user may click the link. Note that caution is advised with the “eager” configuration in particular as it increases the likelihood of loading URLs wastefully.

Browser support

While the Speculation Rules API has been available in Chrome and Edge since version 109 in general, the particular subfeature needed to unlock the aforementioned functionality is called “document rules”, which was only recently added in version 121. This post describes the latest enhancements to the API in more depth.

In other words, at the time of writing this post end users will need to use either Chrome 121+ or Edge 121+ to get the benefits of this feature. However there are no adverse effects for users on other browsers, as this is a progressive enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.. Therefore using the Speculation Rules API on your website is safe regardless of the user base.

The Speculation Rules API was presented at the W3C web standards conference TPAC 2023, with positive reception. At this point, the standard is in draft stage. Positions regarding the API by Firefox and Safari have been requested. To keep track of specifically the required subfeatures for the functionality outlined in this post, you can refer to this “Can I use” table.

The Speculative Loading WordPress plugin

As mentioned in the beginning of this post, the WordPress Performance Team recently published a new feature plugin “Speculative Loading” which enables speculative loading of other frontend URLs linked on the page. It inserts a JSON script similar to the previous code example. By default, any URLs linked on the page are prerendered with an eagerness configuration of “moderate”, which typically triggers when hovering over a link. As such, you don’t need to do anything after activating the plugin: it just works out of the box. The plugin also provides a few customization options to tweak the behavior to the site owner’s preference.

The Speculative Loading plugin’s settings UIUI User interface

The default behavior can be modified via a new “Speculative Loading” section in the Settings > Reading screen. For example, if the site is using JavaScript that is not yet adapted for being loaded while prerendering, the plugin could be configured to only prefetch documents. One could set the eagerness to “conservative” to reduce the likelihood of URLs being loaded without the user navigating to them. Or one could set it to “eager” to increase the chance of the speculative loading already being completed by the time the user lands on the linked URL, which however runs at the risk of wastefully loading several resources. The default of “moderate” strikes a good balance between sustainability and performance.

The rules for which kinds of URLs to speculatively preload can be customized using a 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. called “plsr_speculation_rules_href_exclude_paths”. For example, plugins that add URLs to a WordPress site which modify user state just from being loaded could use that filter to exclude those URLs from being prerendered or prefetched. 

Here is a code example which would would ensure that URLs like https://example.com/cart/ or https://example.com/cart/foo/ would be excluded from prefetching and prerendering:

<?php

add_filter(
    'plsr_speculation_rules_href_exclude_paths',
    function ( $exclude_paths ) {
        $exclude_paths[] = '/cart/*';
        return $exclude_paths;
    }
);

Please refer to the plugin’s FAQ for details on the filter.

Potential next steps

At the moment, the plugin should be used to test the feature, and the Performance Team is eager to receive feedback as well as analyze the plugin’s performance benefits on load times.

Down the road, as the browser API and the plugin mature, the possibility of including the feature in WordPress core will be explored. However, in order to get there, additional feedback is needed.

Testing and feedback

Your testing and feedback is crucial to improve the feature ahead of exploring its potential usage in WordPress core. Please consider the following ways to help:

The WordPress performance team is excited to learn more about how the Speculation Rules API is being used in WordPress sites. Please try the plugin and share your feedback!

Props @adamsilverstein @domenicdenicola @jeremyroman @swissspidy @tunetheweb @tweetythierry @westonruter for review and proofreading.

#feature-projects, #performance, #performance-lab, #speculative-loading

WordPress 6.5 adds AVIF support 

WordPress 6.5 supports AVIF, a modern image format that offers significant improvements in image quality and compression over previous formats like JPEG, PNG, and even WebP.  AVIF images can be up to 50% smaller than JPEGs while maintaining the same image quality. AVIF images also support a wide range of colors (including HDR) and produce sharper images than JPEGs, especially in areas with high detail.

From WordPress version 6.5 forward, you can upload and use AVIF images in WordPress just like you would a JPEG or PNG image today – as long as your hosting environment supports AVIF. Switching to the AVIF format for your images is likely to improve your site’s performance and your site visitor’s experience. 

How AVIF helps you

AVIF images are significantly smaller than their JPEG equivalents, so pages load more quickly and take less bandwidth to transmit. AVIF images still get all of the benefits of the responsive images, Fetch Priority, and lazy loading that WordPress supports by default. Finally, AVIFs are supported in all major browsers, so most sites can start using them today.

Creating AVIF images

Many image editing tools support exporting to AVIF. You can also use command line conversion tools or web based open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. tools like Squoosh. Once you save your images as AVIF, upload them to WordPress and use them like you would any other image. WordPress can also create AVIFs for you automatically, for more details, see the FAQ item below.

Using AVIF images in WordPress

AVIF images work like any other image format in WordPress, with a few important notes:

AVIF in WordPress depends on support in your web server’s image processing library (WordPress has built-in support for both Imagick and LibGD for image processing). You can check for AVIF support in wp-adminadmin (and super admin) by visiting Tools -> Site Health, clicking the “Info” tab and expanding the “Media Handling” section, then finally looking for “AVIF” in the list of supported formats.

If your audience includes a significant number of users on an unsupported browser, either avoid using AVIF images, or enqueue a browser polyfill.

FAQ

Q: How do I adjust the compression level used for generated AVIF images?

The wp_editor_set_quality 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. can be used to set the quality setting. The passed mime type enables setting by type, for example:

// Use a quality setting of 75 for AVIF images.
function filter_avif_quality( $quality, $mime_type ) {
if ( 'image/avif' === $mime_type ) {
return 75;
}
return $quality;
}
add_filter( 'wp_editor_set_quality', 'filter_avif_quality', 10, 2 );

How can I output lossless AVIF images?

Using a compression level of 100 will set AVIF to its lossless mode.

Q: Can WordPress create AVIF images when I upload JPEGs?

Yes. Developers can use the image_editor_output_format filter to specify this type of transformation for uploads. Here is an example:

// Output AVIFs for uploaded JPEGs
function filter_image_editor_output_format( $formats ) {
$formats['image/jpeg'] = 'image/avif';
return $formats;
}
add_filter( 'image_editor_output_format', 'filter_image_editor_output_format' );

If I use WordPress multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site, will all my sites work with AVIF images?

No. Multisite stores the file types that users are allowed to upload when a site is created. We are still working on improving this in #53167. In the meantime, to ensure all existing sites on a networknetwork (versus site, blog) allow AVIF files, you can use the site_option filter in a network mu-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 to add avif to the allowed file types for all network sites:

// Ensure all network sites include AVIF support.
function filter_site_option_upload_filetypes( $filetypes ) {
$filetypes = explode( ' ', $filetypes );
if ( ! in_array( 'avif', $filetypes, true ) ) {
$filetypes[] = 'avif';
}
return implode( ' ', $filetypes );
}
add_filter( 'site_option_upload_filetypes', 'filter_site_option_upload_filetypes' );


Thanks to @stevenlinx and @westonruter for reviewing this post.

#6-5, #core-images, #dev-notes, #dev-notes-6-5, #images