move the image context data to state

WordPress · Jul 11, 2024 · b1e8c2c · b1e8c2c
1 parent 3f27f26
commit b1e8c2c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git 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 image metadata in the state.
+	$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
@@ -23,6 +23,7 @@ const { state, actions, callbacks } = store(
 	'core/image',
 	{
 		state: {
+			metadata: {},
 			currentImage: {},
 			get overlayOpened() {
 				return state.currentImage.currentSrc;
@@ -58,14 +59,20 @@ 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;
-				state.currentImage = ctx;
+				// Sets the information of the expanded image in the state.
+				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.