118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import "./editor.scss";
|
|
|
|
import { useBlockProps, RichText } from "@wordpress/block-editor";
|
|
import { InnerBlocks } from "@wordpress/block-editor";
|
|
import { PanelBody, ToggleControl, Button } from "@wordpress/components";
|
|
import { InspectorControls } from "@wordpress/block-editor";
|
|
|
|
import { trash } from "@wordpress/icons";
|
|
|
|
import { MediaReplaceFlow } from "@wordpress/block-editor";
|
|
|
|
export default function Edit({ attributes, setAttributes, ...props }) {
|
|
let { hasIllustration, illustrationId, illustrationUrl, illustrationAlt } =
|
|
attributes;
|
|
function onHasIllustrationChange() {
|
|
setAttributes({ hasIllustration: !hasIllustration });
|
|
if (!hasIllustration) {
|
|
removeIllustrationAttributes();
|
|
}
|
|
}
|
|
|
|
function setIllustrationAttributes(media) {
|
|
setAttributes({
|
|
illustrationUrl: media.url,
|
|
illustrationId: media.id,
|
|
illustrationAlt: media?.alt,
|
|
});
|
|
}
|
|
function removeIllustrationAttributes() {
|
|
setAttributes({
|
|
illustrationUrl: null,
|
|
illustrationId: null,
|
|
illustrationAlt: null,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<PanelBody
|
|
title="Illustration"
|
|
className="homegrade-blocks-box-monoblock__panel-body"
|
|
>
|
|
<ToggleControl
|
|
help={
|
|
hasIllustration
|
|
? "Afficher une illustration"
|
|
: "Pas d'illustration"
|
|
}
|
|
label="Illustration supérieure"
|
|
checked={hasIllustration}
|
|
onChange={onHasIllustrationChange}
|
|
/>
|
|
{illustrationUrl && (
|
|
<img src={illustrationUrl} alt={illustrationAlt} />
|
|
)}
|
|
{hasIllustration && (
|
|
<div className="media-replace-container ">
|
|
<MediaReplaceFlow
|
|
mediaId={illustrationId}
|
|
mediaUrl={illustrationUrl}
|
|
allowedTypes={["image"]}
|
|
accept="image/*"
|
|
onSelect={setIllustrationAttributes}
|
|
name={
|
|
!illustrationUrl
|
|
? __("Ajouter", "homegrade-blocks")
|
|
: __("Remplacer", "homegrade-blocks")
|
|
}
|
|
/>
|
|
{illustrationUrl && (
|
|
<>
|
|
<Button
|
|
className="custom-flow-button"
|
|
variant="primary"
|
|
icon={trash}
|
|
label="Supprimer"
|
|
onClick={removeIllustrationAttributes}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `box-monoblock card-large-content homegrade-blocks-box-monoblock ${
|
|
hasIllustration
|
|
? "homegrade-blocks-box-monoblock--has-illustration "
|
|
: ""
|
|
}`,
|
|
})}
|
|
>
|
|
{hasIllustration && (
|
|
<img
|
|
className=" homegrade-blocks-box-monoblock__superior-illustration"
|
|
src={illustrationUrl}
|
|
alt={illustrationAlt}
|
|
/>
|
|
)}
|
|
<InnerBlocks
|
|
allowedBlocks={[
|
|
"core/paragraph",
|
|
"core/list",
|
|
"core/button",
|
|
"core/buttons",
|
|
"gravityforms/form",
|
|
"homegrade-content-blocks/section-titling",
|
|
"homegrade-content-blocks/highlight",
|
|
]}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|