70 lines
1.6 KiB
JavaScript
70 lines
1.6 KiB
JavaScript
import {
|
|
useBlockProps,
|
|
MediaPlaceholder,
|
|
RichText,
|
|
BlockControls,
|
|
MediaReplaceFlow,
|
|
} from "@wordpress/block-editor";
|
|
import { __ } from "@wordpress/i18n";
|
|
|
|
import chevronDown from "./img/chevron_down.svg";
|
|
import { Camera } from "lucide-react";
|
|
|
|
import { InnerBlocks } from "@wordpress/block-editor";
|
|
|
|
export default function save({ attributes }) {
|
|
const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
|
|
const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
|
|
return (
|
|
<div
|
|
data-focus-bullet-title={focusBullet.title}
|
|
className="homegrade-blocks-focus-point-bullet "
|
|
style={{
|
|
top: `${focusBullet.y * 100}%`,
|
|
left: `${focusBullet.x * 100}%`,
|
|
}}
|
|
data-postion-x={focusBullet.x * 100}
|
|
data-postion-y={focusBullet.y * 100}
|
|
>
|
|
<span className="homegrade-blocks-focus-point-bullet__index">
|
|
{index + 1}
|
|
</span>
|
|
</div>
|
|
);
|
|
});
|
|
return (
|
|
<section
|
|
{...useBlockProps.save({
|
|
className: `homegrade-blocks-focused-thematique`,
|
|
})}
|
|
>
|
|
{coverUrl && (
|
|
<figure className={`picture-container`}>
|
|
<img
|
|
src={coverUrl}
|
|
alt={coverAlt}
|
|
className={`wp-image-${coverId}`}
|
|
/>
|
|
{renderedFocusPointBullets}
|
|
</figure>
|
|
)}
|
|
<button
|
|
className="homegrade-blocks-focused-thematique__figcaption-toggle"
|
|
aria-expanded="false"
|
|
>
|
|
{__(
|
|
"Version texte des indications de l'illustration",
|
|
"homegrade-blocks__texte-fonctionnel"
|
|
)}
|
|
{/* <ChevronDown /> */}
|
|
<img src={chevronDown} alt="" />
|
|
</button>
|
|
<figcaption aria-hidden="true">
|
|
<ol>
|
|
<InnerBlocks.Content />
|
|
</ol>
|
|
</figcaption>
|
|
</section>
|
|
);
|
|
}
|