Image Block: Add data-id attribute on server side render for core galleries

lib/blocks.php

@@ -66,6 +66,8 @@ function gutenberg_reregister_core_block_types() {
 				'comment-template.php'          => 'core/comment-template',
 				'file.php'                      => 'core/file',
 				'home-link.php'                 => 'core/home-link',
+				'image.php'                     => 'core/image',
+				'gallery.php'                   => 'core/gallery',
 				'latest-comments.php'           => 'core/latest-comments',
 				'latest-posts.php'              => 'core/latest-posts',
 				'loginout.php'                  => 'core/loginout',

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * 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.
+ *
+ * @param  array $parsed_block A single parsed block object.
+ *
+ * @return array               The migrated block object.
+ */
+function render_block_core_gallery_data( $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', 'render_block_core_gallery_data' );
+
+/**
+ * Registers the `core/gallery` block on server.
+ * This render callback needs to be here
+ * so that the gallery styles are loaded in block-based themes.
+ */
+function gutenberg_register_block_core_gallery() {
+	register_block_type_from_metadata(
+		__DIR__ . '/gallery',
+		array(
+			'render_callback' => function ( $attributes, $content ) {
+				return $content;
+			},
+		)
+	);
+}
+
+add_action( 'init', 'gutenberg_register_block_core_gallery', 20 );

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

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/image` block on the server,
+ * adding a data-id attribute to the element if core/gallery has added on pre-render.
+ *
+ * @param  array $attributes The block attributes.
+ * @param  array $content    The block content.
+ * @return string            Returns the block content with the data-id attribute added.
+ */
+function render_block_core_image( $attributes, $content ) {
+	if ( isset( $attributes['data-id'] ) ) {
+		// Add 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.
+		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
+		if ( ! strpos( $content, $data_id_attribute ) ) {
+			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
+		}
+	}
+	return $content;
+}
+
+
+/**
+ * Registers the `core/image` block on server.
+ */
+function register_block_core_image() {
+	register_block_type_from_metadata(
+		__DIR__ . '/image',
+		array(
+			'render_callback' => 'render_block_core_image',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_image' );