64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
|
|
|
export default function save({ attributes }) {
|
|
const {
|
|
timelineStepTitle,
|
|
timelineStepSubtitle,
|
|
timelineStepImageUrl,
|
|
timelineStepImageAlt,
|
|
timelineStepImageCaption,
|
|
timelineStepImageDescription,
|
|
timelineStepIconUrl,
|
|
timelineStepIconAlt,
|
|
hasStepPicture,
|
|
hasStepIcon,
|
|
} = attributes;
|
|
return (
|
|
<div
|
|
{...useBlockProps.save({
|
|
className: `homegrade-blocks-timeline-step`,
|
|
})}
|
|
>
|
|
{hasStepPicture && (
|
|
<figure className="homegrade-blocks-timeline-step__cover">
|
|
{timelineStepImageUrl && (
|
|
<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
|
|
)}
|
|
{(timelineStepImageDescription || timelineStepImageCaption) && (
|
|
<figcaption>
|
|
{timelineStepImageDescription && (
|
|
<p className="description">{timelineStepImageDescription}</p>
|
|
)}
|
|
{timelineStepImageCaption && (
|
|
<p className="caption">{timelineStepImageCaption}</p>
|
|
)}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
)}
|
|
<div className={`homegrade-blocks-timeline-step__content`}>
|
|
{hasStepIcon && (
|
|
<div className="homegrade-blocks-timeline-step__icon">
|
|
{timelineStepIconUrl && (
|
|
<img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
|
|
)}
|
|
</div>
|
|
)}
|
|
<div className="homegrade-blocks-timeline-step__text-content">
|
|
<RichText.Content
|
|
tagName="h3"
|
|
className="homegrade-blocks-timeline-step__title"
|
|
value={timelineStepTitle}
|
|
/>
|
|
<RichText.Content
|
|
tagName="p"
|
|
className="homegrade-blocks-timeline-step__subtitle"
|
|
value={timelineStepSubtitle}
|
|
/>
|
|
<InnerBlocks.Content />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|