use ReplaceMediaFlow in featured category and feature product (https://github.com/woocommerce/woocommerce-blocks/pull/3579)

* use ReplaceMediaFlow in featured category

* use ReplaceMediaFlow in featured product

* remove redudant prop
This commit is contained in:
Seghir Nadir 2020-12-21 17:09:10 +01:00 committed by GitHub
parent 94d8d580a2
commit a713e56c7a
2 changed files with 30 additions and 54 deletions

View File

@ -7,8 +7,7 @@ import {
BlockControls,
InnerBlocks,
InspectorControls,
MediaUpload,
MediaUploadCheck,
MediaReplaceFlow,
PanelColorSettings,
withColors,
RichText,
@ -22,7 +21,6 @@ import {
ResizableBox,
Spinner,
ToggleControl,
ToolbarGroup,
withSpokenMessages,
} from '@wordpress/components';
import classnames from 'classnames';
@ -81,7 +79,7 @@ const FeaturedCategory = ( {
);
const getBlockControls = () => {
const { contentAlign } = attributes;
const { contentAlign, mediaSrc } = attributes;
const mediaId = attributes.mediaId || getCategoryImageId( category );
return (
@ -92,29 +90,18 @@ const FeaturedCategory = ( {
setAttributes( { contentAlign: nextAlign } );
} }
/>
<MediaUploadCheck>
<ToolbarGroup>
<MediaUpload
onSelect={ ( media ) => {
setAttributes( {
mediaId: media.id,
mediaSrc: media.url,
} );
} }
allowedTypes={ [ 'image' ] }
value={ mediaId }
render={ ( { open } ) => (
<Button
className="components-toolbar__control"
label={ __( 'Edit media' ) }
icon="format-image"
onClick={ open }
disabled={ ! category }
/>
) }
/>
</ToolbarGroup>
</MediaUploadCheck>
<MediaReplaceFlow
mediaId={ mediaId }
mediaURL={ mediaSrc }
accept="image/*"
onSelect={ ( media ) => {
setAttributes( {
mediaId: media.id,
mediaSrc: media.url,
} );
} }
allowedTypes={ [ 'image' ] }
/>
</BlockControls>
);
};

View File

@ -7,8 +7,7 @@ import {
BlockControls,
InnerBlocks,
InspectorControls,
MediaUpload,
MediaUploadCheck,
MediaReplaceFlow,
PanelColorSettings,
withColors,
RichText,
@ -60,7 +59,7 @@ import {
* @param {Object} props.product Product object.
* @param {function(any):any} props.setAttributes Setter for attributes.
* @param {function(any):any} props.setOverlayColor Setter for overlay color.
* @param {function(any):any} props.triggerUrlUpdate Function for triggering a url update for product.
* @param {function():any} props.triggerUrlUpdate Function for triggering a url update for product.
*/
const FeaturedProduct = ( {
attributes,
@ -134,7 +133,7 @@ const FeaturedProduct = ( {
};
const getBlockControls = () => {
const { contentAlign, editMode } = attributes;
const { contentAlign, editMode, mediaSrc } = attributes;
const mediaId = attributes.mediaId || getImageIdFromProduct( product );
return (
@ -145,29 +144,19 @@ const FeaturedProduct = ( {
setAttributes( { contentAlign: nextAlign } );
} }
/>
<MediaUploadCheck>
<ToolbarGroup>
<MediaUpload
onSelect={ ( media ) => {
setAttributes( {
mediaId: media.id,
mediaSrc: media.url,
} );
} }
allowedTypes={ [ 'image' ] }
value={ mediaId }
render={ ( { open } ) => (
<Button
className="components-toolbar__control"
label={ __( 'Edit media' ) }
icon="format-image"
onClick={ open }
disabled={ ! product }
/>
) }
/>
</ToolbarGroup>
</MediaUploadCheck>
<MediaReplaceFlow
mediaId={ mediaId }
mediaURL={ mediaSrc }
accept="image/*"
onSelect={ ( media ) => {
setAttributes( {
mediaId: media.id,
mediaSrc: media.url,
} );
} }
allowedTypes={ [ 'image' ] }
/>
<ToolbarGroup
controls={ [
{