homegrade_blocks_production/blocks/section-titling/src/edit.js

98 lines
2.2 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import "./editor.scss";
import { BlockControls } from "@wordpress/block-editor";
import {
useBlockProps,
RichText,
InnerBlocks,
InspectorControls,
} from "@wordpress/block-editor";
import { Toolbar, ToolbarDropdownMenu } from "@wordpress/components";
import {
more,
positionLeft,
positionCenter,
positionRight,
} from "@wordpress/icons";
import { Tip, PanelBody } from "@wordpress/components";
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 (
<>
<InspectorControls>
<PanelBody>
<Tip>salut</Tip>
</PanelBody>
</InspectorControls>
<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__texte-backoffice"
)}
onChange={onChangeSectionTitle}
/>
<RichText
value={sectionSubtitle}
tagName="p"
className="section_titling__subtitle"
placeholder={__("Ajouter ici le Sous-titre", "homegrade")}
onChange={onChangeSectionSubtitle}
/>
</div>
</>
);
}