Add to Featured Product block option to remove custom image (https://github.com/woocommerce/woocommerce-blocks/pull/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
This commit is contained in:
Tomasz Tunik 2022-02-23 08:16:47 +01:00 committed by GitHub
parent 4f5ec713df
commit 1805d29cc9
1 changed files with 24 additions and 13 deletions

View File

@ -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={ [
{