Add to Featured Product block option to remove custom image (#5886)

* adds toolbar option to remove custom image

removing custom image will reset it back to the default
product image if available

* update copy as per discussion

went with just Reset as it is commonly used in WordPress
and will have translation available

assets/js/blocks/featured-product/block.js

@@ -31,6 +31,7 @@ import PropTypes from 'prop-types';
 import { getSetting } from '@woocommerce/settings';
 import ProductControl from '@woocommerce/editor-components/product-control';
 import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
+import TextToolbarButton from '@woocommerce/editor-components/text-toolbar-button';
 import { withProduct } from '@woocommerce/block-hocs';
 import { Icon, starEmpty } from '@wordpress/icons';
 
@@ -138,19 +139,29 @@ const FeaturedProduct = ( {
 						setAttributes( { contentAlign: nextAlign } );
 					} }
 				/>
-				<MediaReplaceFlow
-					mediaId={ mediaId }
-					mediaURL={ mediaSrc }
-					accept="image/*"
-					onSelect={ ( media ) => {
-						setAttributes( {
-							mediaId: media.id,
-							mediaSrc: media.url,
-						} );
-					} }
-					allowedTypes={ [ 'image' ] }
-				/>
-
+				<ToolbarGroup>
+					<MediaReplaceFlow
+						mediaId={ mediaId }
+						mediaURL={ mediaSrc }
+						accept="image/*"
+						onSelect={ ( media ) => {
+							setAttributes( {
+								mediaId: media.id,
+								mediaSrc: media.url,
+							} );
+						} }
+						allowedTypes={ [ 'image' ] }
+					/>
+					{ mediaId && mediaSrc ? (
+						<TextToolbarButton
+							onClick={ () =>
+								setAttributes( { mediaId: 0, mediaSrc: '' } )
+							}
+						>
+							{ __( 'Reset', 'woo-gutenberg-products-block' ) }
+						</TextToolbarButton>
+					) : null }
+				</ToolbarGroup>
 				<ToolbarGroup
 					controls={ [
 						{