Re-animate elements on lightbox open #2741
Conversation
girishpanchal30
added
the
pr-checklist-skip
pirate-bot
added
the
pr-checklist-complete
Bundle Size Diff
|
There was a problem hiding this comment.
Pull request overview
Updates the animations frontend runtime to re-trigger Otter animations when a WordPress “Enlarge on click” lightbox is opened, addressing a compatibility issue where animated images/galleries can appear invisible in the lightbox.
Changes:
- Adds a lightbox container click listener to re-run
animateElements()when the WP lightbox is interacted with.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const lightboxes = document.querySelectorAll('.wp-lightbox-container'); | ||
| lightboxes.forEach((container) => { | ||
| container.addEventListener('click', () => { | ||
| animateElements(); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Formatting in this new block doesn’t match the surrounding file’s spacing conventions (e.g., window.addEventListener( 'load', … )). Please align with the existing style (spaces inside parentheses, consistent indentation) to keep the file consistent.
| // Re-animate elements when a lightbox is opened, as the content might be different. | ||
| const lightboxes = document.querySelectorAll('.wp-lightbox-container'); | ||
| lightboxes.forEach((container) => { | ||
| container.addEventListener('click', () => { | ||
| animateElements(); | ||
| }); |
There was a problem hiding this comment.
This change adds/changes frontend behavior for animations when the WordPress lightbox opens, but there’s no automated coverage to prevent regressions. Since the repo already has Playwright E2E coverage for animations, please add an E2E that applies an Otter animation to a core Image/Gallery block with “Enlarge on click” enabled and asserts the media is visible when the lightbox opens (and ideally after closing/reopening).
|
Plugin build for f0e644e is ready 🛎️!
|
2 participants
Closes #2736
Summary
Re-animated the image or gallery block when WP Enlarge is open.
Checklist before the final review