From 1d0f3c415347cd6550e84e02ff77211e6da06277 Mon Sep 17 00:00:00 2001
From: Mario Santos <34552881+SantosGuillamot@users.noreply.github.com>
Date: Tue, 10 Oct 2023 09:11:10 +0200
Subject: [PATCH] Reset styles on window resize (#55077)

Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
---
 packages/block-library/src/image/index.php |  1 +
 packages/block-library/src/image/view.js   | 21 ++++++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index bfc3af8754bc1..e1f71964622c0 100644
--- a/packages/block-library/src/image/index.php
+++ b/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.
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 3eb47dcc7cab4..3f2242ad737f0 100644
--- a/packages/block-library/src/image/view.js
+++ b/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,7 +374,7 @@ 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 {
@@ -370,9 +382,8 @@ function setStyles( context, event ) {
 		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;