Improve empty state in Editor by providing meaningful instruction

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 (
-			<p { ...blockProps }>
-				{ ' ' }
-				{ __( 'No results found.', 'woocommerce' ) }
-			</p>
-		);
+		return <p { ...blockProps }> { getNoResultsText( collection ) }</p>;
 	}
 
 	// To avoid flicker when switching active block contexts, a preview is rendered