Add common options to the variations options empty state

packages/js/product-editor/changelog/add-43808-common-options

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Create attribute control custom empty state

packages/js/product-editor/src/blocks/index.ts

@@ -23,7 +23,6 @@ export { init as initTag } from './product-fields/tag';
 export { init as initInventoryQuantity } from './product-fields/inventory-quantity';
 export { init as initToggle } from './generic/toggle';
 export { init as attributesInit } from './product-fields/attributes';
-export { init as initVariations } from './product-fields/variations';
 export { init as initRequirePassword } from './product-fields/password';
 export { init as initProductDetailsSectionDescription } from './product-fields/product-details-section-description';
 export { init as initProductList } from './product-fields/product-list';

packages/js/product-editor/src/blocks/product-fields/variation-options/edit.tsx

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { BlockAttributes } from '@wordpress/blocks';
+import { Button } from '@wordpress/components';
 import {
 	createElement,
 	createInterpolateElement,
@@ -26,9 +27,13 @@ import { useEntityProp, useEntityId } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { useProductAttributes } from '../../../hooks/use-product-attributes';
-import { AttributeControl } from '../../../components/attribute-control';
+import {
+	AttributeControl,
+	AttributeControlEmptyStateProps,
+} from '../../../components/attribute-control';
 import { useProductVariationsHelper } from '../../../hooks/use-product-variations-helper';
 import { ProductEditorBlockEditProps } from '../../../types';
+import { ProductTShirt } from './images';
 
 export function Edit( {
 	attributes: blockAttributes,
@@ -113,6 +118,49 @@ export function Edit( {
 		} ) );
 	}
 
+	function renderCustomEmptyState( {
+		addAttribute,
+	}: AttributeControlEmptyStateProps ) {
+		return (
+			<div className="wp-block-woocommerce-product-variations-options-field__empty-state">
+				<div className="wp-block-woocommerce-product-variations-options-field__empty-state-image">
+					<ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
+					<ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
+					<ProductTShirt className="wp-block-woocommerce-product-variations-options-field__empty-state-image-product" />
+				</div>
+
+				<p className="wp-block-woocommerce-product-variations-options-field__empty-state-description">
+					{ __(
+						'Sell your product in multiple variations like size or color.',
+						'woocommerce'
+					) }
+				</p>
+
+				<div className="wp-block-woocommerce-product-variations-options-field__empty-state-actions">
+					<Button variant="primary" onClick={ () => addAttribute() }>
+						{ __( 'Add options', 'woocommerce' ) }
+					</Button>
+					<Button
+						variant="secondary"
+						onClick={ () =>
+							addAttribute( __( 'Size', 'woocommerce' ) )
+						}
+					>
+						{ __( 'Add sizes', 'woocommerce' ) }
+					</Button>
+					<Button
+						variant="secondary"
+						onClick={ () =>
+							addAttribute( __( 'Color', 'woocommerce' ) )
+						}
+					>
+						{ __( 'Add colors', 'woocommerce' ) }
+					</Button>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
 			<AttributeControl
@@ -160,6 +208,7 @@ export function Edit( {
 						'product_remove_option_confirmation_cancel_click'
 					)
 				}
+				renderCustomEmptyState={ renderCustomEmptyState }
 				disabledAttributeIds={ entityAttributes
 					.filter( ( attr ) => ! attr.variation )
 					.map( ( attr ) => attr.id ) }

packages/js/product-editor/src/blocks/product-fields/variation-options/editor.scss

@@ -1,4 +1,45 @@
 .wp-block-woocommerce-product-variations-options-field {
+	&__empty-state {
+		border: 1px dashed $gray-400;
+		border-radius: 2px;
+		padding: $grid-unit-60 $grid-unit-20;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: $grid-unit-30;
+
+		&-image {
+			display: inline-flex;
+			gap: $grid-unit-05;
+
+			&-product {
+				height: 66px;
+				aspect-ratio: 1 / 1;
+				color: $gray-100;
+
+				&:first-child {
+					height: $grid-unit-70;
+					color: $gray-200;
+				}
+
+				&:last-child {
+					height: 50px;
+					color: $gray-300;
+				}
+			}
+		}
+
+		&-description {
+			margin: 0;
+		}
+
+		&-actions {
+			display: inline-flex;
+			gap: 12px;
+		}
+	}
+
 	.woocommerce-sortable {
 		padding: 0;
 	}

packages/js/product-editor/src/blocks/product-fields/variation-options/images/ProductTShirt.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { createElement } from '@wordpress/element';
+
+export function ProductTShirt( props: React.SVGProps< SVGSVGElement > ) {
+	const clipPathId = useInstanceId( ProductTShirt, 'clip-path' ) as string;
+
+	return (
+		<svg
+			{ ...props }
+			viewBox="0 0 56 56"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			aria-hidden="true"
+			focusable={ false }
+		>
+			<g clipPath={ `url(#${ clipPathId })` }>
+				<path
+					d="M18.7261 9.37008H26.8168V5.47626H28.4106C29.4938 5.47626 29.9499 4.92889 29.9499 3.91198C29.9499 2.89508 29.4938 2.34771 28.4106 2.34771C27.8689 2.34771 25.6325 2.32955 25.6325 2.32955V0L28.9263 0.0181591C31.2664 0.0181591 32.6244 1.59022 32.6244 3.91198C32.6244 6.23375 31.339 7.72539 29.1206 7.811V9.37008H37.2761C37.2761 9.37008 46.6289 13.7438 46.6289 14.0136H9.31112C9.31112 13.7438 18.7287 9.37008 18.7287 9.37008H18.7261Z"
+					fill="#F0F0F0"
+				/>
+				<path
+					d="M0 21.0152C0 21.0152 9.19987 12.1613 10.6356 11.0484C11.8717 10.0912 13.3826 9.34668 16.3213 9.34668H18.7263C19.0943 14.2315 23.023 18.076 28.0013 18.076C32.9796 18.076 36.9083 14.2315 37.2763 9.34668H39.6812C42.62 9.34668 44.1309 10.0886 45.367 11.0484C46.8001 12.1613 56 21.0152 56 21.0152L52.8202 30.3541H44.3822L44.39 56.0025H11.6074L11.6152 30.3541H3.17719L-0.00259399 21.0152H0Z"
+					fill="currentColor"
+				/>
+			</g>
+			<defs>
+				<clipPath id={ clipPathId }>
+					<rect
+						width="56"
+						height="56"
+						fill="white"
+						transform="matrix(-1 0 0 1 56 0)"
+					/>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}

packages/js/product-editor/src/blocks/product-fields/variation-options/images/index.ts

@@ -0,0 +1 @@
+export * from './ProductTShirt';