Migrate interactive directives off data-wp-on-async - #3220
Merged
Merged
Conversation
WordPress 7.0 deprecates the `data-wp-on-async--{event}` directive
and will remove it in a later release. Reported by @kimusan on the
plugin's support forum.
Switch every occurrence to the new `data-wp-on--{event}` directive and
wrap the underlying action handlers with `withSyncEvent()` so the
Interactivity API keeps the event object synchronously available for
the callbacks that call `preventDefault()` or read `event.key` /
`event.target`.
Source changes:
- src/follow-me: onKeydown handler wrapped; directive renamed in
render.php.
- src/remote-reply: onReplyLinkKeydown wrapped; click + keydown
directives renamed in render.php.
- src/shared/actor-list: previousPage / nextPage wrapped (used by the
Followers and Following blocks' pagination).
- src/shared/modal: toggleModal wrapped; the legacy async selector is
dropped from the close-button fallback lookups.
- includes/class-blocks.php: pagination directives renamed.
Build artefacts regenerated.
github-actions
Bot
added
[Block] Follow Me
[Block] Remote Reply
There was a problem hiding this comment.
Pull request overview
This PR migrates interactive block directives off the deprecated data-wp-on-async--{event} syntax ahead of WordPress 7.0, switching to data-wp-on--{event} and wrapping affected handlers with withSyncEvent() to preserve synchronous event behavior.
Changes:
- Replaced
data-wp-on-async--{event}directives withdata-wp-on--{event}in block render templates (Follow Me, Remote Reply, Followers/Following pagination). - Wrapped event-sensitive action handlers with
withSyncEvent()in the relevant Interactivity stores/views. - Updated modal trigger lookup selectors to remove the legacy
data-wp-on-async--clickfallback and regenerated build artifacts.
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/shared/modal/index.js | Wrapes toggleModal with withSyncEvent() and removes legacy async directive selectors for modal trigger lookups. |
| src/shared/actor-list/store.js | Wraps pagination actions (previousPage / nextPage) with withSyncEvent(). |
| src/remote-reply/view.js | Wraps reply-link keydown handler with withSyncEvent(). |
| src/remote-reply/render.php | Updates reply link directives from data-wp-on-async--* to data-wp-on--*. |
| src/follow-me/view.js | Wraps the follow button keydown handler with withSyncEvent(). |
| src/follow-me/render.php | Updates keydown directive from data-wp-on-async--keydown to data-wp-on--keydown. |
| includes/class-blocks.php | Updates Followers/Following pagination directives to data-wp-on--click. |
| build/remote-reply/view.js | Regenerated build output reflecting directive/handler updates. |
| build/remote-reply/view.asset.php | Regenerated asset metadata/version hash. |
| build/remote-reply/render.php | Regenerated render output with updated directives. |
| build/reactions/view.js | Regenerated build output reflecting modal store changes (sync toggle + selector updates). |
| build/reactions/view.asset.php | Regenerated asset metadata/version hash. |
| build/reactions/index.js | Regenerated editor build output. |
| build/reactions/index.asset.php | Regenerated asset metadata/version hash. |
| build/following/view.js | Regenerated build output reflecting pagination handler wrapping. |
| build/following/view.asset.php | Regenerated asset metadata/version hash. |
| build/following/index.js | Regenerated editor build output. |
| build/following/index.asset.php | Regenerated asset metadata/version hash. |
| build/followers/view.js | Regenerated build output reflecting pagination handler wrapping. |
| build/followers/view.asset.php | Regenerated asset metadata/version hash. |
| build/followers/index.js | Regenerated editor build output. |
| build/followers/index.asset.php | Regenerated asset metadata/version hash. |
| build/follow-me/view.js | Regenerated build output reflecting keydown handler wrapping + modal store changes. |
| build/follow-me/view.asset.php | Regenerated asset metadata/version hash. |
| build/follow-me/render.php | Regenerated render output with updated directives. |
| build/follow-me/index.js | Regenerated editor build output. |
| build/follow-me/index.asset.php | Regenerated asset metadata/version hash. |
| .github/changelog/fix-data-wp-on-async-deprecation | Adds a changelog entry for the deprecation-warning fix. |
…-deprecation # Conflicts: # build/follow-me/index.asset.php # build/follow-me/index.js # build/followers/index.asset.php # build/followers/index.js # build/following/index.asset.php # build/following/index.js # build/reactions/index.asset.php # build/reactions/index.js
The plugin now imports withSyncEvent from @wordpress/interactivity, which first shipped in WordPress 6.8. Older cores would fail to load the affected block scripts.
Member
Author
|
@jeherve any objections about raising the min WordPress version to 6.8? |
`withSyncEvent` landed in WordPress 6.8 (Gutenberg 20.4). On WP 6.5–6.7 the symbol is undefined; calling it throws. The previous approach was to bump the plugin's minimum WordPress version, which is a `major` changelog significance and forces an upgrade on existing sites running 6.5–6.7 just to silence a 7.0 deprecation warning. Add `src/shared/with-sync-event.js`: a 1-line shim that imports the namespace from `@wordpress/interactivity` and falls back to the identity function when `withSyncEvent` is undefined. Pre-6.8 actions were synchronous by default, so the identity fallback is functionally equivalent. Update the four consumers (follow-me/view, remote-reply/view, shared/actor-list/store, shared/modal) to import from the shim, revert the `readme.txt` `Requires at least` back to 6.5, drop the `bump-min-wp-version` changelog entry, and rebuild the affected view bundles.
Member
Author
|
Scratch the min-version question — landed a |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 29 changed files in this pull request and generated 1 comment.
Files not reviewed (9)
- build/follow-me/index.js: Language not supported
- build/follow-me/view.js: Language not supported
- build/followers/index.js: Language not supported
- build/followers/view.js: Language not supported
- build/following/index.js: Language not supported
- build/following/view.js: Language not supported
- build/reactions/index.js: Language not supported
- build/reactions/view.js: Language not supported
- build/remote-reply/view.js: Language not supported
Copilot flagged that the previous shim — `import * as iAPI from
'@wordpress/interactivity'; iAPI.withSyncEvent ?? identity` — got
tree-shaken into a *named* import in the bundle:
import { withSyncEvent as r } from "@wordpress/interactivity";
Native ESM enforces that named imports must exist, so on WP 6.5–6.7
the missing export would have thrown at module instantiation, before
the `??` fallback could run. The shim was protecting against an
`undefined` lookup, not against the actual failure mode.
Read the property via a `const`-aliased bracket access. The compiled
output now keeps the namespace import:
import * as t from "@wordpress/interactivity";
const o = t.withSyncEvent ?? (t => t);
Verified across all five view bundles. Namespace imports always
succeed; the property access yields undefined on older cores and the
identity fallback fires — behaviorally equivalent to the pre-6.8
sync-by-default actions.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 20 out of 29 changed files in this pull request and generated no new comments.
Files not reviewed (9)
- build/follow-me/index.js: Language not supported
- build/follow-me/view.js: Language not supported
- build/followers/index.js: Language not supported
- build/followers/view.js: Language not supported
- build/following/index.js: Language not supported
- build/following/view.js: Language not supported
- build/reactions/index.js: Language not supported
- build/reactions/view.js: Language not supported
- build/remote-reply/view.js: Language not supported
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes https://wordpress.org/support/topic/data-wp-on-async-getting-deprecated-with-wp7-0/
Proposed changes:
WordPress 7.0 deprecates the
data-wp-on-async--{event}directive and will remove it in a later release. A user flagged this on the support forum after seeing the console warning:Switch every occurrence to the new
data-wp-on--{event}directive and wrap the underlying action handlers withwithSyncEvent()so the Interactivity API keeps the event object synchronously available for callbacks that callpreventDefault()or readevent.key/event.target.Source changes
src/follow-me/view.js— wraponKeydown;render.phprenamesdata-wp-on-async--keydown→data-wp-on--keydown.src/remote-reply/view.js— wraponReplyLinkKeydown;render.phprenames both the click and keydown directives on the reply link.src/shared/actor-list/store.js— wrappreviousPageandnextPage. Used by the Followers and Following blocks' pagination (directives live inincludes/class-blocks.php, also renamed).src/shared/modal/index.js— wraptoggleModaland drop the legacy async selector from the close-button fallback lookups (no element ships withdata-wp-on-async--click="actions.toggleModal"any more).Other information:
No new tests. Behaviour is unchanged — only the directive name and the handler annotation. The existing interactive E2E coverage exercises the changed paths (follow-me modal open/close, remote-reply link, followers/following pagination, reactions modal).
Testing instructions:
The usage of data-wp-on-async is deprecated…. After this PR, no such warning appears.Changelog entry
Changelog Entry Details
Significance
Type
Message
Silence the upcoming WordPress 7.0 deprecation warning about
data-wp-on-asyncby switching the plugin's interactive blocks to the newwithSyncEvent()helper.