71 lines
1.8 KiB
JavaScript
71 lines
1.8 KiB
JavaScript
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
|
|
|
export default function save({ attributes }) {
|
|
let {
|
|
hasTitle,
|
|
blockTitle,
|
|
blockSubtitle,
|
|
hasStepPictures,
|
|
lateralPicturesFormat,
|
|
hasStepIcons,
|
|
hasLateralCover,
|
|
lateralCoverUrl,
|
|
lateralCoverAlt,
|
|
lateralCoverCaption,
|
|
lateralCoverDescription,
|
|
} = attributes;
|
|
|
|
return (
|
|
<section
|
|
{...useBlockProps.save({
|
|
className: `homegrade-blocks-timeline ${
|
|
hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
|
|
} ${
|
|
hasStepPictures
|
|
? "homegrade-blocks-timeline--has-step-pictures"
|
|
: "homegrade-blocks-timeline--has-no-step-pictures"
|
|
}
|
|
${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`,
|
|
})}
|
|
>
|
|
{hasTitle && (
|
|
<div className="section_titling section_titling--center">
|
|
<RichText.Content
|
|
value={blockTitle}
|
|
tagName="h3"
|
|
className="section_titling__title"
|
|
/>
|
|
<RichText.Content
|
|
value={blockSubtitle}
|
|
tagName="h4"
|
|
className="section_titling__subtitle"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="homegrade-blocks-timeline__container">
|
|
{hasLateralCover && lateralCoverUrl && (
|
|
<figure
|
|
className={`homegrade-blocks-timeline__lateral-cover homegrade-blocks-timeline__lateral-cover--${lateralPicturesFormat}`}
|
|
>
|
|
<img src={lateralCoverUrl} alt={lateralCoverAlt} />
|
|
|
|
{(lateralCoverDescription || lateralCoverCaption) && (
|
|
<figcaption>
|
|
{lateralCoverDescription && (
|
|
<p className="description">{lateralCoverDescription}</p>
|
|
)}
|
|
{lateralCoverCaption && (
|
|
<p className="caption">{lateralCoverCaption}</p>
|
|
)}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
)}
|
|
<div className="homegrade-blocks-timeline__innercontent">
|
|
<InnerBlocks.Content />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|