81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import "./editor.scss";
|
|
import { BlockControls } from "@wordpress/block-editor";
|
|
import { useBlockProps, RichText } from "@wordpress/block-editor";
|
|
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
|
|
import { positionLeft, positionCenter, positionRight } from "@wordpress/icons";
|
|
|
|
export default function Edit({ attributes, setAttributes, clientId }) {
|
|
let { sectionTitle, sectionSubtitle, textAlign } = attributes;
|
|
|
|
function onChangeSectionTitle(sectionTitle) {
|
|
setAttributes({ sectionTitle });
|
|
}
|
|
function onChangeSectionSubtitle(sectionSubtitle) {
|
|
setAttributes({ sectionSubtitle });
|
|
}
|
|
|
|
function onChangeTextAlignment(textAlign) {
|
|
setAttributes({ textAlign });
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<BlockControls>
|
|
<Toolbar label="Options">
|
|
<ToolbarDropdownMenu
|
|
icon={
|
|
textAlign === "left"
|
|
? positionLeft
|
|
: textAlign === "center"
|
|
? positionCenter
|
|
: positionRight
|
|
}
|
|
label="Alignement du titrage"
|
|
controls={[
|
|
{
|
|
title: "Gauche",
|
|
icon: positionLeft,
|
|
onClick: () => onChangeTextAlignment("left"),
|
|
},
|
|
{
|
|
title: "Centré",
|
|
icon: positionCenter,
|
|
onClick: () => onChangeTextAlignment("center"),
|
|
},
|
|
{
|
|
title: "Droite",
|
|
icon: positionRight,
|
|
onClick: () => onChangeTextAlignment("right"),
|
|
},
|
|
]}
|
|
/>
|
|
</Toolbar>
|
|
</BlockControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `section_titling section_titling--${textAlign}`,
|
|
})}
|
|
>
|
|
<RichText
|
|
value={sectionTitle}
|
|
tagName="h3"
|
|
className="section_titling__title"
|
|
placeholder={__(
|
|
"Ajouter ici le Titre de Section",
|
|
"homegrade-blocks"
|
|
)}
|
|
onChange={onChangeSectionTitle}
|
|
/>
|
|
<RichText
|
|
value={sectionSubtitle}
|
|
tagName="p"
|
|
className="section_titling__subtitle"
|
|
placeholder={__("Ajouter ici le Sous-titre", "homegrade-blocks")}
|
|
onChange={onChangeSectionSubtitle}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|