From ac39eff9a068753e48c9a4777599ca68ee547d0a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 12 Mar 2021 14:00:22 +0400
Subject: [PATCH 1/2] Cover: Allow drag n drop media replacement

See #26388.
---
 packages/block-library/src/cover/edit.js     | 64 +++++++++++++-------
 packages/block-library/src/cover/editor.scss | 39 ++++++++++++
 2 files changed, 82 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index d05b7bee2288f..71229495dff78 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -240,6 +240,38 @@ function mediaPosition( { x, y } ) {
 	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
 }
 
+function CoverPlaceholder( {
+	coverUrl,
+	children,
+	noticeUI,
+	noticeOperations,
+	onSelectMedia,
+} ) {
+	const { removeAllNotices, createErrorNotice } = noticeOperations;
+	return (
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ icon } /> }
+			labels={ {
+				title: __( 'Cover' ),
+				instructions: __(
+					'Upload an image or video file, or pick one from your media library.'
+				),
+			} }
+			onSelect={ onSelectMedia }
+			accept="image/*,video/*"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			notices={ noticeUI }
+			disableMediaButtons={ !! coverUrl }
+			onError={ ( message ) => {
+				removeAllNotices();
+				createErrorNotice( message );
+			} }
+		>
+			{ children }
+		</MediaPlaceholder>
+	);
+}
+
 function CoverEdit( {
 	attributes,
 	isSelected,
@@ -329,7 +361,6 @@ function CoverEdit( {
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
 	const [ temporaryMinHeight, setTemporaryMinHeight ] = useState( null );
-	const { removeAllNotices, createErrorNotice } = noticeOperations;
 
 	const minHeightWithUnit = minHeightUnit
 		? `${ minHeight }${ minHeightUnit }`
@@ -507,9 +538,6 @@ function CoverEdit( {
 	);
 
 	if ( ! hasBackground ) {
-		const placeholderIcon = <BlockIcon icon={ icon } />;
-		const label = __( 'Cover' );
-
 		return (
 			<>
 				{ controls }
@@ -520,22 +548,10 @@ function CoverEdit( {
 						blockProps.className
 					) }
 				>
-					<MediaPlaceholder
-						icon={ placeholderIcon }
-						labels={ {
-							title: label,
-							instructions: __(
-								'Upload an image or video file, or pick one from your media library.'
-							),
-						} }
-						onSelect={ onSelectMedia }
-						accept="image/*,video/*"
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						notices={ noticeUI }
-						onError={ ( message ) => {
-							removeAllNotices();
-							createErrorNotice( message );
-						} }
+					<CoverPlaceholder
+						noticeUI={ noticeUI }
+						onSelectMedia={ onSelectMedia }
+						noticeOperations={ noticeOperations }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
@@ -545,7 +561,7 @@ function CoverEdit( {
 								clearable={ false }
 							/>
 						</div>
-					</MediaPlaceholder>
+					</CoverPlaceholder>
 				</div>
 			</>
 		);
@@ -627,6 +643,12 @@ function CoverEdit( {
 					/>
 				) }
 				{ isBlogUrl && <Spinner /> }
+				<CoverPlaceholder
+					coverUrl={ url }
+					noticeUI={ noticeUI }
+					onSelectMedia={ onSelectMedia }
+					noticeOperations={ noticeOperations }
+				/>
 				<div { ...innerBlocksProps } />
 			</div>
 		</>
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index b6d6aae7e92ec..0478b0d0fe253 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -65,3 +65,42 @@
 	// Important is used to have higher specificity than the inline style set by re-resizable library.
 	height: auto !important;
 }
+
+// Only target direct dropzone.
+.wp-block-cover > .components-drop-zone {
+	&.is-active {
+		transition: 0.3s opacity, 0.3s border;
+	}
+
+	&.is-dragging-over-element {
+		background-color: transparent;
+		border: $grid-unit-60 solid var(--wp-admin-theme-color);
+
+		.components-drop-zone__content {
+			transform: none;
+		}
+	}
+
+	.components-drop-zone__content {
+		display: flex;
+		align-items: center;
+		top: -36px;
+		left: -36px;
+		transform: none;
+	}
+
+	.components-drop-zone__content-icon,
+	.components-drop-zone__content-text {
+		display: inline;
+	}
+
+	.components-drop-zone__content-icon {
+		// Reset margin.
+		margin: 0;
+		margin-right: $grid-unit;
+	}
+
+	.components-drop-zone__content-text {
+		font-size: $default-font-size;
+	}
+}

From 4b48da98e1fbeed4082a63eef0195957bcdb41e4 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 12 Mar 2021 15:01:09 +0400
Subject: [PATCH 2/2] Update transition duration and use grid unit for
 positioning

---
 packages/block-library/src/cover/editor.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 0478b0d0fe253..899cf8f84f7f0 100644
--- a/packages/block-library/src/cover/editor.scss
+++ b/packages/block-library/src/cover/editor.scss
@@ -69,7 +69,8 @@
 // Only target direct dropzone.
 .wp-block-cover > .components-drop-zone {
 	&.is-active {
-		transition: 0.3s opacity, 0.3s border;
+		transition: 0.2s opacity, 0.2s border;
+		@include reduce-motion("transition");
 	}
 
 	&.is-dragging-over-element {
@@ -84,8 +85,8 @@
 	.components-drop-zone__content {
 		display: flex;
 		align-items: center;
-		top: -36px;
-		left: -36px;
+		top: -($grid-unit-15 * 3);
+		left: -($grid-unit-15 * 3);
 		transform: none;
 	}