79 lines
1.7 KiB
JavaScript
79 lines
1.7 KiB
JavaScript
import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
|
|
import { __ } from "@wordpress/i18n";
|
|
import { useSelect, useDispatch } from "@wordpress/data"; // pour les querry
|
|
import keyIcon from "./img/icon_feather_key.svg";
|
|
import chainIcon from "./img/icon_block_chain.svg";
|
|
import houseIcon from "./img/icon_house.svg";
|
|
import bulbIcon from "./img/icon_bulb.svg";
|
|
|
|
export default function save({ attributes }) {
|
|
const {
|
|
title,
|
|
iconName,
|
|
hasTitle,
|
|
hasTitleIcon,
|
|
variant,
|
|
hasLogo,
|
|
logoAlt,
|
|
logoUrl,
|
|
} = attributes;
|
|
function getIconPicture() {
|
|
switch (iconName) {
|
|
case "key":
|
|
return keyIcon;
|
|
|
|
case "chain":
|
|
return chainIcon;
|
|
|
|
case "house":
|
|
return houseIcon;
|
|
|
|
case "bulb":
|
|
return bulbIcon;
|
|
}
|
|
}
|
|
let iconPicture = getIconPicture();
|
|
|
|
return (
|
|
<section
|
|
{...useBlockProps.save({
|
|
className: `homegrade-blocks-highlight ${
|
|
variant ? `homegrade-blocks-highlight--${variant}` : ""
|
|
}`,
|
|
})}
|
|
>
|
|
{hasTitle && (
|
|
<div
|
|
className={`homegrade-blocks-highlight__titling ${
|
|
!hasTitleIcon
|
|
? "homegrade-blocks-highlight__titling--has-no-icon"
|
|
: ""
|
|
}`}
|
|
>
|
|
{hasTitleIcon && (
|
|
<div className="icon">
|
|
<img clas src={iconPicture} alt="" />
|
|
</div>
|
|
)}
|
|
|
|
<RichText.Content
|
|
tagName="h3"
|
|
value={title}
|
|
className="homegrade-blocks-highlight__block-title"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="homegrade-blocks-highlight__content">
|
|
<div className="homegrade-blocks-highlight__content__innerblocks">
|
|
<InnerBlocks.Content />
|
|
</div>
|
|
{hasLogo && logoUrl && (
|
|
<div className="homegrade-blocks-highlight__logo">
|
|
<img src={logoUrl} alt={logoAlt} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|