diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx index 1c09035f46e..43454e8ca24 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-template/edit.tsx @@ -16,7 +16,10 @@ import { } from '@wordpress/block-editor'; import { Spinner } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; -import { ProductCollectionAttributes } from '@woocommerce/blocks/product-collection/types'; +import { + ProductCollectionAttributes, + CoreCollectionNames, +} from '@woocommerce/blocks/product-collection/types'; import { getSettingWithCoercion } from '@woocommerce/settings'; import { isNumber, ProductResponseItem } from '@woocommerce/types'; import { ProductDataContextProvider } from '@woocommerce/shared-context'; @@ -35,6 +38,16 @@ import './editor.scss'; import { getDefaultStockStatuses } from '../product-collection/constants'; const DEFAULT_QUERY_CONTEXT_ATTRIBUTES = [ 'collection' ]; +const getNoResultsText = ( collection?: CoreCollectionNames | string ) => { + if ( collection === CoreCollectionNames.HAND_PICKED ) { + return __( + 'No products chosen yet. Use "Hand-Picked Products" in Inspector Controls to choose products to display', + 'woocommerce' + ); + } + + return __( 'No results found.', 'woocommerce' ); +}; const ProductTemplateInnerBlocks = () => { const innerBlocksProps = useInnerBlocksProps( @@ -161,6 +174,7 @@ const ProductTemplateEdit = ( columns: 3, shrinkColumns: false, }, + collection, queryContextIncludes = [], __privateProductCollectionPreviewState, }, @@ -312,7 +326,8 @@ const ProductTemplateEdit = ( const hasLayoutFlex = layoutType === 'flex' && columns > 1; let customClassName = ''; - if ( hasLayoutFlex ) { + // We don't want to apply layout styles if there's no products. + if ( products && products.length && hasLayoutFlex ) { const dynamicGrid = `wc-block-product-template__responsive columns-${ columns }`; const staticGrid = `is-flex-container columns-${ columns }`; @@ -337,12 +352,7 @@ const ProductTemplateEdit = ( } if ( ! products.length ) { - return ( -

- { ' ' } - { __( 'No results found.', 'woocommerce' ) } -

- ); + return

{ getNoResultsText( collection ) }

; } // To avoid flicker when switching active block contexts, a preview is rendered