Changes to the Interactivity API in WordPress 6.9

Standardized 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 set unique IDs in directives

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. does not allow multiple attributes with the same name on a single element, yet multiple plugins may need to add directives of the same type to the same element. To address this, WordPress 6.9 introduces a standardized way to assign unique IDs to Interactivity API directives, allowing an element to have multiple directives of the same type, as long as each directive has a different ID.

To assign a unique ID to a directive, append a triple-dash (---) followed by the ID, as shown in the following example.

<div
    data-wp-watch---my-unique-id="callbacks.firstWatch"
    data-wp-watch---another-id="callbacks.secondWatch"
></div>

The triple-dash syntax unambiguously differentiates unique IDs from suffixes. In the example below, click is the suffix, while plugin-a and plugin-b are the unique IDs. The order is also important: the unique ID must always appear at the end of the attribute name.

<button
    data-wp-on--click---plugin-a="plugin-a::actions.someAction"
    data-wp-on--click---plugin-b="plugin-b::actions.someAction"
>
  Button example
</button>

See #72161 for more details.

Props to @luisherranz and @santosguillamot for the implementation.

Deprecated data-wp-ignore directive

The data-wp-ignore directive was designed to prevent hydration of a specific part of an interactive region. However, its implementation broke context inheritance and caused potential issues with the client-side navigation feature of the @wordpress/interactivity-router module, without addressing a real use case.

Since WordPress 6.9, this directive is deprecated and will be removed in subsequent versions.

See #70945 for more details.

Props to @Sahil1617 for the implementation.

New AsyncAction and TypeYield type helpers

WordPress 6.9 introduces two new TypeScript helper types, AsyncAction<ReturnType> and TypeYield<T>, to the Interactivity API. These types help developers address potential TypeScript issues when working with asynchronous actions.

AsyncAction<ReturnType>

This helper lets developers explicitly type the return value of an asynchronous action (generator). By using any for yielded values, it breaks circular type dependencies when state is used within yield expressions or in the final return value.

TypeYield<T extends (...args: any[]) => Promise<any>

This helper lets developers explicitly type the value that a yield expression resolves to by providing the type of the async function or operation being yielded.

For more information and examples, see the Typing asynchronous actions section in the Interactivity API reference > Core Concepts > Using TypeScript guide.

See #70422 for more details.

Props to @luisherranz for the implementation.

#6-9, #dev-notes, #dev-notes-6-9, #interactivity-api