From 4085ad294caddba976ea111fb369990530f832eb Mon Sep 17 00:00:00 2001
From: madhusudhand <madhusudhan.dollu@gmail.com>
Date: Wed, 10 Jul 2024 16:05:27 +0530
Subject: [PATCH] move the image context data to state

---
 packages/block-library/src/image/index.php | 34 +++++++++++++++-------
 packages/block-library/src/image/view.js   | 15 +++++++---
 2 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 584318b51d196f..49498307047e55 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -185,22 +185,36 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$p->seek( 'figure' );
 	$figure_class_names = $p->get_attribute( 'class' );
 	$figure_styles      = $p->get_attribute( 'style' );
+
+	// create unique id and set the metadata.
+	$unique_image_id = wp_unique_id( 'image-' );
+	wp_interactivity_state(
+		'core/image',
+		array(
+			'metadata' => array(
+				$unique_image_id => array(
+					'uploadedSrc'      => $img_uploaded_src,
+					'figureClassNames' => $figure_class_names,
+					'figureStyles'     => $figure_styles,
+					'imgClassNames'    => $img_class_names,
+					'imgStyles'        => $img_styles,
+					'targetWidth'      => $img_width,
+					'targetHeight'     => $img_height,
+					'scaleAttr'        => $block['attrs']['scale'] ?? false,
+					'ariaLabel'        => $aria_label,
+					'alt'              => $alt,
+				)
+			),
+		)
+	);
+
 	$p->add_class( 'wp-lightbox-container' );
 	$p->set_attribute( 'data-wp-interactive', 'core/image' );
 	$p->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
 			array(
-				'uploadedSrc'      => $img_uploaded_src,
-				'figureClassNames' => $figure_class_names,
-				'figureStyles'     => $figure_styles,
-				'imgClassNames'    => $img_class_names,
-				'imgStyles'        => $img_styles,
-				'targetWidth'      => $img_width,
-				'targetHeight'     => $img_height,
-				'scaleAttr'        => $block['attrs']['scale'] ?? false,
-				'ariaLabel'        => $aria_label,
-				'alt'              => $alt,
+				'imageId' => $unique_image_id,
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 3d71e00aab324b..66aef884553cf7 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -37,6 +37,7 @@ const { state, actions, callbacks } = store(
 	'core/image',
 	{
 		state: {
+			metadata: {},
 			currentImage: {},
 			get overlayOpened() {
 				return state.currentImage.currentSrc;
@@ -72,16 +73,22 @@ const { state, actions, callbacks } = store(
 					return;
 				}
 
-				// Stores the positons of the scroll to fix it until the overlay is
+				// Stores the positions of the scroll to fix it until the overlay is
 				// closed.
 				state.scrollTopReset = document.documentElement.scrollTop;
 				state.scrollLeftReset = document.documentElement.scrollLeft;
 
-				// Moves the information of the expaned image to the state.
-				ctx.currentSrc = ctx.imageRef.currentSrc;
+				// Sets the information of the expanded image in the state.
 				imageRef = ctx.imageRef;
 				buttonRef = ctx.buttonRef;
-				state.currentImage = ctx;
+				state.currentImage = {
+					...state.metadata[ ctx.imageId ],
+					// imageRef: ctx.imageRef,
+					// buttonRef: ctx.buttonRef,
+					currentSrc: ctx.imageRef.currentSrc,
+					imageButtonTop: ctx.imageButtonTop,
+					imageButtonRight: ctx.imageButtonRight,
+				};
 				state.overlayEnabled = true;
 
 				// Computes the styles of the overlay for the animation.