homegrade_blocks_production/blocks/highlight/src/edit.js

import { __ } from "@wordpress/i18n";
import "./editor.scss";
import keyIcon from "./img/icon_key.svg";
import chainIcon from "./img/icon_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
import warningIcon from "./img/icon_warning.svg";
import acousticIcon from "./img/icon_acoustic.svg";
import documentationIcon from "./img/icon_documentation.svg";
import notificationIcon from "./img/icon_notification.svg";
import searchIcon from "./img/icon_search.svg";
import infoIcon from "./img/icon_info.svg";
import tipIcon from "./img/icon_tip.svg";
import euroIcon from "./img/icon_euro.svg";

import {
	RichText,
	useBlockProps,
	BlockControls,
	InnerBlocks,
	InspectorControls,
	MediaReplaceFlow,
} from "@wordpress/block-editor";

import { trash } from "@wordpress/icons";
import {
	Button,
	ToolbarButton,
	PanelBody,
	ToggleControl,
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	RadioControl,
} from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const {
		title,
		iconName,
		hasTitle,
		hasIcon,
		hasLogo,
		variant,
		logoAlt,
		logoId,
		logoUrl,
		iconPosition,
	} = attributes;

	function getIconPicture() {
		switch (iconName) {
			case "key":
				return keyIcon;

			case "chain":
				return chainIcon;

			case "house":
				return houseIcon;

			case "bulb":
				return bulbIcon;

			case "warning":
				return warningIcon;

			case "acoustic":
				return acousticIcon;

			case "documentation":
				return documentationIcon;

			case "notification":
				return notificationIcon;

			case "search":
				return searchIcon;

			case "info":
				return infoIcon;

			case "tip":
				return tipIcon;

			case "euro":
				return euroIcon;
		}
	}

	function onIconChange(newIconName) {
		setAttributes({ iconName: newIconName });
	}
	function onTitleChange(title) {
		setAttributes({ title });
	}
	function onHasTitleChange() {
		setAttributes({
			hasTitle: !hasTitle,
			title: undefined,
		});
	}
	function onhasIconChange() {
		setAttributes({
			hasIcon: !hasIcon,
		});
	}
	function onVariantChange(variant) {
		setAttributes({ variant });
	}
	function onHasLogoChange() {
		setAttributes({
			hasLogo: !hasLogo,
		});
		if (!hasLogo) {
			removeLogoAttributes();
		}
	}
	function setLogoAttributes(media) {
		setAttributes({
			logoUrl: media.url,
			logoId: media.id,
			logoAlt: media?.alt,
		});
	}
	function removeLogoAttributes() {
		setAttributes({
			logoUrl: null,
			logoId: null,
			logoAlt: null,
		});
	}

	let iconPicture = getIconPicture();

	function handleIconPositionChange(newPosition) {
		setAttributes({ iconPosition: newPosition });
	}
	console.log(iconPosition);
	console.log(hasIcon);

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__("Variantes", "homegrade-blocks__texte-fonctionnel")}
					initialOpen={true}
				>
					<ToggleGroupControl
						className="homegrade-blocks-highlight__variant"
						isBlock
						onChange={onVariantChange}
						value={variant}
					>
						<ToggleGroupControlOption label="Classique" value="classic" />
						<ToggleGroupControlOption label="Warning" value="warning" />
						<ToggleGroupControlOption label="Gris" value="gray" />
					</ToggleGroupControl>
					<ToggleControl
						label="Afficher le titre"
						checked={hasTitle}
						onChange={onHasTitleChange}
					/>
					<ToggleControl
						label="Afficher une Icone"
						checked={hasIcon}
						onChange={onhasIconChange}
					/>

					{hasIcon && (
						<RadioControl
							className="homegrade-blocks-highlight__icon-position"
							label="Position de l'icone"
							onChange={handleIconPositionChange}
							options={[
								{
									label: "Avant le titre",
									value: "top",
									description: "Seulement lorsque le titre est ACTIVÉ",
								},
								{
									label: "Coté",
									value: "side",
									disabled: hasTitle,
									description: "Seulement lorsque le titre est DÉSACTIVÉ",
								},
							]}
							selected={iconPosition}
						/>
					)}
					<ToggleControl
						label="Attacher un logo"
						checked={hasLogo}
						onChange={onHasLogoChange}
					/>
				</PanelBody>
				{hasLogo && (
					<PanelBody
						className="homegrade-blocks-highlight__panel-body"
						title={__("Logo", "homegrade-blocks")}
					>
						{logoUrl && <img src={logoUrl} alt={logoAlt} />}

						<div className="media-replace-container ">
							<MediaReplaceFlow
								mediaId={logoId}
								mediaUrl={logoUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setLogoAttributes}
								name={
									!logoUrl
										? __("Ajouter un Logo", "homegrade-blocks")
										: __("Remplacer", "homegrade-blocks")
								}
							/>
							{logoUrl && (
								<>
									<Button
										className="custom-flow-button"
										variant="primary"
										icon={trash}
										label="Supprimer"
										onClick={removeLogoAttributes}
									/>
								</>
							)}
						</div>
					</PanelBody>
				)}
			</InspectorControls>
			<BlockControls>
				<ToolbarButton
					title={"Clé"}
					icon={"admin-network"}
					isActive={iconName === "key"}
					onClick={() => onIconChange("key")}
				/>
				<ToolbarButton
					title={"Lien"}
					icon={"admin-links"}
					isActive={iconName === "chain"}
					onClick={() => onIconChange("chain")}
				/>
				<ToolbarButton
					title={"Homegrade"}
					icon={"admin-home"}
					isActive={iconName === "house"}
					onClick={() => onIconChange("house")}
				/>
				<ToolbarButton
					title={"Inspiration"}
					icon={"lightbulb"}
					isActive={iconName === "bulb"}
					onClick={() => onIconChange("bulb")}
				/>
				<ToolbarButton
					title={"Attention"}
					icon={"warning"}
					isActive={iconName === "warning"}
					onClick={() => onIconChange("warning")}
				/>
				<ToolbarButton
					title={"Acoustique"}
					icon={"controls-volumeon"}
					isActive={iconName === "acoustic"}
					onClick={() => onIconChange("acoustic")}
				/>
				<ToolbarButton
					title={"Documentation"}
					icon={"book-alt"}
					isActive={iconName === "documentation"}
					onClick={() => onIconChange("documentation")}
				/>
				<ToolbarButton
					title={"Recherche"}
					icon={"search"}
					isActive={iconName === "search"}
					onClick={() => onIconChange("search")}
				/>
				<ToolbarButton
					title={"Notification"}
					icon={"bell"}
					isActive={iconName === "notification"}
					onClick={() => onIconChange("notification")}
				/>
				<ToolbarButton
					title={"Info"}
					icon={"info"}
					isActive={iconName === "info"}
					onClick={() => onIconChange("info")}
				/>
				<ToolbarButton
					title={"Euro"}
					icon={"money-alt"}
					isActive={iconName === "euro"}
					onClick={() => onIconChange("euro")}
				/>
				<ToolbarButton
					title={"Astuce"}
					icon={"thumbs-up"}
					isActive={iconName === "tip"}
					onClick={() => onIconChange("tip")}
				/>
			</BlockControls>
			<section
				{...useBlockProps({
					className: `homegrade-blocks-highlight ${
						variant ? `homegrade-blocks-highlight--${variant}` : ""
					}`,
				})}
			>
				{hasTitle && (
					<div
						className={`homegrade-blocks-highlight__titling ${
							!hasIcon ? "homegrade-blocks-highlight__titling--has-no-icon" : ""
						}`}
					>
						{hasIcon && iconPosition === "top" && (
							<div className="icon">
								<img src={iconPicture} alt="" />
							</div>
						)}
						<RichText
							className="homegrade-blocks-highlight__block-title"
							onChange={onTitleChange}
							value={title}
							placeholder={__(
								"Insérez un titre",
								"homegrade-blocks__texte-fonctionnel"
							)}
							tagName="h3"
							allowedFormats={[]}
						/>
					</div>
				)}
				<div className="homegrade-blocks-highlight__content">
					{hasIcon && iconPosition === "side" && !hasTitle && (
						<div className="icon">
							<img src={iconPicture} alt="" />
						</div>
					)}

					<div className="homegrade-blocks-highlight__content__innerblocks">
						<InnerBlocks
							allowedBlocks={[
								"core/paragraph",
								"core/list",
								"core/buttons",
								"core/button",
								"core/colums",
								"core/colum",
								"homegrade-content-blocks/text-image",
								"homegrade-content-blocks/content-heading",
								"homegrade-content-blocks/staff-member",
							]}
							template={[["core/paragraph"]]}
						/>
					</div>

					{hasLogo && (
						<div className="homegrade-blocks-highlight__logo">
							{!logoUrl && (
								<MediaReplaceFlow
									mediaId={logoId}
									mediaUrl={logoUrl}
									allowedTypes={["image"]}
									accept="image/*"
									onSelect={setLogoAttributes}
									name={
										!logoUrl
											? __("Ajouter Logo", "homegrade-blocks")
											: __("Remplacer", "homegrade-blocks")
									}
								/>
							)}
							{logoUrl && <img src={logoUrl} alt={logoAlt} />}
						</div>
					)}
				</div>
			</section>
		</>
	);
}