78 lines
1.9 KiB
JavaScript
78 lines
1.9 KiB
JavaScript
import { __ } from "@wordpress/i18n";
|
|
import {
|
|
useBlockProps,
|
|
RichText,
|
|
InspectorControls,
|
|
__experimentalLinkControl as LinkControl,
|
|
useSetting,
|
|
} from "@wordpress/block-editor";
|
|
import { PanelBody } from "@wordpress/components";
|
|
import "./editor.scss";
|
|
import { BlockControls, AlignmentToolbar } from "@wordpress/block-editor";
|
|
import { ColorPalette, PanelRow } from "@wordpress/components";
|
|
import { Tip } from "@wordpress/components";
|
|
import { ReactComponent as ArrowIcon } from "../img/carhop-fleche-lien-externe-full.svg";
|
|
|
|
export default function Edit({ attributes, setAttributes }) {
|
|
const { color } = attributes;
|
|
const colors = useSetting("color.palette.theme");
|
|
|
|
function handleColorChange(value) {
|
|
setAttributes({ color: value });
|
|
}
|
|
return (
|
|
<>
|
|
<BlockControls>
|
|
<AlignmentToolbar
|
|
value={attributes.align}
|
|
onChange={(value) => setAttributes({ align: value })}
|
|
/>
|
|
</BlockControls>
|
|
<InspectorControls>
|
|
<PanelBody title="Lien" initialOpen={true}>
|
|
<div>
|
|
<LinkControl
|
|
value={attributes.link}
|
|
onChange={(value) => {
|
|
setAttributes({ link: value });
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<PanelBody title="Couleur" initialOpen={true}>
|
|
<PanelRow>
|
|
<ColorPalette
|
|
value={color}
|
|
onChange={(value) => {
|
|
handleColorChange(value);
|
|
}}
|
|
colors={colors}
|
|
disableCustomColors={true}
|
|
/>
|
|
</PanelRow>
|
|
</PanelBody>
|
|
</PanelBody>
|
|
</InspectorControls>
|
|
<div
|
|
{...useBlockProps({
|
|
className: `cta align--${attributes.align}`,
|
|
style: {
|
|
"--cta-current-color": color,
|
|
},
|
|
})}
|
|
>
|
|
<RichText
|
|
tagName="a"
|
|
placeholder="Ajouter un lien"
|
|
value={attributes.text}
|
|
onChange={(text) => setAttributes({ text })}
|
|
allowedFormats={[]}
|
|
/>
|
|
<div className="icon">
|
|
<ArrowIcon style={{ "--cta-current-color": color }} />
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|