lhoist-stay-safe__backend-theme/blocks/search-and-find/src/edit.js

import './editor.scss';
import './focus-object';

import { __ } from '@wordpress/i18n';
import {
	useSelect,
	dispatch,
	select,
} from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';

import {
	useBlockProps,
	MediaPlaceholder,
	BlockControls,
	MediaReplaceFlow,
	InspectorControls,
} from '@wordpress/block-editor';
import {
	ToolbarButton,
	Spinner,
	withNotices,
	Button,
	PanelBody,
} from '@wordpress/components';
import { InnerBlocks } from '@wordpress/block-editor';

import { isBlobURL, revokeBlobURL } from '@wordpress/blob';

function Edit({
	attributes,
	setAttributes,
	noticeOperations,
	noticeList,
	noticeUI,
	clientId,
	...props
}) {
	const { coverUrl, coverId, coverAlt, focusBullets } =
		attributes;
	const [blobUrl, setBlobUrl] = useState();
	const currentBlockDatas = useSelect((select) => {
		return select('core/block-editor').getBlocksByClientId(
			clientId
		)[0];
	});

	let children = useSelect(
		(select) =>
			select('core/block-editor').getBlocksByClientId(
				clientId
			)[0].innerBlocks
	);

	function onUploadError(message) {
		noticeOperations.removeAllNotices(); // Remove all previous notices
		noticeOperations.createErrorNotice(message);
	}

	function removeCoverImg() {
		setAttributes({
			coverUrl: undefined,
			coverId: undefined,
			coverAlt: '',
		});
	}

	function updateImage(image) {
		if (!image || !image.url) {
			setAttributes({
				coverUrl: undefined,
				coverId: undefined,
				coverAlt: '',
			});
			return;
		}
		setAttributes({
			coverUrl: image.url,
			coverId: image.id,
			coverAlt: image.alt,
		});
	}

	function passCoverUrlToChildren() {
		if (children && coverUrl) {
			children.forEach(function (child) {
				dispatch('core/block-editor').updateBlockAttributes(
					child.clientId,
					{
						coverUrl: coverUrl,
					}
				);
			});
		}
	}

	function passIndexToChildren() {
		if (children) {
			children.forEach((child, index) => {
				dispatch('core/block-editor').updateBlockAttributes(
					child.clientId,
					{
						focusIndex: index + 1,
					}
				);
			});
		}
	}

	function updateFocusPointBullets() {
		if (children) {
			const focusBullets = children.map((child, index) => {
				return {
					title: child.attributes.focusTitle,
					x: child.attributes.objectPosition.x,
					y: child.attributes.objectPosition.y,
				};
			});

			setAttributes({ focusBullets });
		}
	}

	function insertFocusObjectBlock() {
		const index =
			children && children.length ? children.length : 0;
		const newBlock = createBlock(
			'lhoist-content-blocks/focus-object',
			{
				behaviourType: 'safe',
				objectScale: 10,
				objectPosition: { x: 0.22, y: 0.82 },
				objectPictureUrl: null,
				objectPictureAlt: "Texte alternatif de l'image",
				objectBehaviourDescription:
					"Description du comportement de l'objet",
			}
		);
		dispatch('core/block-editor').insertBlocks(
			newBlock,
			index,
			clientId
		);
	}

	function handleBulletClick(index) {
		if (
			currentBlockDatas &&
			currentBlockDatas.innerBlocks
		) {
			console.log(
				currentBlockDatas.innerBlocks[index].clientId
			);
			dispatch('core/block-editor').selectBlock(
				currentBlockDatas.innerBlocks[index].clientId
			);
		}
	}

	useEffect(() => {
		updateFocusPointBullets();
		if (!coverId && isBlobURL(coverUrl)) {
			setAttributes({ coverUrl: undefined, coverAlt: '' });
		}
	}, []);
	useEffect(() => {
		// Fonction de clean du BLOB URL qui se lance à chaque changement de coverUrl
		if (isBlobURL(coverUrl)) {
			// Si la cover est une blob, c'est que ça upload donc on met cette url dans le state
			setBlobUrl(coverUrl);
		} else {
			// Si la cover en'est plus une blob, c'est que l'upload est terminé, on revoke la blob et on clean le state
			revokeBlobURL(blobUrl); // On utilise la valeur stocké dans le state pour revoke l'url
			setBlobUrl();
		}
		passCoverUrlToChildren();
	}, [coverUrl]);

	useEffect(() => {
		updateFocusPointBullets();
		passCoverUrlToChildren();
	}, [children]);
	useEffect(() => {
		passIndexToChildren();
	}, [currentBlockDatas]);

	return (
		<>
			<InspectorControls>
				<PanelBody>
					<Button
						variant="primary"
						onClick={() => {
							insertFocusObjectBlock();
						}}
					>
						Ajouter un objet
					</Button>
				</PanelBody>
			</InspectorControls>
			<BlockControls>
				{coverUrl && (
					<>
						<MediaReplaceFlow
							group="inline"
							name="Remplacer l'image"
							disableMediaButtons={coverUrl}
							icon="trash"
							onSelect={updateImage}
							onError={onUploadError}
							accept="image/*" // On upload Allow only images
							allowedTypes={['image']} // Onlibrary Allow only images
							notices={noticeUI} // En cas d'erreur d'upload
							mediaId={coverId}
							mediaURL={coverUrl}
							className="media-button-replacer"
						/>
						<ToolbarButton
							icon={'trash'}
							title="Supprimer l'image"
							onClick={removeCoverImg}
						/>
					</>
				)}
			</BlockControls>
			<MediaPlaceholder
				disableMediaButtons={coverUrl}
				icon="admin-appearance"
				onSelect={updateImage}
				onError={onUploadError}
				accept="image/*" // On upload Allow only images
				allowedTypes={['image']} // Onlibrary Allow only images
				notices={noticeUI} // En cas d'erreur d'upload
			/>
			<section
				{...useBlockProps({
					className: `lhoist-blocks-search-and-find alignfull`,
				})}
			>
				{coverUrl && (
					<>
						{isBlobURL(coverUrl) && <Spinner />}
						<div className="lhoist-blocks-search-and-find__objects-container">
							<img
								className="lhoist-blocks-search-and-find__background_picture"
								src={coverUrl}
								alt={coverAlt}
							/>
							<InnerBlocks
								allowedBlocks={[
									'lhoist-content-blocks/focus-object',
								]}
							/>
						</div>
					</>
				)}
			</section>
		</>
	);
}

export default withNotices(Edit);