66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
|
export default function save({ attributes }) {
|
|
const {
|
|
hasLightBackground,
|
|
disposition,
|
|
coverUrl,
|
|
coverAlt,
|
|
coverSize,
|
|
coverType,
|
|
backgroundColor,
|
|
hasBackgroundColor,
|
|
backgroundOrientation,
|
|
blockWidth,
|
|
textColor,
|
|
} = attributes;
|
|
|
|
return (
|
|
<section
|
|
{...useBlockProps.save({
|
|
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}
|
|
${
|
|
blockWidth === "full"
|
|
? "chapter-section--width-full"
|
|
: "chapter-section--width-contained"
|
|
}
|
|
${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
|
|
${
|
|
hasBackgroundColor && backgroundColor
|
|
? "chapter-section--has-background"
|
|
: ""
|
|
}`,
|
|
style: {
|
|
"--chapter-section-text-color": textColor ? textColor : "#136f63",
|
|
},
|
|
})}
|
|
>
|
|
{hasBackgroundColor && backgroundColor && (
|
|
<svg
|
|
className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
|
|
width="1302"
|
|
height="654"
|
|
viewBox="0 0 1302 654"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path
|
|
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
|
|
fill={backgroundColor}
|
|
/>
|
|
</svg>
|
|
)}
|
|
<div className="chapter-section__content">
|
|
<div className="chapter-section__innerblocks">
|
|
<InnerBlocks.Content />
|
|
</div>
|
|
</div>
|
|
{coverUrl && (
|
|
<img
|
|
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
|
|
src={coverUrl}
|
|
alt={coverAlt}
|
|
/>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|