57 lines
1.3 KiB
JavaScript
57 lines
1.3 KiB
JavaScript
import { useBlockProps } from "@wordpress/block-editor";
|
|
|
|
export default function save({ attributes }) {
|
|
const {
|
|
hasStickyLegend,
|
|
hasLightbox,
|
|
legendLocation,
|
|
hasFixedHeight,
|
|
hasRoundedShadow,
|
|
showTitle,
|
|
pictureUrl,
|
|
pictureAlt,
|
|
pictureTitle,
|
|
pictureCaption,
|
|
} = attributes;
|
|
|
|
const renderCaption = () => (
|
|
<figcaption>
|
|
{showTitle && pictureTitle && (
|
|
<span className="figcaption-title">{pictureTitle}</span>
|
|
)}{" "}
|
|
{pictureCaption}
|
|
</figcaption>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{pictureUrl && (
|
|
<figure
|
|
{...useBlockProps.save({
|
|
className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${
|
|
hasStickyLegend ? "sticky" : "normal"
|
|
} ${
|
|
hasFixedHeight
|
|
? "homegrade-blocks-labelled-picture--fixed-height"
|
|
: ""
|
|
}
|
|
${
|
|
showTitle && pictureTitle
|
|
? "homegrade-blocks-labelled-picture--legend-has-title"
|
|
: ""
|
|
}
|
|
${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""}
|
|
|
|
${hasLightbox ? "singleLightbox-link" : ""}
|
|
`,
|
|
})}
|
|
>
|
|
{legendLocation === "before" && renderCaption()}
|
|
<img src={pictureUrl} alt={pictureAlt} />
|
|
{legendLocation === "after" && renderCaption()}
|
|
</figure>
|
|
)}
|
|
</>
|
|
);
|
|
}
|