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( { ) ) } ) : ( - + ) } ); 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 ( + + ); +} 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 (
- + { multiple ? : }

- { __( - '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' + ) }

); 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; +};