Image block: Use built-in directive for mouseover event in lightbox (#…

…52067) * Use built-in directive for mouseover event * Change mouseover directive to mouseenter
WordPress · Jun 30, 2023 · a7fb515 · a7fb515
1 parent b2b968d
commit a7fb515
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git 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( '/<img[^>]+>/', $body_content, $img );
 	$button       = '<div class="img-container">
-                             <button type="button" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-on--click="actions.core.image.showLightbox" data-wp-effect="effects.core.image.preloadLightboxImage"></button>'
+                             <button type="button" aria-haspopup="dialog" aria-label="' . esc_attr( $aria_label ) . '" data-wp-on--click="actions.core.image.showLightbox" data-wp-on--mouseenter="actions.core.image.preloadLightboxImage"></button>'
 		. $img[0] .
 		'</div>';
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );

diff --git 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' );