Reset styles on window resize (#55077)

Co-authored-by: Ricardo Artemio Morales <[email protected]>

packages/block-library/src/image/index.php

@@ -200,6 +200,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
+	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
 	// Wrap the image in the body content with a button.

packages/block-library/src/image/view.js

@@ -105,7 +105,10 @@ store(
 						context.core.image.scrollDelta = 0;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles( context, event );
+						setStyles(
+							context,
+							event.target.previousElementSibling
+						);
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -338,6 +341,15 @@ store(
 							context.core.image.imageButtonHeight = offsetHeight;
 						}
 					},
+					setStylesOnResize: ( { state, context, ref } ) => {
+						if (
+							context.core.image.lightboxEnabled &&
+							( state.core.image.windowWidth ||
+								state.core.image.windowHeight )
+						) {
+							setStyles( context, ref );
+						}
+					},
 				},
 			},
 		},
@@ -362,17 +374,16 @@ store(
  * @param {Object} context - An Interactivity API context
  * @param {Object} event - A triggering event
  */
-function setStyles( context, event ) {
+function setStyles( context, ref ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
 	let {
 		naturalWidth,
 		naturalHeight,
 		offsetWidth: originalWidth,
 		offsetHeight: originalHeight,
-	} = event.target.previousElementSibling;
-	let { x: screenPosX, y: screenPosY } =
-		event.target.previousElementSibling.getBoundingClientRect();
+	} = ref;
+	let { x: screenPosX, y: screenPosY } = ref.getBoundingClientRect();
 
 	// Natural ratio of the image clicked to open the lightbox.
 	const naturalRatio = naturalWidth / naturalHeight;