From a7fb51532e9a1185f9ebe9dde18ab8ab86cb2697 Mon Sep 17 00:00:00 2001 From: Artemio Morales Date: Thu, 29 Jun 2023 21:20:36 -0500 Subject: [PATCH] Image block: Use built-in directive for mouseover event in lightbox (#52067) * Use built-in directive for mouseover event * Change mouseover directive to mouseenter --- lib/block-supports/behaviors.php | 2 +- .../src/image/view-interactivity.js | 22 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 28b097c8f6044..5f6c72e52199e 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -141,7 +141,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $img = null; preg_match( '/]+>/', $body_content, $img ); $button = '
- ' + ' . $img[0] . '
'; $body_content = preg_replace( '/]+>/', $button, $body_content ); diff --git a/packages/block-library/src/image/view-interactivity.js b/packages/block-library/src/image/view-interactivity.js index e5b8858f10205..441810a9f2270 100644 --- a/packages/block-library/src/image/view-interactivity.js +++ b/packages/block-library/src/image/view-interactivity.js @@ -133,6 +133,16 @@ store( { } } }, + preloadLightboxImage: ( { context } ) => { + if ( ! context.core.image.preloadInitialized ) { + context.core.image.preloadInitialized = true; + const imgDom = document.createElement( 'img' ); + imgDom.setAttribute( + 'src', + context.core.image.imageUploadedSrc + ); + } + }, }, }, }, @@ -171,18 +181,6 @@ store( { } ); } }, - preloadLightboxImage: ( { context, ref } ) => { - ref.addEventListener( 'mouseover', () => { - if ( ! context.core.image.preloadInitialized ) { - context.core.image.preloadInitialized = true; - const imgDom = document.createElement( 'img' ); - imgDom.setAttribute( - 'src', - context.core.image.imageUploadedSrc - ); - } - } ); - }, initLightbox: async ( { context, ref } ) => { context.core.image.figureRef = ref.querySelector( 'figure' );