homegrade_blocks_production/blocks/chapitrage-thematique/src/lien-chapitre/edit.js

78 lines
2.1 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { useBlockProps, RichText } from "@wordpress/block-editor";
import arrow from "../img/arrow-right-circle.svg";
import "./editor.scss";
import OptionsSelectControl from "./OptionsSelectControl";
export default function Edit({ attributes, setAttributes, ...props }) {
let {
chapterLinkTitle,
chapterLinkDescription,
chapterLinkRelatedPostId,
chapterLinkRelatedPostUrl,
} = attributes;
let currentRelatedPostConseil = useSelect((select) =>
select("core").getEntityRecord(
"postType",
"conseils",
chapterLinkRelatedPostId
)
);
if (
currentRelatedPostConseil &&
currentRelatedPostConseil.link !== chapterLinkRelatedPostUrl
) {
console.log(chapterLinkRelatedPostUrl);
console.log(currentRelatedPostConseil.link);
setAttributes({
chapterLinkRelatedPostUrl: currentRelatedPostConseil.link,
});
}
function onChangeChapterLinkTitle(chapterLinkTitle) {
setAttributes({ chapterLinkTitle });
}
function onChangeChapterLinkDescription(chapterLinkDescription) {
setAttributes({ chapterLinkDescription });
}
return (
<>
<OptionsSelectControl
chapterLinkRelatedPostId={chapterLinkRelatedPostId}
setAttributes={setAttributes}
/>
<div
{...useBlockProps({
className: `homegrade-blocks-lien-chapitre`,
})}
>
<RichText
tagName="h4"
className="homegrade-blocks-lien-chapitre__title"
placeholder={__("Titre du chapitre", "homegrade-blocks")}
value={chapterLinkTitle}
onChange={onChangeChapterLinkTitle}
/>
<RichText
tagName="p"
className="homegrade-blocks-lien-chapitre__description"
placeholder={__("Descriptif du chapitre", "homegrade-blocks")}
value={chapterLinkDescription}
onChange={onChangeChapterLinkDescription}
/>
{chapterLinkRelatedPostUrl && (
<a className="homegrade-blocks-lien-chapitre__cta" href={chapterLinkRelatedPostUrl}>
{__("En savoir plus", "homegrade-blocks")}
<div class="cta_arrow_button">
<img src={arrow} alt="" />
</div>
</a>
)}
</div>
</>
);
}