homegrade_blocks_production/blocks/partner-logo/src/edit.js

111 lines
2.8 KiB
JavaScript

import { __ } from "@wordpress/i18n";
import "./editor.scss";
import ImageMediaPlaceholder from "../../_components/ImageMediaPlaceholder";
import Image from "../../_components/Image";
import ImagePanelBody from "../../_components/ImagePanelBody";
import {
InspectorControls,
useBlockProps,
MediaPlaceholder,
MediaReplaceFlow,
__experimentalLinkControl as LinkControl,
} from "@wordpress/block-editor";
import { PanelBody, Button, TextControl, Tip } from "@wordpress/components";
import { trash, wordpress } from "@wordpress/icons";
export default function Edit({ attributes, setAttributes }) {
let { partnerLogoUrl, partnerLogoAlt, partnerLogoId, partnerWebsite } =
attributes;
function setPartnerLogoAttributes(logo) {
setAttributes({
partnerLogoId: logo.id,
partnerLogoAlt: logo.alt,
partnerLogoUrl: logo.url,
});
}
function removePartnerLogoAttributes() {
setAttributes({
partnerLogoId: null,
partnerLogoAlt: null,
partnerLogoUrl: null,
});
}
function onChangepartnerWebsite(partnerWebsite) {
setAttributes({ partnerWebsite });
}
return (
<>
<InspectorControls>
<PanelBody
className="homegrade-blocks-components-image__panel-body homegrade-blocks__panel-body homegrade-blocks-components-icon__panel-body"
title={__("Partenaire", "homegrade-blocks")}
>
{partnerLogoUrl && (
<img
className="partner-preview"
src={partnerLogoUrl}
alt={partnerLogoAlt}
/>
)}
<div className="media-replace-container">
<MediaReplaceFlow
label={__("Source", "homegrade-blocks")}
mediaId={partnerLogoId}
mediaUrl={partnerLogoUrl}
allowedTypes={["image"]}
accept="image/*"
onSelect={setPartnerLogoAttributes}
name={
!partnerLogoUrl
? __("Ajouter", "homegrade-blocks")
: __("Remplacer", "homegrade-blocks")
}
/>
{partnerLogoUrl && (
<>
<Button
className="custom-flow-button"
variant="primary"
icon={trash}
label="Supprimer"
onClick={removePartnerLogoAttributes}
/>
</>
)}
</div>
<TextControl
title="websiteLink"
onChange={onChangepartnerWebsite}
value={partnerWebsite}
placeholder="http://www.exemple.com"
/>
<Tip>Insérez l'adresse complète http://</Tip>
</PanelBody>
</InspectorControls>
{!partnerLogoUrl && (
<MediaPlaceholder
accept="image/*"
allowedTypes={["image"]}
onSelect={setPartnerLogoAttributes}
multiple={false}
handleUpload={true}
/>
)}
<div
{...useBlockProps({
className: `homegrade-blocks-partner-logo`,
})}
>
{partnerLogoUrl && (
<img
className="homegrade-blocks-partner-logo__logo"
src={partnerLogoUrl}
alt={partnerLogoAlt}
/>
)}
</div>
</>
);
}