homegrade_blocks_production/blocks/content-heading/src/edit.js

import { __ } from "@wordpress/i18n";
import "./editor.scss";

import { createBlock } from "@wordpress/blocks";
import { dispatch, useSelect } from "@wordpress/data";
import {
	useBlockProps,
	RichText,
	InspectorControls,
	BlockControls,
} from "@wordpress/block-editor";
import { cleanString } from "../../utilities";
import {
	ToggleControl,
	PanelBody,
	KeyboardShortcuts,
	ToolbarGroup,
	ToolbarButton,
} from "@wordpress/components";

import {
	headingLevel1,
	headingLevel2,
	headingLevel3,
	headingLevel4,
	headingLevel5,
} from "@wordpress/icons";

import { useEffect } from "@wordpress/element";
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";

export default function Edit({
	attributes,
	setAttributes,
	clientId,
	...blockProps
}) {
	const { title, headingLevel, hasIcon, iconName, idName, anchor } = attributes;
	useEffect(() => {
		if (anchor) {
			setAttributes({ idName: anchor });
		} else if (cleanString && title && headingLevel === "h2") {
			setAttributes({
				idName: "title-" + cleanString(title),
			});
		}
	}, [anchor]);

	const blockIndex = useSelect((select) => {
		const { getBlockIndex } = select("core/block-editor");
		return getBlockIndex(clientId);
	});

	function onChangeTitle(newTitle) {
		setAttributes({ title: newTitle });
	}
	function onChangeHeadingLevel(newHeadingLevel) {
		setAttributes({ headingLevel: newHeadingLevel });
	}
	function handleIconChange(newIconName) {
		setAttributes({ iconName: newIconName });
	}
	function onHasIconChange(hasIconToggleValue) {
		setAttributes({
			hasIcon: hasIconToggleValue,
		});
	}
	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 insertParagraphOnEnter(e) {
		const newBlock = createBlock("core/paragraph", {});
		dispatch("core/block-editor").insertBlocks(newBlock, blockIndex + 1);
	}
	let iconPicture = getIconPicture();
	console.log(iconName);

	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Icone", "homegrade-blocks")} initialOpen={true}>
					<ToggleControl
						label="Afficher un icone"
						checked={hasIcon}
						onChange={onHasIconChange}
					/>
				</PanelBody>
			</InspectorControls>
			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton
						isActive={headingLevel === "h1"}
						icon={headingLevel1}
						onClick={() => {
							onChangeHeadingLevel("h1");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h2"}
						icon={headingLevel2}
						onClick={() => {
							onChangeHeadingLevel("h2");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h3"}
						icon={headingLevel3}
						onClick={() => {
							onChangeHeadingLevel("h3");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h4"}
						icon={headingLevel4}
						onClick={() => {
							onChangeHeadingLevel("h4");
						}}
					/>
					<ToolbarButton
						isActive={headingLevel === "h5"}
						icon={headingLevel5}
						onClick={() => {
							onChangeHeadingLevel("h5");
						}}
					/>
				</ToolbarGroup>
				{hasIcon && (
					<ToolbarGroup>
						<ToolbarButton
							title={"Clé"}
							icon={"admin-network"}
							isActive={iconName === "key"}
							onClick={() => handleIconChange("key")}
						/>
						<ToolbarButton
							title={"Lien"}
							icon={"admin-links"}
							isActive={iconName === "chain"}
							onClick={() => handleIconChange("chain")}
						/>
						<ToolbarButton
							title={"Homegrade"}
							icon={"admin-home"}
							isActive={iconName === "house"}
							onClick={() => handleIconChange("house")}
						/>
						<ToolbarButton
							title={"Inspiration"}
							icon={"lightbulb"}
							isActive={iconName === "bulb"}
							onClick={() => handleIconChange("bulb")}
						/>
						<ToolbarButton
							title={"Attention"}
							icon={"warning"}
							isActive={iconName === "warning"}
							onClick={() => handleIconChange("warning")}
						/>
						<ToolbarButton
							title={"Acoustique"}
							icon={"controls-volumeon"}
							isActive={iconName === "acoustic"}
							onClick={() => handleIconChange("acoustic")}
						/>
						<ToolbarButton
							title={"Documentation"}
							icon={"book-alt"}
							isActive={iconName === "documentation"}
							onClick={() => handleIconChange("documentation")}
						/>
						<ToolbarButton
							title={"Recherche"}
							icon={"search"}
							isActive={iconName === "search"}
							onClick={() => handleIconChange("search")}
						/>
						<ToolbarButton
							title={"Notification"}
							icon={"bell"}
							isActive={iconName === "notification"}
							onClick={() => handleIconChange("notification")}
						/>
						<ToolbarButton
							title={"Info"}
							icon={"info"}
							isActive={iconName === "info"}
							onClick={() => handleIconChange("info")}
						/>
						<ToolbarButton
							title={"Euro"}
							icon={"money-alt"}
							isActive={iconName === "euro"}
							onClick={() => handleIconChange("euro")}
						/>
						<ToolbarButton
							title={"Astuce"}
							icon={"thumbs-up"}
							isActive={iconName === "tip"}
							onClick={() => handleIconChange("tip")}
						/>
					</ToolbarGroup>
				)}
			</BlockControls>

			<KeyboardShortcuts
				shortcuts={{
					enter: (e) => insertParagraphOnEnter(e),
				}}
			>
				{/* {hasIcon && (
					<div className="icon">
						<img src={iconPicture} alt="" />
					</div>
				)} */}
				<RichText
					onChange={onChangeTitle}
					value={title}
					disableLineBreaks
					placeholder={__("Insérez votre titre ici", "homegrade-blocks")}
					allowedFormats={["homegrade-format/tooltip"]}
					tagName={headingLevel}
					{...useBlockProps({
						className: `homegrade-blocks-custom-heading ${
							hasIcon ? "has-icon has-icon--" + iconName : " "
						}`,
					})}
					style={{ backgroundImage: "red" }}
				/>
			</KeyboardShortcuts>
		</>
	);
}