Only apply binding values for data-id attribute and wp-image classnam…

…e when a binding is applied

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

@@ -5,6 +5,35 @@
  * @package WordPress
  */
 
+ /**
+ * Handles backwards compatibility for Gallery Blocks,
+ * whose images feature a `data-id` attribute.
+ *
+ * Now that the Gallery Block contains inner Image Blocks,
+ * we add a custom `data-id` attribute before rendering the gallery
+ * so that the Image Block can pick it up in its render_callback.
+ *
+ * @since 5.9.0
+ *
+ * @param array $parsed_block The block being rendered.
+ * @return array The migrated block object.
+ */
+function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
+	if ( 'core/gallery' === $parsed_block['blockName'] ) {
+		foreach ( $parsed_block['innerBlocks'] as $key => $inner_block ) {
+			if ( 'core/image' === $inner_block['blockName'] ) {
+				if ( ! isset( $parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] ) && isset( $inner_block['attrs']['id'] ) ) {
+					$parsed_block['innerBlocks'][ $key ]['attrs']['data-id'] = esc_attr( $inner_block['attrs']['id'] );
+				}
+			}
+		}
+	}
+
+	return $parsed_block;
+}
+
+add_filter( 'render_block_data', 'block_core_gallery_data_id_backcompatibility' );
+
 /**
  * Renders the `core/gallery` block on the server.
  *

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

@@ -28,24 +28,10 @@ function render_block_core_image( $attributes, $content, $block ) {
 		return '';
 	}
 
-	if ( isset( $attributes['id'] ) ) {
-		$id = $attributes['id'];
-
-		// Use block context to detect whether the block is nested in a gallery.
-		// As the context names are very generic, check multiple array keys to
-		// reduce the chance a non-gallery parent is providing the same context.
-		$is_gallery_child = array_key_exists( 'allowResize', $block->context )
-			&& array_key_exists( 'imageCrop', $block->context )
-			&& array_key_exists( 'fixedHeight', $block->context );
-
-		// Adds the data-id="$id" attribute to the img element to provide backwards
-		// compatibility for the Gallery Block, which now wraps Image Blocks within
-		// innerBlocks. The data-id attribute is added in a core/gallery
-		// `render_block_data` hook.
-		if ( $is_gallery_child ) {
-			$p->set_attribute( 'data-id', $id );
-		}
+	$has_id_binding = isset( $attributes['metadata']['bindings']['id'] ) && isset( $attributes['id'] );
 
+	// Ensure the `wp-image-id` classname on the image block supports block bindings.
+	if ( $has_id_binding ) {
 		// If there's a mismatch with the 'wp-image-' class and the actual id, the id was
 		// probably overridden by block bindings. Update it to the correct value.
 		// See https://github.com/WordPress/gutenberg/issues/62886 for why this is needed.
@@ -57,6 +43,30 @@ function render_block_core_image( $attributes, $content, $block ) {
 		}
 	}
 
+	// For backwards compatibility, the data-id html attribute is only
+	// set for image blocks nested in a gallery.
+	// `data-id` is an attribute set by the gallery block using a filter,
+	// so checkings it's set serves this purpose.
+	if ( isset( $attributes['data-id'] ) ) {
+		$data_id;
+
+		if ( $has_id_binding ) {
+			// If there is a binding for the id, use the `id` attribute.
+			// This ensures the `data-id` html attribute contains the correct
+			// block binding value since the `data-id` block attribute does
+			// not support bindings.
+			$data_id = $attributes['id'];
+		} else {
+			// If there are no bindings for the id, for backward compatibility
+			// use the `data-id` attribute added by the gallery block.
+			// This attribute may be filtered by third parties to change what's
+			// stored in the data-id html attribute.
+			$data_id = $attributes['data-id'];
+		}
+
+		$p->set_attribute( 'data-id', $data_id );
+	}
+
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );