updating image component to adapt to multipurpose usages

blocks/_components/ImageMediaPlaceholder.jsx

@@ -10,7 +10,6 @@ export default function ImageMediaPlaceholder({ imageId, imageAlt, imageUrl, set
 	}
 
 	function removeImageAttributes() {
-		console.log("removeImageAttributes");
 		setAttributes({
 			imageId: null,
 			imageAlt: null,

blocks/_components/ImagePanelBodyContent.jsx

@@ -0,0 +1,59 @@
+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,
+		});
+	}
+
+	return (
+		<>
+			{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>
+		</>
+	);
+}