Add selection button to featured items when id not found (https://github.com/woocommerce/woocommerce-blocks/pull/10387)

plugins/woocommerce-blocks/assets/js/blocks/featured-items/featured-category/block.tsx

@@ -36,6 +36,10 @@ const CONTENT_CONFIG = {
 		'No product category is selected.',
 		'woo-gutenberg-products-block'
 	),
+	noSelectionButtonLabel: __(
+		'Select a category',
+		'woo-gutenberg-products-block'
+	),
 };
 
 const EDIT_MODE_CONFIG = {

plugins/woocommerce-blocks/assets/js/blocks/featured-items/featured-product/block.tsx

@@ -36,6 +36,10 @@ const CONTENT_CONFIG = {
 		'No product is selected.',
 		'woo-gutenberg-products-block'
 	),
+	noSelectionButtonLabel: __(
+		'Select a product',
+		'woo-gutenberg-products-block'
+	),
 };
 
 const EDIT_MODE_CONFIG = {

plugins/woocommerce-blocks/assets/js/blocks/featured-items/with-featured-item.tsx

@@ -27,6 +27,7 @@ import {
 
 interface WithFeaturedItemConfig extends GenericBlockUIConfig {
 	emptyMessage: string;
+	noSelectionButtonLabel: string;
 }
 
 export interface FeaturedItemRequiredAttributes {
@@ -44,6 +45,7 @@ export interface FeaturedItemRequiredAttributes {
 	overlayGradient: string;
 	showDesc: boolean;
 	showPrice: boolean;
+	editMode: boolean;
 }
 
 interface FeaturedCategoryRequiredAttributes
@@ -92,7 +94,12 @@ type FeaturedItemProps< T extends EditorBlock< T > > =
 	| ( T & FeaturedProductProps< T > );
 
 export const withFeaturedItem =
-	( { emptyMessage, icon, label }: WithFeaturedItemConfig ) =>
+	( {
+		emptyMessage,
+		icon,
+		label,
+		noSelectionButtonLabel,
+	}: WithFeaturedItemConfig ) =>
 	< T extends EditorBlock< T > >( Component: ComponentType< T > ) =>
 	( props: FeaturedItemProps< T > ) => {
 		const [ isEditingImage ] = props.useEditingImage;
@@ -140,13 +147,29 @@ export const withFeaturedItem =
 			);
 		};
 
+		const renderNoItemButton = () => {
+			return (
+				<>
+					<p>{ emptyMessage }</p>
+					<div style={ { flexBasis: '100%', height: '0' } }></div>
+					<button
+						type="button"
+						className="components-button is-secondary"
+						onClick={ () => setAttributes( { editMode: true } ) }
+					>
+						{ noSelectionButtonLabel }
+					</button>
+				</>
+			);
+		};
+
 		const renderNoItem = () => (
 			<Placeholder
 				className={ className }
 				icon={ <Icon icon={ icon } /> }
 				label={ label }
 			>
-				{ isLoading ? <Spinner /> : emptyMessage }
+				{ isLoading ? <Spinner /> : renderNoItemButton() }
 			</Placeholder>
 		);