From 9b8898dc0da3028d28eb984430e6a55a3a00f15c Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 11 Aug 2022 12:27:28 +0200
Subject: [PATCH] Image: Try different resting state for placeholder, alternate
 version

---
 packages/block-library/src/image/edit.js     | 14 ++++-
 packages/block-library/src/image/editor.scss | 62 +++++++++++++++++++-
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 7b426be38e6d8..0edffc278f36f 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -8,7 +8,7 @@ import { get, has, isEmpty, omit, pick } from 'lodash';
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
-import { withNotices } from '@wordpress/components';
+import { withNotices, Placeholder } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
 	BlockAlignmentControl,
@@ -28,6 +28,17 @@ import { image as icon } from '@wordpress/icons';
  */
 import Image from './image';
 
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
+
 /**
  * Module constants
  */
@@ -344,6 +355,7 @@ export function ImageEdit( {
 				onSelectURL={ onSelectURL }
 				notices={ noticeUI }
 				onError={ onUploadError }
+				placeholder={ placeholder }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ { id, src } }
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 52a8e47198d36..6e5a260aa9390 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,3 +1,60 @@
+// Give the featured image placeholder the appearance of a literal image placeholder.
+// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity
+// to create a new component for placeholders meant to inherit some theme styles.
+.wp-block-image.wp-block-image {
+	// Inherit border radius from style variations.
+	// @todo: this doesn't work yet, it needs for the radius and border to be applied also in the setup state.
+	// https://github.com/WordPress/gutenberg/pull/42847
+	border-radius: $radius-block-ui;
+
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
+	}
+
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		// Fade out the diagonal placeholder onselect.
+		svg {
+			opacity: 0;
+			transition: opacity 0.1s linear;
+			@include reduce-motion("transition");
+		}
+
+		.components-button.components-button {
+			opacity: 1;
+			transition: opacity 0.1s linear;
+			@include reduce-motion("transition");
+		}
+
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
+
+	// Show controls on select.
+	&:not(.is-selected) {
+
+		.wp-block-post-featured-image__placeholder,
+		.components-placeholder {
+			color: currentColor;
+			background: transparent;
+			border: none;
+			box-shadow: none;
+		}
+
+		svg {
+			opacity: 0.4;
+		}
+
+		.components-button.components-button {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+}
+
+
 figure.wp-block-image:not(.wp-block) {
 	margin: 0;
 }
@@ -14,13 +71,12 @@ figure.wp-block-image:not(.wp-block) {
 		display: inline;
 	}
 
-	// Shown while image is being uploaded
+	// Shown while image is being uploaded.
 	.components-spinner {
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		margin-top: -9px;
-		margin-left: -9px;
+		transform: translate(-50%, -50%);
 	}
 }