115 lines
2.8 KiB
JavaScript
115 lines
2.8 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import "./editor.scss";
|
|
import "../lien-chapitre";
|
|
|
|
import {
|
|
useBlockProps,
|
|
RichText,
|
|
InnerBlocks,
|
|
BlockControls,
|
|
} from "@wordpress/block-editor";
|
|
import { ToolbarGroup, ToolbarButton } from "@wordpress/components";
|
|
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
|
|
import { trash } from "@wordpress/icons";
|
|
export default function Edit({ attributes, setAttributes, ...props }) {
|
|
let { chapterTitle, chapterDescription } = attributes;
|
|
|
|
function onChangeChapterTitle(chapterTitle) {
|
|
setAttributes({ chapterTitle });
|
|
}
|
|
function onChangeChapterDescription(chapterDescription) {
|
|
setAttributes({ chapterDescription });
|
|
}
|
|
|
|
let { chapterImageUrl, chapterImageId, chapterImageAlt } = attributes;
|
|
|
|
function setImageAttributes(media) {
|
|
if (!media || !media.url) {
|
|
setAttributes({
|
|
chapterImageUrl: null,
|
|
chapterImageId: null,
|
|
chapterImageAlt: null,
|
|
});
|
|
return;
|
|
}
|
|
setAttributes({
|
|
chapterImageUrl: media.url,
|
|
chapterImageId: media.id,
|
|
chapterImageAlt: media?.alt,
|
|
});
|
|
}
|
|
|
|
function removeImageAttributes() {
|
|
setAttributes({
|
|
chapterImageUrl: null,
|
|
chapterImageId: null,
|
|
chapterImageAlt: null,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<BlockControls>
|
|
<ToolbarGroup>
|
|
<MediaReplaceFlow
|
|
mediaId={chapterImageId}
|
|
mediaUrl={chapterImageUrl}
|
|
allowedTypes={["image"]}
|
|
accept="image/*"
|
|
onSelect={setImageAttributes}
|
|
name={
|
|
!chapterImageUrl ? __("Ajouter une Image") : __("Remplacer Image")
|
|
}
|
|
/>
|
|
<ToolbarButton
|
|
title={"Supprimer Image"}
|
|
icon={trash}
|
|
isActive={chapterImageUrl}
|
|
onClick={removeImageAttributes}
|
|
/>
|
|
</ToolbarGroup>
|
|
</BlockControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `homegrade-blocks-chapitre-thematique`,
|
|
})}
|
|
>
|
|
<div className="homegrade-blocks-chapitre-thematique__cover">
|
|
{!chapterImageUrl && (
|
|
<MediaPlaceholder
|
|
accept="image/*"
|
|
allowedTypes={["image"]}
|
|
onSelect={setImageAttributes}
|
|
multiple={false}
|
|
handleUpload={true}
|
|
/>
|
|
)}
|
|
|
|
{chapterImageUrl && (
|
|
<img src={chapterImageUrl} alt={chapterImageAlt} />
|
|
)}
|
|
</div>
|
|
<div className="homegrade-blocks-chapitre-thematique__content">
|
|
<RichText
|
|
tagName="h3"
|
|
className="homegrade-blocks-chapitre-thematique__title"
|
|
placeholder={__("Titre du chapitre", "homegrade-blocks")}
|
|
value={chapterTitle}
|
|
onChange={onChangeChapterTitle}
|
|
/>
|
|
<RichText
|
|
tagName="p"
|
|
className="homegrade-blocks-chapitre-thematique__description"
|
|
placeholder={__("Descriptif du chapitre", "homegrade-blocks")}
|
|
value={chapterDescription}
|
|
onChange={onChangeChapterDescription}
|
|
/>
|
|
<InnerBlocks
|
|
allowedBlocks={["homegrade-content-blocks/lien-chapitre"]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|