Skip to content

Commit

Permalink
Image block: Use built-in directive for mouseover event in lightbox (#…
Browse files Browse the repository at this point in the history
…52067)

* Use built-in directive for mouseover event

* Change mouseover directive to mouseenter
  • Loading branch information
artemiomorales authored Jun 30, 2023
1 parent b2b968d commit a7fb515
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 13 deletions.
2 changes: 1 addition & 1 deletion lib/block-supports/behaviors.php
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
22 changes: 10 additions & 12 deletions packages/block-library/src/image/view-interactivity.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
},
},
},
},
Expand Down Expand Up @@ -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' );
Expand Down

0 comments on commit a7fb515

Please sign in to comment.