102 lines
2.6 KiB
JavaScript
102 lines
2.6 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,
|
|
imageCaption: image.caption,
|
|
imageDescription: image.description,
|
|
});
|
|
}
|
|
|
|
function removeImageAttributes() {
|
|
setAttributes({
|
|
imageId: null,
|
|
imageAlt: null,
|
|
imageUrl: null,
|
|
imageCaption: null,
|
|
imageDescription: null,
|
|
});
|
|
}
|
|
function onImageProportionChange(imageProportion) {
|
|
setAttributes({ imageProportion });
|
|
}
|
|
return (
|
|
<>
|
|
<PanelBody
|
|
className='homegrade-blocks-components-image__panel-body'
|
|
title={__("Image", "homegrade-blocks")}>
|
|
{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")
|
|
: __("Remplacer", "homegrade-blocks")
|
|
}
|
|
/>
|
|
{imageUrl && (
|
|
<>
|
|
<Button
|
|
className='custom-flow-button'
|
|
variant='primary'
|
|
icon={trash}
|
|
label='Supprimer'
|
|
onClick={removeImageAttributes}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
<Tip>
|
|
Si besoin, Utilisez le champ "Légende"de la médiathèque pour afficher un
|
|
copyright
|
|
</Tip>
|
|
<Tip>
|
|
Si besoin, Utilisez le champ "Description" de la médiathèque pour donner
|
|
afficher une description de votre image
|
|
</Tip>
|
|
{imageUrl && (
|
|
<ToggleGroupControl
|
|
label='Proportion'
|
|
className='homegrade-blocks-components-image__ratio-selector'
|
|
isBlock
|
|
onChange={onImageProportionChange}
|
|
value={imageProportion}>
|
|
<ToggleGroupControlOption
|
|
variant='primary'
|
|
label='Original'
|
|
value='original'
|
|
/>
|
|
<ToggleGroupControlOption
|
|
variant='primary'
|
|
label='Moyen'
|
|
value='medium'
|
|
/>
|
|
<ToggleGroupControlOption
|
|
variant='primary'
|
|
label='Carré'
|
|
value='square'
|
|
/>
|
|
</ToggleGroupControl>
|
|
)}
|
|
</PanelBody>
|
|
</>
|
|
);
|
|
}
|