60 lines
1.4 KiB
JavaScript
60 lines
1.4 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import {
|
|
PanelBody,
|
|
Button,
|
|
Tip,
|
|
__experimentalToggleGroupControl as ToggleGroupControl,
|
|
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
|
} from "@wordpress/components";
|
|
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
|
|
import { trash } from "@wordpress/icons";
|
|
|
|
export default function ImagePanelBody({ imageUrl, imageAlt, imageId, imageProportion, setAttributes }) {
|
|
function setImageAttributes(image) {
|
|
setAttributes({
|
|
imageId: image.id,
|
|
imageAlt: image.alt,
|
|
imageUrl: image.url,
|
|
});
|
|
}
|
|
|
|
function removeImageAttributes() {
|
|
setAttributes({
|
|
imageId: null,
|
|
imageAlt: null,
|
|
imageUrl: null,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{imageUrl && <img src={imageUrl} alt={imageAlt} />}
|
|
<div className='media-replace-container'>
|
|
<MediaReplaceFlow
|
|
mediaId={imageId}
|
|
mediaUrl={imageUrl}
|
|
allowedTypes={["image"]}
|
|
accept='image/*'
|
|
onSelect={setImageAttributes}
|
|
name={
|
|
!imageUrl
|
|
? __("Ajouter", "homegrade-blocks__texte-backoffice")
|
|
: __("Remplacer", "homegrade-blocks__texte-backoffice")
|
|
}
|
|
/>
|
|
{imageUrl && (
|
|
<>
|
|
<Button
|
|
className='custom-flow-button'
|
|
variant='primary'
|
|
icon={trash}
|
|
label='Supprimer'
|
|
onClick={removeImageAttributes}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|