Interactivity API: Event directives cannot be passive #58705
Labels
[Feature] Interactivity API
API to add frontend interactivity to blocks.
[Type] Bug
An existing feature does not function as intended
[Type] Performance
Related to performance efforts
Description
I have a page that has a dozen Image blocks with lightbox enabled. When I open the console, I see many many warnings:
At issue here is the Image block's use of these touch event directives:
gutenberg/packages/block-library/src/image/index.php
Lines 297 to 299 in 69a82ac
Such scroll event listeners should be passive for performance to ensure smooth interactivity. In fact, Chrome defaults these events to be passive by default (and Firefox too apparently). Safari, however, does not.
Nevertheless, there is no way currently to specify using event directives to specify that event handler should be passive. Such events should always be passive unless they call
event.preventDefault()
. The Image block only may callpreventDefault
in thetouchmove
handler:gutenberg/packages/block-library/src/image/view.js
Lines 205 to 226 in 69a82ac
Preact does not support setting the
passive
flag when adding event listeners via props: preactjs/preact#428The workaround I suppose would be to not use event directives at all for the Image block, and to instead call
addEventListener
at theinit
action.👉 In any case, it would be great if perhaps the event directives could somehow default to being passive to better ensure best practices for performance.
Read more from MDN on using passive listeners.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
No response
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: