66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import { useBlockProps } from "@wordpress/block-editor";
|
|
import { __ } from "@wordpress/i18n";
|
|
|
|
import chevronDown from "./img/chevron_down.svg";
|
|
|
|
import { InnerBlocks } from "@wordpress/block-editor";
|
|
import getAdminLanguageFromCookies from "../../../utils/getAdminLanguageFromCookies.js";
|
|
|
|
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>
|
|
);
|
|
});
|
|
const currentLang = getAdminLanguageFromCookies("wp-wpml_current_language");
|
|
const localVersionTextDescription =
|
|
currentLang === "nl"
|
|
? "Tekstversie van de instructies in de afbeelding"
|
|
: "Version texte des indications de l'illustration";
|
|
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"
|
|
>
|
|
{localVersionTextDescription}
|
|
{/* <ChevronDown /> */}
|
|
<img src={chevronDown} alt="" />
|
|
</button>
|
|
<figcaption aria-hidden="true">
|
|
<ol>
|
|
<InnerBlocks.Content />
|
|
</ol>
|
|
</figcaption>
|
|
</section>
|
|
);
|
|
}
|