From fc1d905dd54ace1598b1f960671fb3038ccda433 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20Ka=CC=88gy?= <mail@fabian-kaegy.de>
Date: Tue, 25 Oct 2022 14:19:46 +0200
Subject: [PATCH] add prof of concept of how the image component could support
 a fallback value

---
 components/image/index.js                   | 73 +++++++++++++++++----
 example/src/blocks/image-example/block.json | 17 ++++-
 example/src/blocks/image-example/edit.js    |  8 +--
 3 files changed, 77 insertions(+), 21 deletions(-)

diff --git a/components/image/index.js b/components/image/index.js
index dcd64c08..8bafe687 100644
--- a/components/image/index.js
+++ b/components/image/index.js
@@ -2,6 +2,8 @@ import { MediaPlaceholder, InspectorControls } from '@wordpress/block-editor';
 import { Spinner, FocalPointPicker, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
+import { useRefEffect } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
 
 import { useMedia } from '../../hooks/use-media';
 
@@ -12,29 +14,22 @@ const Image = (props) => {
 		onSelect,
 		focalPoint = undefined,
 		onChangeFocalPoint,
+		fallback,
 		...rest
 	} = props;
-	const hasImage = !!id;
+	const hasImage = !!id && id !== -1;
 	const { media, isResolvingMedia } = useMedia(id);
 
+	console.count('Image Component Renders');
+
 	const hasFocalPoint = !!focalPoint;
+	const hasFallbackImage = !!fallback;
 
 	if (hasFocalPoint && typeof onChangeFocalPoint !== 'function') {
 		// eslint-disable-next-line no-console
 		console.warn('onChangeFocalPoint is required when focalPoint is set');
 	}
 
-	if (!hasImage) {
-		return <MediaPlaceholder onSelect={onSelect} accept="image" multiple={false} />;
-	}
-
-	if (isResolvingMedia) {
-		return <Spinner />;
-	}
-
-	const imageUrl = media?.media_details?.sizes[size]?.source_url ?? media?.source_url;
-	const altText = media?.alt_text;
-
 	if (hasFocalPoint) {
 		const focalPointStyle = {
 			objectFit: 'cover',
@@ -47,6 +42,54 @@ const Image = (props) => {
 		};
 	}
 
+	const [isBlockPreview, setIsBlockPreview] = useState(false);
+
+	const ref = useRefEffect((node) => {
+		const isRenderedInsideIframe = node.ownerDocument.documentElement.classList.contains(
+			'block-editor-block-preview__content-iframe',
+		);
+
+		setIsBlockPreview(isRenderedInsideIframe);
+	});
+
+	if (isBlockPreview && hasFallbackImage) {
+		rest.style = {
+			...rest.style,
+			maxWidth: '100%',
+		};
+		return <img src={fallback} alt="" ref={ref} {...rest} />;
+	}
+
+	if (!hasImage) {
+		return (
+			<>
+				<MediaPlaceholder onSelect={onSelect} accept="image" multiple={false} />
+				<span
+					style={{
+						border: 0,
+						clip: 'rect(1px, 1px, 1px, 1px)',
+						clipPath: 'inset(50%)',
+						height: '1px',
+						margin: '-1px',
+						overflow: 'hidden',
+						padding: 0,
+						position: 'absolute',
+						width: '1px',
+						wordWrap: 'normal !important',
+					}}
+					ref={ref}
+				/>
+			</>
+		);
+	}
+
+	if (isResolvingMedia) {
+		return <Spinner />;
+	}
+
+	const imageUrl = media?.media_details?.sizes[size]?.source_url ?? media?.source_url;
+	const altText = media?.alt_text;
+
 	return (
 		<>
 			{hasFocalPoint && (
@@ -70,6 +113,7 @@ export { Image };
 
 Image.defaultProps = {
 	size: 'large',
+	fallback: '',
 	focalPoint: undefined,
 	onChangeFocalPoint: undefined,
 };
@@ -78,9 +122,10 @@ Image.propTypes = {
 	id: PropTypes.number.isRequired,
 	size: PropTypes.string,
 	onSelect: PropTypes.func.isRequired,
+	fallback: PropTypes.string,
 	onChangeFocalPoint: PropTypes.func,
 	focalPoint: PropTypes.shape({
-		x: PropTypes.string,
-		y: PropTypes.string,
+		x: PropTypes.number,
+		y: PropTypes.number,
 	}),
 };
diff --git a/example/src/blocks/image-example/block.json b/example/src/blocks/image-example/block.json
index 5779bc0e..606506a5 100644
--- a/example/src/blocks/image-example/block.json
+++ b/example/src/blocks/image-example/block.json
@@ -5,13 +5,24 @@
     "description": "Example Block to show the Image in usage",
     "icon": "smiley",
     "category": "common",
-    "example": {},
+    "example": {
+		"attributes": {
+			"image": {
+				"id": -1,
+				"fallback": "https://images.unsplash.com/photo-1666625267725-310b76f139d6"
+			}
+		}
+	},
     "supports": {
         "html": false
     },
     "attributes": {
-        "imageId": {
-            "type": "number"
+        "image": {
+            "type": "object",
+			"default": {
+				"id": null,
+				"fallback": null
+			}
         },
 		"focalPoint": {
 			"type": "object",
diff --git a/example/src/blocks/image-example/edit.js b/example/src/blocks/image-example/edit.js
index 9f1323d1..2531c79c 100644
--- a/example/src/blocks/image-example/edit.js
+++ b/example/src/blocks/image-example/edit.js
@@ -9,11 +9,11 @@ export function BlockEdit(props) {
         setAttributes
     } = props;
 
-    const { imageId, focalPoint } = attributes;
+    const { image, focalPoint } = attributes;
     const blockProps = useBlockProps();
 
     const handleImageSelection = value => {
-        setAttributes({imageId: value.id })
+        setAttributes({image: { id: value.id } })
     };
     const removeImage = () => setAttributes({imageId: null});
 
@@ -24,11 +24,11 @@ export function BlockEdit(props) {
     return (
         <>
             <BlockControls>
-               <MediaToolbar id={imageId} onSelect={ handleImageSelection } isOptional={true} onRemove={removeImage} />
+               <MediaToolbar id={image?.id} onSelect={ handleImageSelection } isOptional={true} onRemove={removeImage} />
             </BlockControls>
             <div {...blockProps}>
                 <h2>Hello World!</h2>
-                <Image id={imageId} size="large" onSelect={handleImageSelection} className="example-image" focalPoint={focalPoint} onChangeFocalPoint={handleFocalPointChange} />
+                <Image fallback={image?.fallback} id={image?.id} size="large" onSelect={handleImageSelection} className="example-image" focalPoint={focalPoint} onChangeFocalPoint={handleFocalPointChange} />
             </div>
         </>
     )