74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import "./editor.scss";
|
|
|
|
import {
|
|
useBlockProps,
|
|
InnerBlocks,
|
|
BlockControls,
|
|
} from "@wordpress/block-editor";
|
|
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
|
|
import {
|
|
more,
|
|
positionLeft,
|
|
positionCenter,
|
|
positionRight,
|
|
} from "@wordpress/icons";
|
|
|
|
export default function Edit({ attributes, setAttributes, ...props }) {
|
|
const { contentAlign } = attributes;
|
|
function onChangeContentAlignment(contentAlign) {
|
|
setAttributes({ contentAlign });
|
|
}
|
|
return (
|
|
<>
|
|
<BlockControls>
|
|
<Toolbar label="Options">
|
|
<ToolbarDropdownMenu
|
|
icon={
|
|
contentAlign === "left"
|
|
? positionLeft
|
|
: contentAlign === "center"
|
|
? positionCenter
|
|
: positionRight
|
|
}
|
|
label="Alignement du titrage"
|
|
controls={[
|
|
{
|
|
title: "Gauche",
|
|
icon: positionLeft,
|
|
onClick: () => onChangeContentAlignment("left"),
|
|
},
|
|
{
|
|
title: "Centré",
|
|
icon: positionCenter,
|
|
onClick: () => onChangeContentAlignment("center"),
|
|
},
|
|
{
|
|
title: "Droite",
|
|
icon: positionRight,
|
|
onClick: () => onChangeContentAlignment("right"),
|
|
},
|
|
]}
|
|
/>
|
|
</Toolbar>
|
|
</BlockControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `homegrade-blocks-card homegrade-blocks-card--align-${contentAlign}`,
|
|
})}
|
|
>
|
|
<InnerBlocks
|
|
allowedBlocks={[
|
|
"core/paragraph",
|
|
"homegrade-content-blocks/content-heading",
|
|
"homegrade-content-blocks/figure",
|
|
"core/image",
|
|
"core/button",
|
|
"core/buttons",
|
|
]}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|