68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
|
import "./editor.scss";
|
|
import {
|
|
PanelBody,
|
|
__experimentalToggleGroupControl as ToggleGroupControl,
|
|
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
|
Button,
|
|
CheckboxControl,
|
|
ColorPalette,
|
|
} from "@wordpress/components";
|
|
import { InspectorControls } from "@wordpress/block-editor";
|
|
|
|
export default function Edit({ attributes, setAttributes, ...props }) {
|
|
const { hierarchy } = attributes;
|
|
|
|
function onHierarchyChange(value) {
|
|
setAttributes({ hierarchy: value });
|
|
}
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<PanelBody title={__("Aspect", "carhop-blocks")}>
|
|
<ToggleGroupControl
|
|
label="Hiérarchie"
|
|
value={hierarchy}
|
|
onChange={onHierarchyChange}
|
|
isBlock
|
|
__nextHasNoMarginBottom
|
|
__next40pxDefaultSize
|
|
>
|
|
<ToggleGroupControlOption value="classic" label="Classique" />
|
|
<ToggleGroupControlOption value="inverted" label="Inversé" />
|
|
</ToggleGroupControl>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `carhop-heading carhop-heading--hierarchy-${hierarchy}`,
|
|
})}
|
|
>
|
|
<div className="carhop-heading__innerblocks">
|
|
<InnerBlocks
|
|
template={[
|
|
[
|
|
"core/heading",
|
|
{ placeholder: "Saisir le titre", content: "Titre" },
|
|
],
|
|
[
|
|
"core/paragraph",
|
|
{
|
|
placeholder: "Saisir le sous-titre supérieur",
|
|
content: "Sous-titre",
|
|
},
|
|
],
|
|
]}
|
|
allowedBlocks={[
|
|
"core/heading",
|
|
"core/paragraph",
|
|
"core/post-title",
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|