homegrade_blocks_production/blocks/focused-thematique/src/edit.js

import "./editor.scss";
import "./focus-point-thematique";

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 { coverId, coverAlt, focusBullets } = attributes;

	const currentTaxonomiesID = useSelect((select) =>
		select("core/editor").getCurrentPostAttribute("thematiques")
	);
	// ### Get current Thematique
	const mainTaxonomy = useSelect(
		(select) =>
			select("core").getEntityRecord(
				"taxonomy",
				"thematiques",
				currentTaxonomiesID[0]
			),
		[currentTaxonomiesID]
	);
	const coverID =
		(mainTaxonomy && mainTaxonomy.acf.taxonomy_pictures.illustration_xl) ??
		null;

	const cover = useSelect(
		(select) => (coverID ? select("core").getMedia(coverID) : null),
		[coverID]
	);

	const coverUrl = cover && cover.source_url ? cover.source_url : null;

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

	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.focusPosition.x,
					y: child.attributes.focusPosition.y,
				};
			});

			setAttributes({ focusBullets });
		}
	}
	function insertFocusPointBlock() {
		const index = children && children.length ? children.length : 0;
		const newBlock = createBlock("homegrade-content-blocks/focus-point", {});
		dispatch("core/block-editor").insertBlocks(newBlock, index, clientId);
	}

	function handleBulletClick(index) {
		const editor = select("core/block-editor");
		const innerBlocks = editor.getBlocks(attributes.clientId)[0].innerBlocks;
		// const innerBlocks = editor.getBlocks(attributes.clientId)[0];
		if (innerBlocks && innerBlocks[index]) {
			const bulletBlock = editor.getBlocks(attributes.clientId)[0].innerBlocks[
				index
			];
			dispatch("core/block-editor").selectBlock(bulletBlock.clientId);
		}
	}

	const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
		return (
			<div
				data-focus-bullet-title={focusBullet.title}
				className="homegrade-blocks-focus-point-bullet"
				style={{
					top: `${focusBullet.y * 100}%`,
					left: `${focusBullet.x * 100}%`,
				}}
				onClick={() => handleBulletClick(index)}
			>
				{index + 1}
			</div>
		);
	});

	useEffect(() => {
		updateFocusPointBullets();
		if (!coverId && isBlobURL(coverUrl)) {
			setAttributes({ coverUrl: undefined, coverAlt: "" });
		}
	}, []);
	useEffect(() => {
		passCoverUrlToChildren();
	}, [coverUrl]);

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

	return (
		<>
			<InspectorControls>
				<PanelBody>
					<Button
						variant="primary"
						onClick={() => {
							insertFocusPointBlock();
						}}
					>
						Ajouter un point Légende
					</Button>
				</PanelBody>
			</InspectorControls>

			<section
				{...useBlockProps({
					className: `homegrade-blocks-focused-schema`,
				})}
			>
				{cover && cover.source_url && (
					<div>
						<img src={cover.source_url} alt="" />
					</div>
				)}
				{cover && cover.source_url && (
					<figure className="picture-container">
						<img src={cover.source_url} alt={coverAlt} />
						{renderedFocusPointBullets}
					</figure>
				)}

				<figcaption>
					<ol>
						<InnerBlocks
							allowedBlocks={["homegrade-content-blocks/focus-point"]}
						/>
					</ol>
				</figcaption>
			</section>
		</>
	);
}

export default withNotices(Edit);