123 lines
3.1 KiB
JavaScript
123 lines
3.1 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import {
|
|
useBlockProps,
|
|
InnerBlocks,
|
|
useSetting,
|
|
InspectorControls,
|
|
MediaReplaceFlow,
|
|
MediaPlaceholder,
|
|
} from "@wordpress/block-editor";
|
|
import "./editor.scss";
|
|
import { isColorLight } from "../../_utilities/utilities";
|
|
|
|
import {
|
|
PanelBody,
|
|
__experimentalToggleGroupControl as ToggleGroupControl,
|
|
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
|
|
Button,
|
|
CheckboxControl,
|
|
ColorPalette,
|
|
} from "@wordpress/components";
|
|
|
|
export default function Edit({ attributes, setAttributes, ...props }) {
|
|
const colors = useSetting("color.palette.theme");
|
|
const { hasBackgroundColor, backgroundColor, textColor, hasLightBackground } =
|
|
attributes;
|
|
|
|
function onBackgroundColorChange(value) {
|
|
if (value === undefined) {
|
|
setAttributes({ hasBackgroundColor: false });
|
|
setAttributes({ backgroundColor: "transparent" });
|
|
}
|
|
const isLightBackgroundColor = isColorLight(backgroundColor);
|
|
setAttributes({ hasLightBackground: isLightBackgroundColor });
|
|
|
|
setAttributes({ backgroundColor: value });
|
|
}
|
|
function onHasBackgroundColorChange(value) {
|
|
setAttributes({ hasBackgroundColor: value });
|
|
if (!value) {
|
|
setAttributes({ backgroundColor: null });
|
|
}
|
|
}
|
|
function onTextColorChange(value) {
|
|
setAttributes({ textColor: value });
|
|
}
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<PanelBody
|
|
className="deligraph-blocks-components-image__panel-body"
|
|
title={__("Arrière plan", "deligraph-blocks")}
|
|
>
|
|
<CheckboxControl
|
|
label="Arrière plan coloré"
|
|
checked={hasBackgroundColor}
|
|
onChange={onHasBackgroundColorChange}
|
|
/>
|
|
{hasBackgroundColor && (
|
|
<>
|
|
<ColorPalette
|
|
colors={colors}
|
|
value={backgroundColor}
|
|
onChange={onBackgroundColorChange}
|
|
/>
|
|
</>
|
|
)}
|
|
</PanelBody>
|
|
<PanelBody
|
|
className="deligraph-blocks-components-image__panel-body"
|
|
title={__("Couleur du texte", "deligraph-blocks")}
|
|
>
|
|
{hasBackgroundColor && (
|
|
<>
|
|
<ColorPalette
|
|
colors={colors}
|
|
value={textColor}
|
|
onChange={onTextColorChange}
|
|
/>
|
|
</>
|
|
)}
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<section
|
|
{...useBlockProps({
|
|
className: `content-box ${
|
|
hasLightBackground
|
|
? "content-box--bg-light"
|
|
: "content-box--bg-dark"
|
|
}`,
|
|
style: {
|
|
"--content-box-text-color": textColor ?? "inherit",
|
|
"--content-box-background-color": hasBackgroundColor
|
|
? backgroundColor
|
|
: "transparent",
|
|
},
|
|
})}
|
|
>
|
|
<div className="content-box__innerblocks">
|
|
<InnerBlocks
|
|
template={[
|
|
["core/paragraph", { placeholder: "Ajouter ici le texte" }],
|
|
]}
|
|
allowedBlocks={[
|
|
"core/heading",
|
|
"core/paragraph",
|
|
"core/group",
|
|
"core/list",
|
|
"core/button",
|
|
"core/buttons",
|
|
"carhop-blocks/heading",
|
|
"carhop-blocks/decorative-shapes",
|
|
"acf/statistics-datas",
|
|
"carhop-blocks/scroll-story-block",
|
|
"carhop-blocks/cta-group",
|
|
"ninja-forms/form",
|
|
]}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|