/* eslint-disable @wordpress/no-unsafe-wp-apis */
/**
* External dependencies
*/
import {
__experimentalImageEditingProvider as ImageEditingProvider,
__experimentalImageEditor as GutenbergImageEditor,
} from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import { BLOCK_NAMES, DEFAULT_EDITOR_SIZE } from './constants';
import { useBackgroundImage } from './use-background-image';
export const ImageEditor = ( {
backgroundImageId,
backgroundImageSize,
backgroundImageSrc,
isEditingImage,
setAttributes,
setIsEditingImage,
} ) => {
return (
<>
{
setAttributes( { mediaId: id, mediaSrc: url } );
} }
isEditing={ isEditingImage }
onFinishEditing={ () => setIsEditingImage( false ) }
>
>
);
};
export const withImageEditor = ( Component ) => ( props ) => {
const [ isEditingImage, setIsEditingImage ] = props.useEditingImage;
const { attributes, backgroundImageSize, name, setAttributes } = props;
const { mediaId, mediaSrc } = attributes;
const item =
name === BLOCK_NAMES.featuredProduct ? props.product : props.category;
const { backgroundImageId, backgroundImageSrc } = useBackgroundImage( {
item,
mediaId,
mediaSrc,
blockName: name,
} );
if ( isEditingImage ) {
return (
);
}
return ;
};