homegrade_blocks_production/blocks/page-card/src/edit.js

72 lines
1.7 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import OptionsSelectControl from "./OptionsSelectControl";
import { useSelect } from "@wordpress/data";
import "./editor.scss";
import arrow from "./img/arrow-right-circle.svg";
export default function Edit({ attributes, setAttributes }) {
const { relatedPostId, postType } = attributes;
const page = useSelect((select) =>
select("core").getEntityRecord("postType", postType, relatedPostId)
);
const pageIconUrl = useSelect(
(select) => {
if (postType === "page") {
if (!page?.acf?.page_icon) return null;
return select("core").getMedia(page?.acf?.page_icon)?.source_url;
}
if (postType === "parcours") {
if (!page?.acf?.step_icon) return null;
return select("core").getMedia(page?.acf?.step_icon)?.source_url;
}
},
[page]
);
return (
<>
<OptionsSelectControl
relatedPostId={relatedPostId}
setAttributes={setAttributes}
postType={postType}
/>
<div
{...useBlockProps({
className: `homegrade-blocks-page-card`,
})}
>
{page && (
<>
<img
className="homegrade-blocks-page-card__icon"
src={pageIconUrl}
alt=""
/>
<h3 className="homegrade-blocks-page-card__title">
{page.title.rendered}
</h3>
<p className="homegrade-blocks-page-card__excerpt">
{page.excerpt?.raw}
</p>
<div
class="homegrade-blocks-page-card__cta"
href="<?php echo $relatedPostUrl ?>"
target="_self"
rel="noopener"
>
<p>En savoir plus</p>
<div class="cta_arrow_button">
<img src={arrow} alt="" />
</div>
</div>
</>
)}
</div>
</>
);
}