108 lines
2.5 KiB
JavaScript
108 lines
2.5 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";
|
|
import { ReactComponent as AnchorIcon } from "./img/carhop-fleche-ancre-page.svg";
|
|
|
|
export default function Edit({ attributes, setAttributes }) {
|
|
const { color, link } = attributes;
|
|
const colors = useSetting("color.palette.theme");
|
|
const isHashLink = typeof link?.url === "string" && link.url.startsWith("#");
|
|
|
|
function handleColorChange(value) {
|
|
setAttributes({ color: value });
|
|
}
|
|
|
|
console.log(attributes);
|
|
console.log(link);
|
|
|
|
function handleLinkChange(newLink) {
|
|
if (!newLink) {
|
|
setAttributes({ link: undefined });
|
|
return;
|
|
}
|
|
|
|
if (newLink.url) {
|
|
newLink.title = newLink.url;
|
|
}
|
|
|
|
console.log(newLink);
|
|
setAttributes({ link: newLink });
|
|
}
|
|
return (
|
|
<>
|
|
<BlockControls>
|
|
<AlignmentToolbar
|
|
value={attributes.align}
|
|
onChange={(value) => setAttributes({ align: value })}
|
|
/>
|
|
</BlockControls>
|
|
<InspectorControls>
|
|
<PanelBody title="Lien" initialOpen={true}>
|
|
<div>
|
|
<LinkControl
|
|
key="link-control"
|
|
value={attributes.link}
|
|
label="Lien"
|
|
onSelect={(value) => {
|
|
console.log("onSelect");
|
|
console.log(value);
|
|
}}
|
|
onChange={(newlink) => {
|
|
handleLinkChange(newlink);
|
|
}}
|
|
/>
|
|
</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}${
|
|
isHashLink ? " cta--hash-link" : ""
|
|
}`,
|
|
style: {
|
|
"--cta-current-color": color,
|
|
},
|
|
})}
|
|
>
|
|
<RichText
|
|
tagName="a"
|
|
placeholder="Ajouter un lien"
|
|
value={attributes.text}
|
|
onChange={(text) => setAttributes({ text })}
|
|
allowedFormats={[]}
|
|
/>
|
|
|
|
{isHashLink ? (
|
|
<AnchorIcon style={{ color }} />
|
|
) : (
|
|
<ArrowIcon style={{ color }} />
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|