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:
parent
94d8d580a2
commit
a713e56c7a
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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={ [
|
||||
{
|
||||
|
|
Loading…
Reference in New Issue