diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss index 4dac0fe0dc5..db6f362ec46 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss @@ -176,6 +176,11 @@ $max-button-width: calc(100% / #{$max-button-columns}); } } +// Product to Show Radio Control +.wc-block-product-collection-product-reference-radio { + width: 100%; +} + // Linked Product Control .wc-block-product-collection-linked-product-control { width: 100%; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/linked-product-control.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/linked-product-control.tsx index 8e25ea8b4a4..19a62941685 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/linked-product-control.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/linked-product-control.tsx @@ -122,10 +122,12 @@ const LinkedProductControl = ( { usesReference: string[] | undefined; } ) => { const [ isDropdownOpen, setIsDropdownOpen ] = useState< boolean >( false ); - const [ isCurrentProductReference, setIsCurrentProductReference ] = - useState< PRODUCT_REF >( PRODUCT_REF.CURRENT_PRODUCT ); + const [ productReference, setProductReference ] = useState< PRODUCT_REF >( + PRODUCT_REF.CURRENT_PRODUCT + ); const { product, isLoading } = useGetProduct( query.productReference ); + const showDropdown = productReference === PRODUCT_REF.SPECIFIC_PRODUCT; const showLinkedProductControl = useMemo( () => { const isInRequiredLocation = usesReference?.includes( location.type ); const isProductContextRequired = usesReference?.includes( 'product' ); @@ -141,26 +143,46 @@ const LinkedProductControl = ( { if ( ! showLinkedProductControl ) return null; + const radioControlHelp = + productReference === PRODUCT_REF.CURRENT_PRODUCT + ? __( + 'Related products will be pulled from the product a shopper is currently viewing', + 'woocommerce' + ) + : __( + 'Select a product to pull the related products from', + 'woocommerce' + ); + return ( - { ! isCurrentProductReference && ( + + { showDropdown && ( + setIsDropdownOpen( ! isDropdownOpen ) } /> - ) } - + + ) } ); };