Add a Remove Image option to the Featured Category block (#5719)

woocommerce · Feb 7, 2022 · cf78ba9 · cf78ba9
1 parent 271f04d
commit cf78ba9
Showing 1 changed file with 24 additions and 12 deletions.
diff --git a/assets/js/blocks/featured-category/block.js b/assets/js/blocks/featured-category/block.js
@@ -32,6 +32,7 @@ import { folderStarred } from '@woocommerce/icons';
 import { Icon } from '@wordpress/icons';
 import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
 import ErrorPlaceholder from '@woocommerce/editor-components/error-placeholder';
+import TextToolbarButton from '@woocommerce/editor-components/text-toolbar-button';
 
 /**
  * Internal dependencies
@@ -90,18 +91,29 @@ const FeaturedCategory = ( {
 						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: '' } )
+							}
+						>
+							{ __( 'Remove', 'woo-gutenberg-products-block' ) }
+						</TextToolbarButton>
+					) : null }
+				</ToolbarGroup>
 				<ToolbarGroup
 					controls={ [
 						{