55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
import {
|
|
useBlockProps,
|
|
MediaPlaceholder,
|
|
RichText,
|
|
BlockControls,
|
|
MediaReplaceFlow,
|
|
} from "@wordpress/block-editor";
|
|
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"
|
|
aria-hidden="true"
|
|
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-schema`,
|
|
})}
|
|
>
|
|
{coverUrl && (
|
|
<figure className={`picture-container`}>
|
|
<img
|
|
src={coverUrl}
|
|
alt={coverAlt}
|
|
className={`wp-image-${coverId}`}
|
|
/>
|
|
{renderedFocusPointBullets}
|
|
</figure>
|
|
)}
|
|
<figcaption>
|
|
<ol>
|
|
<InnerBlocks.Content />
|
|
</ol>
|
|
</figcaption>
|
|
</section>
|
|
);
|
|
}
|