homegrade_blocks_production/blocks/timeline/src/timeline-step/edit.js

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

import {
	useBlockProps,
	RichText,
	InnerBlocks,
	BlockControls,
	InspectorControls,
} from "@wordpress/block-editor";
import {
	PanelBody,
	ToolbarGroup,
	ToolbarButton,
	FormToggle,
	PanelRow,
	Button,
} from "@wordpress/components";
import { useEffect } from "@wordpress/element";
import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
import { trash } from "@wordpress/icons";

export default function Edit({ attributes, setAttributes, ...props }) {
	let {
		timelineStepTitle,
		timelineStepSubtitle,
		timelineStepImageUrl,
		timelineStepImageId,
		timelineStepImageAlt,
		timelineStepIconUrl,
		timelineStepIconId,
		timelineStepIconAlt,
		hasStepPicture,
		hasStepIcon,
	} = attributes;

	function onChangeTimelineStepTitle(timelineStepTitle) {
		setAttributes({ timelineStepTitle });
	}
	function onChangeTimelineDescription(timelineStepSubtitle) {
		setAttributes({ timelineStepSubtitle });
	}
	function setImageAttributes(media) {
		if (!media || !media.url) {
			setAttributes({
				timelineStepImageUrl: null,
				timelineStepImageId: null,
				timelineStepImageAlt: null,
			});
			return;
		}
		setAttributes({
			timelineStepImageUrl: media.url,
			timelineStepImageId: media.id,
			timelineStepImageAlt: media?.alt,
		});
	}

	function removeImageAttributes() {
		setAttributes({
			timelineStepImageUrl: null,
			timelineStepImageId: null,
			timelineStepImageAlt: null,
		});
	}

	function setIconAttributes(media) {
		console.log(media);
		if (!media || !media.url) {
			setAttributes({
				timelineStepIconUrl: null,
				timelineStepIconId: null,
				timelineStepIconAlt: null,
			});
			return;
		}
		setAttributes({
			timelineStepIconUrl: media.url,
			timelineStepIconId: media.id,
			timelineStepIconAlt: media?.alt,
		});
	}

	useEffect(() => {
		if (hasStepPicture === false) {
			setImageAttributes(null);
		}
	}, [hasStepPicture]);
	useEffect(() => {
		if (hasStepIcon === false) {
			setIconAttributes(null);
		}
	}, [hasStepIcon]);

	console.log(trash);

	return (
		<>
			<InspectorControls>
				{hasStepPicture && (
					<PanelBody
						className="homegrade-blocks-timeline-step__panel-body"
						title={__("Image", "homegrade-blocks__texte-backoffice")}
					>
						{timelineStepImageUrl && (
							<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
						)}
						<div className="media-replace-container">
							<MediaReplaceFlow
								mediaId={timelineStepImageId}
								mediaUrl={timelineStepImageUrl}
								allowedTypes={["image"]}
								accept="image/*"
								onSelect={setImageAttributes}
								name={
									!timelineStepImageUrl
										? __("Ajouter", "homegrade-blocks__texte-backoffice")
										: __("Remplacer", "homegrade-blocks__texte-backoffice")
								}
							/>
							<Button
								className="custom-flow-button"
								variant="primary"
								icon={trash}
								label="Supprimer"
							/>
						</div>
					</PanelBody>
				)}
				{hasStepIcon && (
					<PanelBody title={__("Icone", "homegrade-blocks__texte-backoffice")}>
						{timelineStepIconUrl && (
							<img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
						)}
						<MediaReplaceFlow
							mediaId={timelineStepIconId}
							mediaUrl={timelineStepIconUrl}
							allowedTypes={["image"]}
							accept="image/*"
							onSelect={setIconAttributes}
							// name={
							// 	!timelineStepIconUrl
							// 		? __(
							// 				"Ajouter une Image",
							// 				"homegrade-blocks__texte-backoffice"
							// 		  )
							// 		: __("Remplacer Image", "homegrade-blocks__texte-backoffice")
							// }
						/>
					</PanelBody>
				)}
			</InspectorControls>
			<BlockControls>
				<ToolbarGroup>
					<MediaReplaceFlow
						mediaId={timelineStepImageId}
						mediaUrl={timelineStepImageUrl}
						allowedTypes={["image"]}
						accept="image/*"
						onSelect={setImageAttributes}
						name={
							!timelineStepImageUrl
								? __("Ajouter une Image", "homegrade-blocks__texte-backoffice")
								: __("Remplacer Image", "homegrade-blocks__texte-backoffice")
						}
					/>
					<ToolbarButton
						title={"Supprimer Image"}
						icon={trash}
						isActive={timelineStepImageUrl}
						onClick={removeImageAttributes}
					/>
				</ToolbarGroup>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `homegrade-blocks-timeline-step`,
				})}
			>
				{hasStepPicture && (
					<div className="homegrade-blocks-timeline-step__cover">
						{!timelineStepImageUrl && (
							<MediaPlaceholder
								accept="image/*"
								allowedTypes={["image"]}
								onSelect={setImageAttributes}
								multiple={false}
								handleUpload={true}
							/>
						)}

						{timelineStepImageUrl && (
							<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
						)}
					</div>
				)}

				<div className="homegrade-blocks-timeline-step__content">
					<RichText
						tagName="h3"
						className="homegrade-blocks-timeline-step__title"
						placeholder={__(
							"Date ou Titre de l'étape",
							"homegrade-blocks__texte-backoffice"
						)}
						value={timelineStepTitle}
						onChange={onChangeTimelineStepTitle}
					/>
					<RichText
						tagName="h2"
						className="homegrade-blocks-timeline-step__subtitle"
						placeholder={__(
							"Titre / Sous-titre de l'étape",
							"homegrade-blocks__texte-backoffice"
						)}
						value={timelineStepSubtitle}
						onChange={onChangeTimelineDescription}
					/>
					<InnerBlocks allowedBlocks={["core/paragraph"]} />
				</div>
			</div>
		</>
	);
}