From a0f9d159e5196983d93064762fd20a510de57d55 Mon Sep 17 00:00:00 2001
From: Maikel Perez <maikel.perez@automattic.com>
Date: Fri, 31 May 2024 10:14:33 -0400
Subject: [PATCH] New image empty state for variations (#47909)

* Fix the variations image block placeholder to show only one image

* Add changelog file
---
 .../js/product-editor/changelog/fix-47788     |  4 ++
 .../src/blocks/product-fields/images/edit.tsx |  2 +-
 .../images/place-holder/imgs/product.tsx      | 56 +++++++++++++++++++
 .../images/place-holder/index.tsx             |  1 +
 .../images/place-holder/place-holder.tsx      | 19 +++++--
 .../images/place-holder/types.ts              |  3 +
 6 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 packages/js/product-editor/changelog/fix-47788
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
 create mode 100644 packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts

diff --git a/packages/js/product-editor/changelog/fix-47788 b/packages/js/product-editor/changelog/fix-47788
new file mode 100644
index 00000000000..7d655be14e4
--- /dev/null
+++ b/packages/js/product-editor/changelog/fix-47788
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix the variations image block placeholder to show only one image
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx b/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
index 2971ef471cb..791a9a17b4e 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/edit.tsx
@@ -270,7 +270,7 @@ export function ImageBlockEdit( {
 					) ) }
 				</ImageGallery>
 			) : (
-				<PlaceHolder />
+				<PlaceHolder multiple={ multiple } />
 			) }
 		</div>
 	);
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
new file mode 100644
index 00000000000..7321644cee7
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/imgs/product.tsx
@@ -0,0 +1,56 @@
+/**
+ * External dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+export function Product( { ...props }: React.SVGProps< SVGSVGElement > ) {
+	return (
+		<svg
+			aria-hidden="true"
+			width="118"
+			height="90"
+			{ ...props }
+			viewBox="0 0 118 90"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<rect width="118" height="90" fill="white" />
+			<path
+				d="M87.3178 20.5954C81.3245 20.5954 77.8536 21.6433 75.8743 23.9767C77.1554 19.4609 79.5226 16.0706 83.8469 13.0001C78.7224 13.6617 75.748 15.6088 74.3073 18.3952C72.8666 15.6111 69.8921 13.664 64.7677 13.0001C69.092 16.0706 71.4591 19.4586 72.7403 23.9767C70.761 21.6433 67.29 20.5954 61.2968 20.5954C68.4404 23.9501 71.1732 26.6498 73.5005 31.4876H75.1119C77.4391 26.6498 80.1742 23.9501 87.3156 20.5954H87.3178Z"
+				fill="#E0E0E0"
+			/>
+			<path
+				d="M79.1522 73.2086C81.4767 72.3472 89.9997 70.4556 89.9997 62.1995C89.9997 57.2958 85.5649 53.5969 80.53 52.7385C82.7701 52.0066 86.0412 48.7475 86.0412 45.0908C86.0412 40.3799 81.7782 38.5004 78.293 37.7715C78.293 36.6961 82.1671 31.1479 82.1671 31.1479H66.1521C66.1521 31.1479 70.0262 36.6961 70.0262 37.7715C66.538 38.5034 62.278 40.3799 62.278 45.0908C62.278 48.7475 65.5491 52.0066 67.7892 52.7385C62.7513 53.6 58.3195 57.2988 58.3195 62.1995C58.3195 70.4586 66.8425 72.3502 69.167 73.2086C63.6558 73.7237 60.9002 75.8743 60.4721 77.5942H87.8501C87.419 75.8743 84.6634 73.7237 79.1552 73.2086H79.1522Z"
+				fill="#F0F0F0"
+			/>
+			<path
+				d="M46.2238 74.2966C48.1078 73.5972 55.012 72.0608 55.012 65.3537C55.012 61.3706 51.4192 58.3667 47.3387 57.6674C49.1518 57.0746 51.8026 54.4259 51.8026 51.4553C51.8026 47.6299 48.3494 46.1024 45.5256 45.5096C45.5256 44.6371 48.6641 40.1301 48.6641 40.1301H35.6913C35.6913 40.1301 38.8298 44.6371 38.8298 45.5096C36.0038 46.1024 32.5528 47.6299 32.5528 51.4553C32.5528 54.4237 35.2037 57.0724 37.0167 57.6674C32.9362 58.3667 29.3434 61.3706 29.3434 65.3537C29.3434 72.0608 36.2476 73.5972 38.1316 74.2966C33.6677 74.7162 31.4357 76.4635 31.0877 77.86H53.2677C52.9197 76.4635 50.6877 74.7162 46.2238 74.2966Z"
+				fill="white"
+			/>
+			<path
+				d="M42.7052 42.1675C44.3669 32.7344 42.7487 24.8174 37.5744 22.5889C32.5593 20.4293 29.8663 22.9533 30.8901 25.0079C32.118 27.4704 35.8707 25.5778 39.1746 28.6657C42.2669 31.5556 42.3479 42.5139 42.3479 42.5139L42.7067 42.166L42.7052 42.1675Z"
+				fill="#E0E0E0"
+			/>
+			<path
+				d="M42.6524 39.8413C42.6524 39.8413 43.8097 32.2258 48.5682 28.928C53.2741 25.6661 57.914 27.5152 58.0851 29.3569C58.2562 31.1985 56.9968 32.3983 53.1886 32.3983C47.4889 32.3983 45.0782 34.8848 43.0997 39.9283C42.5458 41.341 42.6524 39.8413 42.6524 39.8413Z"
+				fill="#E0E0E0"
+			/>
+			<path
+				d="M43.4499 42.3579C43.4499 42.3579 42.2926 34.7424 37.5341 31.4446C32.8282 28.1827 28.1883 30.0319 28.0172 31.8735C27.8461 33.7151 28.9179 35.0424 34.0621 34.9149C39.5321 34.7784 42.1215 42.6159 42.1215 42.6159L43.4499 42.3594V42.3579Z"
+				fill="#E0E0E0"
+			/>
+			<path
+				d="M46.2243 74.2967C48.1083 73.5973 55.0125 72.061 55.0125 65.3538C55.0125 61.3708 51.4197 58.3668 47.3392 57.6675C49.1522 57.0747 51.8031 54.426 51.8031 51.4554C51.8031 47.63 48.3499 46.1025 45.5261 45.5097C45.5261 44.6372 48.6646 40.1302 48.6646 40.1302H35.6918C35.6918 40.1302 38.8303 44.6372 38.8303 45.5097C36.0043 46.1025 32.5533 47.63 32.5533 51.4554C32.5533 54.4238 35.2042 57.0725 37.0172 57.6675C32.9367 58.3668 29.3439 61.3708 29.3439 65.3538C29.3439 72.061 36.2481 73.5973 38.1321 74.2967C33.6682 74.7163 31.4362 76.4636 31.0882 77.8601H53.2682C52.9202 76.4636 50.6882 74.7163 46.2243 74.2967Z"
+				fill="#F0F0F0"
+			/>
+			<path
+				d="M42.1795 62.7139C37.4341 62.7139 33.8368 61.8391 30.889 61.1065C29.927 62.3054 29.3463 63.7485 29.3463 65.3515C29.3463 66.8035 29.6699 68.0113 30.1974 69.0215C33.6351 70.1893 36.9177 70.771 42.1817 70.771C47.4458 70.771 50.7284 70.1893 54.1661 69.0215C54.6914 68.0113 55.0172 66.8013 55.0172 65.3515C55.0172 63.7485 54.4342 62.3054 53.4745 61.1065C50.5267 61.8391 46.9294 62.7139 42.184 62.7139H42.1795Z"
+				fill="#E0E0E0"
+			/>
+			<path
+				d="M51.4907 53.2537C51.6901 52.6786 51.8054 52.0747 51.8054 51.4575C51.8054 50.4696 51.5727 49.6348 51.1826 48.9287C49.7308 49.597 45.9163 50.5894 42.1794 50.5894C38.4424 50.5894 34.6279 49.597 33.1762 48.9287C32.7861 49.6348 32.5533 50.4673 32.5533 51.4575C32.5533 52.077 32.6686 52.6809 32.8681 53.2537C35.2907 54.1417 38.735 54.8566 42.1794 54.8566C45.6237 54.8566 49.0659 54.1417 51.4907 53.2537Z"
+				fill="#E0E0E0"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
index caad452ed85..dbe529f76d9 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/index.tsx
@@ -1 +1,2 @@
 export * from './place-holder';
+export * from './types';
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
index 462f83b97d4..1e744ea3b98 100644
--- a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/place-holder.tsx
@@ -8,16 +8,23 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { Products } from './imgs/products';
+import { Product } from './imgs/product';
+import { PlaceHolderProps } from './types';
 
-export function PlaceHolder() {
+export function PlaceHolder( { multiple = true }: PlaceHolderProps ) {
 	return (
 		<div className="woocommerce-image-placeholder__wrapper">
-			<Products />
+			{ multiple ? <Products /> : <Product /> }
 			<p>
-				{ __(
-					'For best results, offer a variety of product images, like close-up details, lifestyle scenes, and color variations.',
-					'woocommerce'
-				) }
+				{ multiple
+					? __(
+							'For best results, offer a variety of product images, like close-up details, lifestyle scenes, and color variations.',
+							'woocommerce'
+					  )
+					: __(
+							'Add an image which displays the unique characteristics of this variation.',
+							'woocommerce'
+					  ) }
 			</p>
 		</div>
 	);
diff --git a/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
new file mode 100644
index 00000000000..8a0e7e9901c
--- /dev/null
+++ b/packages/js/product-editor/src/blocks/product-fields/images/place-holder/types.ts
@@ -0,0 +1,3 @@
+export type PlaceHolderProps = {
+	multiple?: boolean;
+};