From 814fa5f29694044aa03633296599393d01e3c736 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 17 Aug 2022 14:47:14 +0200
Subject: [PATCH] Add back the legacy placeholder.

---
 packages/block-library/src/image/edit.js      |  6 +++++
 packages/block-library/src/image/editor.scss  | 22 +++++++++----------
 .../components/src/placeholder/style.scss     | 10 +++++++--
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 0edffc278f36f..7e45b27e546c6 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -28,11 +28,17 @@ import { image as icon } from '@wordpress/icons';
  */
 import Image from './image';
 
+// Much of this description is duplicated from MediaPlaceholder.
 const placeholder = ( content ) => {
 	return (
 		<Placeholder
 			className="block-editor-media-placeholder"
 			withIllustration={ true }
+			icon={ icon }
+			label={ __( 'Image' ) }
+			instructions={ __(
+				'Upload an image file, pick one from your media library, or add one with a URL.'
+			) }
 		>
 			{ content }
 		</Placeholder>
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index a29c8414cb49e..78afbc543231e 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -1,32 +1,30 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
-	// Show custom Placeholder style on-select.
+	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.
 		color: $gray-900;
 		background-color: $white;
 		box-shadow: inset 0 0 0 $border-width $gray-900;
 		border: none;
-		justify-content: center;
-		align-items: center;
 
 		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;
 
-		.components-placeholder__fieldset {
-			gap: $grid-unit-15;
-		}
-
-		.components-button {
-			margin: 0;
-		}
-
 		> svg {
 			opacity: 0;
-			visibility: hidden;
 		}
 	}
+
+	// Remove the transition while we still have a legacy placeholder style.
+	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
+	// parent border that may get applied when you deselect.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		transition: none;
+	}
 }
 
 
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index d742354ded43f..7c67c2b1be022 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -185,14 +185,20 @@
 
 	// Show placeholder buttons on block selection.
 	// Note that these can't be display: none; or visibility: hidden;, as that breaks the writing flow.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
 	.components-button {
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		@include reduce-motion("transition");
 	}
 
-	.is-selected > & .components-button {
-		opacity: 1;
+	.is-selected > & {
+		.components-placeholder__label,
+		.components-placeholder__instructions,
+		.components-button {
+			opacity: 1;
+		}
 	}
 
 	// By painting the borders here, we enable them to be replaced by the Border control.