49 lines
1.1 KiB
JavaScript
49 lines
1.1 KiB
JavaScript
import { useBlockProps } from '@wordpress/block-editor';
|
|
import { InnerBlocks } from '@wordpress/block-editor';
|
|
|
|
export default function save({ attributes }) {
|
|
const { coverUrl, coverId, coverAlt, focusBullets } =
|
|
attributes;
|
|
const renderedFocusObjects = focusBullets.map(
|
|
(focusBullet, index) => {
|
|
return (
|
|
<div
|
|
data-focus-bullet-title={focusBullet.title}
|
|
className="lhoist-blocks-focus-object"
|
|
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="lhoist-blocks-focus-object__index">
|
|
{index + 1}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
return (
|
|
<section
|
|
{...useBlockProps.save({
|
|
className: `lhoist-blocks-search-and-find`,
|
|
})}
|
|
>
|
|
{coverUrl && (
|
|
<>
|
|
<div className="lhoist-blocks-search-and-find__objects-container">
|
|
<img
|
|
className="lhoist-blocks-search-and-find__background_picture"
|
|
src={coverUrl}
|
|
alt={coverAlt}
|
|
/>
|
|
<InnerBlocks.Content />
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|