Use block context to pass down a gallery ID

packages/block-library/src/gallery/block.json

@@ -4,6 +4,7 @@
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
+	"usesContext": [ "galleryId" ],
 	"allowedBlocks": [ "core/image" ],
 	"description": "Display multiple images in a rich gallery.",
 	"keywords": [ "images", "photos" ],

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

@@ -35,44 +35,34 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
 add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
 
 /**
- * Handles interactivity state initialization for Gallery Block.
+ * Adds a unique ID to the gallery block context.
  *
- * @since 6.7.0
- *
- * @param string $block_content Rendered block content.
- * @param array  $block         Block object.
+ * @since 6.8.0
  *
- * @return string Filtered block content.
+ * @param array $context      Default context.
+ * @param array $parsed_block Block being rendered, filtered by render_block_data.
+ * @return array Filtered context.
  */
-function block_core_gallery_interactivity_state( $block_content, $block ) {
-	if ( 'core/gallery' !== $block['blockName'] ) {
-		return $block_content;
+function block_core_gallery_render_context( $context, $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] ) {
+		$context['galleryId'] = uniqid();
 	}
-
-	$unique_gallery_id = uniqid();
-	wp_interactivity_state(
-		'core/gallery',
-		array(
-			'images'    => array(),
-			'galleryId' => $unique_gallery_id,
-		)
-	);
-
-	return $block_content;
+	return $context;
 }
 
-add_filter( 'render_block_data', 'block_core_gallery_interactivity_state', 15, 2 );
+add_filter( 'render_block_context', 'block_core_gallery_render_context', 10, 2 );
 
 /**
  * Renders the `core/gallery` block on the server.
  *
  * @since 6.0.0
  *
  * @param array  $attributes Attributes of the block being rendered.
- * @param string $content Content of the block being rendered.
+ * @param string $content    Content of the block being rendered.
+ * @param array  $block      The block instance being rendered.
  * @return string The content of the block being rendered.
  */
-function block_core_gallery_render( $attributes, $content ) {
+function block_core_gallery_render( $attributes, $content, $block ) {
 	// Adds a style tag for the --wp--style--unstable-gallery-gap var.
 	// The Gallery block needs to recalculate Image block width based on
 	// the current gap setting in order to maintain the number of flex columns
@@ -150,16 +140,24 @@ function block_core_gallery_render( $attributes, $content ) {
 		)
 	);
 
-	$state      = wp_interactivity_state( 'core/gallery' );
-	$gallery_id = $state['galleryId'];
+	// Get all image IDs from the state that match this gallery's ID.
+	$state      = wp_interactivity_state( 'core/image' );
+	$gallery_id = $block->context['galleryId'] ?? null;
+	$image_ids  = array();
+	if ( isset( $gallery_id ) && isset( $state['metadata'] ) ) {
+		foreach ( $state['metadata'] as $image_id => $metadata ) {
+			if ( isset( $metadata['galleryId'] ) && $metadata['galleryId'] === $gallery_id ) {
+				$image_ids[] = $image_id;
+			}
+		}
+	}
 
 	$processed_content->set_attribute( 'data-wp-interactive', 'core/gallery' );
 	$processed_content->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
 			array(
-				'galleryId' => $gallery_id,
-				'lightbox'  => true,
+				'images' => $image_ids,
 			),
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)

packages/block-library/src/image/block.json

@@ -4,7 +4,15 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"postId",
+		"postType",
+		"queryId",
+		"galleryId"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

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

@@ -80,7 +80,7 @@ function render_block_core_image( $attributes, $content, $block ) {
 		 * if the way the blocks are rendered changes, or if a new kind of filter is
 		 * introduced.
 		 */
-		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 3 );
 	} else {
 		/*
 		 * Remove the filter if previously added by other Image blocks.
@@ -130,12 +130,13 @@ function block_core_image_get_lightbox_settings( $block ) {
  *
  * @since 6.4.0
  *
- * @param string $block_content Rendered block content.
- * @param array  $block         Block object.
+ * @param string $block_content  Rendered block content.
+ * @param array  $block          Block object.
+ * @param array  $block_instance Block instance.
  *
  * @return string Filtered block content.
  */
-function block_core_image_render_lightbox( $block_content, $block ) {
+function block_core_image_render_lightbox( $block_content, $block, $block_instance ) {
 	/*
 	 * If there's no IMG tag in the block then return the given block content
 	 * as-is. There's nothing that this code can knowingly modify to add the
@@ -172,7 +173,6 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 
 	// Create unique id and set the image metadata in the state.
 	$unique_image_id = uniqid();
-
 	wp_interactivity_state(
 		'core/image',
 		array(
@@ -188,30 +188,12 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 					'scaleAttr'        => $block['attrs']['scale'] ?? false,
 					'alt'              => $alt,
 					'screenReaderText' => empty( $alt ) ? $screen_reader_text : "$screen_reader_text: $alt",
+					'galleryId'        => $block_instance->context['galleryId'] ?? null,
 				),
 			),
 		)
 	);
 
-	$state      = wp_interactivity_state( 'core/gallery' );
-	$gallery_id = $state['galleryId'];
-	if ( isset( $gallery_id ) ) {
-		$images = $state['images'][ $gallery_id ];
-		if ( ! isset( $images ) ) {
-			$images = array();
-		}
-		$images[] = $unique_image_id;
-
-		wp_interactivity_state(
-			'core/gallery',
-			array(
-				'images' => array(
-					$gallery_id => $images,
-				),
-			)
-		);
-	}
-
 	$p->add_class( 'wp-lightbox-container' );
 	$p->set_attribute( 'data-wp-interactive', 'core/image' );
 	$p->set_attribute(