From f89a03bc11f2d95f6543f60b2b9e885ebf12bd22 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Tue, 31 May 2022 16:52:24 +0300
Subject: [PATCH 1/2] adds placeholder when feature image is in use

---
 .../block-library/src/cover/edit/index.js     | 61 +++++++++++++------
 packages/block-library/src/cover/editor.scss  | 27 ++++++++
 2 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
index 677c25035cf0ae..4a381daf3de16d 100644
--- a/packages/block-library/src/cover/edit/index.js
+++ b/packages/block-library/src/cover/edit/index.js
@@ -24,6 +24,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { isBlobURL } from '@wordpress/blob';
+import { SVG, Path } from '@wordpress/primitives';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -46,6 +47,18 @@ import ResizableCover from './resizable-cover';
 
 extend( [ namesPlugin ] );
 
+const placeholderIllustration = (
+	<SVG
+		className="components-placeholder__illustration"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 60 60"
+		preserveAspectRatio="none"
+	>
+		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
+	</SVG>
+);
+
 function getInnerBlocksTemplate( attributes ) {
 	return [
 		[
@@ -212,7 +225,7 @@ function CoverEdit( {
 		overlayColor,
 	};
 
-	if ( ! hasInnerBlocks && ! hasBackground ) {
+	if ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
 				<CoverBlockControls
@@ -324,25 +337,33 @@ function CoverEdit( {
 					showHandle={ isSelected }
 				/>
 
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-cover__background',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							// For backwards compatibility. Former versions of the Cover Block applied
-							// `.wp-block-cover__gradient-background` in the presence of
-							// media, a gradient and a dim.
-							'wp-block-cover__gradient-background':
-								url && gradientValue && dimRatio !== 0,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						}
-					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
-				/>
+				{ ( ! useFeaturedImage || url ) && (
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
+
+				{ ! url && useFeaturedImage && (
+					<div className="wp-block-cover__image--placeholder-image">
+						{ placeholderIllustration }
+					</div>
+				) }
 
 				{ url &&
 					isImageBackground &&
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 67bdc0e42dbfb1..7c8742979a174a 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -62,6 +62,33 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+
+	.wp-block-cover__image--placeholder-image {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		// Style the placeholder illustration.
+		.components-placeholder__illustration {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			stroke: currentColor;
+			stroke-dasharray: 3;
+			opacity: 0.4;
+		}
+
+		border: $border-width dashed currentColor;
+	}
+
 }
 
 [data-align="left"] > .wp-block-cover,

From 2e6cfc759d1e130e87c2c580309bb2f8c9c50685 Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <andrei.draganescu@automattic.com>
Date: Wed, 8 Jun 2022 16:30:26 +0300
Subject: [PATCH 2/2] cleans up superfluous CSS rules

---
 packages/block-library/src/cover/editor.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 7c8742979a174a..850aea41cbfda8 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -69,15 +69,10 @@
 		right: 0;
 		bottom: 0;
 		left: 0;
-		width: 100%;
-		height: 100%;
 
 		// Style the placeholder illustration.
 		.components-placeholder__illustration {
 			position: absolute;
-			top: 0;
-			right: 0;
-			bottom: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;