adding an Image component to pass special props and reuse a special picture type

blocks/_components/Image.jsx

@@ -0,0 +1,9 @@
+export default function Image({ imageUrl, imageAlt, imageProportion }) {
+	return (
+		<img
+			src={imageUrl}
+			alt={imageAlt}
+			className={`homegrade-blocks-components-image homegrade-blocks-components-image--${imageProportion}-ratio`}
+		/>
+	);
+}

blocks/_components/ImageMediaPlaceholder.jsx

@@ -0,0 +1,33 @@
+import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
+
+export default function ImageMediaPlaceholder({ imageId, imageAlt, imageUrl, setAttributes }) {
+	function setImageAttributes(image) {
+		setAttributes({
+			imageId: image.id,
+			imageAlt: image.alt,
+			imageUrl: image.url,
+		});
+	}
+
+	function removeImageAttributes() {
+		console.log("removeImageAttributes");
+		setAttributes({
+			imageId: null,
+			imageAlt: null,
+			imageUrl: null,
+		});
+	}
+	return (
+		<>
+			{!imageUrl && (
+				<MediaPlaceholder
+					accept='image/*'
+					allowedTypes={["image"]}
+					onSelect={setImageAttributes}
+					multiple={false}
+					handleUpload={true}
+				/>
+			)}
+		</>
+	);
+}

blocks/_components/ImagePanelBody.jsx

@@ -0,0 +1,98 @@
+import { __ } from "@wordpress/i18n";
+import {
+	PanelBody,
+	Button,
+	Tip,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from "@wordpress/components";
+import { MediaReplaceFlow, MediaPlaceholder } from "@wordpress/block-editor";
+import { trash } from "@wordpress/icons";
+
+export default function ImagePanelBody({ imageUrl, imageAlt, imageId, imageProportion, setAttributes }) {
+	function setImageAttributes(image) {
+		setAttributes({
+			imageId: image.id,
+			imageAlt: image.alt,
+			imageUrl: image.url,
+		});
+	}
+
+	function removeImageAttributes() {
+		setAttributes({
+			imageId: null,
+			imageAlt: null,
+			imageUrl: null,
+		});
+	}
+	function onImageProportionChange(imageProportion) {
+		console.log(imageProportion);
+		setAttributes({ imageProportion });
+	}
+	return (
+		<>
+			<PanelBody
+				className='homegrade-blocks-components-image__panel-body'
+				title={__("Image", "homegrade-blocks__texte-backoffice")}>
+				{imageUrl && <img src={imageUrl} alt={imageAlt} />}
+				<div className='media-replace-container'>
+					<MediaReplaceFlow
+						mediaId={imageId}
+						mediaUrl={imageUrl}
+						allowedTypes={["image"]}
+						accept='image/*'
+						onSelect={setImageAttributes}
+						name={
+							!imageUrl
+								? __("Ajouter", "homegrade-blocks__texte-backoffice")
+								: __("Remplacer", "homegrade-blocks__texte-backoffice")
+						}
+					/>
+					{imageUrl && (
+						<>
+							<Button
+								className='custom-flow-button'
+								variant='primary'
+								icon={trash}
+								label='Supprimer'
+								onClick={removeImageAttributes}
+							/>
+						</>
+					)}
+				</div>
+				<Tip>
+					Si besoin, Utilisez le champ "Légende"de la médiathèque pour afficher un
+					copyright
+				</Tip>
+				<Tip>
+					Si besoin, Utilisez le champ "Description" de la médiathèque pour donner
+					afficher une description de votre image
+				</Tip>
+				{imageUrl && (
+					<ToggleGroupControl
+						label='Proportion'
+						className='homegrade-blocks-components-image__ratio-selector'
+						isBlock
+						onChange={onImageProportionChange}
+						value={imageProportion}>
+						<ToggleGroupControlOption
+							variant='primary'
+							label='Original'
+							value='original'
+						/>
+						<ToggleGroupControlOption
+							variant='primary'
+							label='Moyen'
+							value='medium'
+						/>
+						<ToggleGroupControlOption
+							variant='primary'
+							label='Carré'
+							value='square'
+						/>
+					</ToggleGroupControl>
+				)}
+			</PanelBody>
+		</>
+	);
+}

blocks/_components/ImageUtils.jsx

@@ -0,0 +1,16 @@
+export function setImageAttributes(image) {
+	setAttributes({
+		imageId: image.id,
+		imageAlt: image.alt,
+		imageUrl: image.url,
+	});
+}
+
+export function removeImageAttributes() {
+	console.log("removeImageAttributes");
+	setAttributes({
+		imageId: null,
+		imageAlt: null,
+		imageUrl: null,
+	});
+}