From 5f43edac7d67b1e66af03593d7e6035b06163098 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Wed, 23 Dec 2020 09:05:22 +1300
Subject: [PATCH] Gallery Block Refactor: Account for null image ids in gallery
 migrations (#27855)

Co-authored-by: Glen Davies <glen.davies@a8c.com>
---
 .../block-library/src/gallery/deprecated.js   | 65 +++++++------------
 1 file changed, 25 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/gallery/deprecated.js b/packages/block-library/src/gallery/deprecated.js
index db306e258eb9b..41753817dc783 100644
--- a/packages/block-library/src/gallery/deprecated.js
+++ b/packages/block-library/src/gallery/deprecated.js
@@ -80,6 +80,26 @@ export function getHrefAndDestination( image, destination ) {
 	return {};
 }
 
+/**
+ * Gets an Image block from gallery image data
+ *
+ * Used to migrate Galleries to nested Image InnerBlocks.
+ *
+ * @param  {Object} image    Image properties.
+ * @param  {string} sizeSlug Gallery sizeSlug attribute.
+ * @param  {string} linkTo   Gallery linkTo attribute.
+ * @return {Object}          Image block.
+ */
+export function getImageBlock( image, sizeSlug, linkTo ) {
+	return createBlock( 'core/image', {
+		...( image.id && { id: parseInt( image.id ) } ),
+		url: image.url,
+		alt: image.alt,
+		caption: image.caption,
+		sizeSlug,
+		...getHrefAndDestination( image, linkTo ),
+	} );
+}
 const v1 = {
 	attributes: {
 		images: {
@@ -173,14 +193,7 @@ const v1 = {
 	},
 	migrate( { images, imageCrop, linkTo, sizeSlug, columns, caption } ) {
 		const imageBlocks = images.map( ( image ) => {
-			return createBlock( 'core/image', {
-				id: parseInt( image.id ),
-				url: image.url,
-				alt: image.alt,
-				caption: image.caption,
-				sizeSlug,
-				...getHrefAndDestination( image, linkTo ),
-			} );
+			return getImageBlock( image, sizeSlug, linkTo );
 		} );
 		return [
 			{
@@ -456,14 +469,7 @@ const v3 = {
 	},
 	migrate( { images, imageCrop, linkTo, sizeSlug, columns, caption } ) {
 		const imageBlocks = images.map( ( image ) => {
-			return createBlock( 'core/image', {
-				id: parseInt( image.id ),
-				url: image.url,
-				alt: image.alt,
-				caption: image.caption,
-				sizeSlug,
-				...getHrefAndDestination( image, linkTo ),
-			} );
+			return getImageBlock( image, sizeSlug, linkTo );
 		} );
 
 		return [
@@ -552,14 +558,7 @@ const v4 = {
 	},
 	migrate( { images, imageCrop, linkTo, sizeSlug, columns, caption } ) {
 		const imageBlocks = images.map( ( image ) => {
-			return createBlock( 'core/image', {
-				id: parseInt( image.id ),
-				url: image.url,
-				alt: image.alt,
-				caption: image.caption,
-				sizeSlug,
-				...getHrefAndDestination( image, linkTo ),
-			} );
+			return getImageBlock( image, sizeSlug, linkTo );
 		} );
 
 		return [
@@ -743,14 +742,7 @@ const v5 = {
 			linkTo = 'none';
 		}
 		const imageBlocks = attributes.images.map( ( image ) => {
-			return createBlock( 'core/image', {
-				id: parseInt( image.id ),
-				url: image.url,
-				alt: image.alt,
-				caption: image.caption,
-				sizeSlug: attributes.sizeSlug,
-				...getHrefAndDestination( image, linkTo ),
-			} );
+			return getImageBlock( image, attributes.sizeSlug, linkTo );
 		} );
 		return [
 			{
@@ -1004,14 +996,7 @@ const v6 = {
 			linkTo = 'media';
 		}
 		const imageBlocks = images.map( ( image ) => {
-			return createBlock( 'core/image', {
-				id: parseInt( image.id ),
-				url: image.url,
-				alt: image.alt,
-				caption: image.caption,
-				sizeSlug,
-				...getHrefAndDestination( image, linkTo ),
-			} );
+			return getImageBlock( image, sizeSlug, linkTo );
 		} );
 		return [
 			{