Cover: Allow drag n drop media replacement (#29813)

* Cover: Allow drag n drop media replacement See #26388. * Update transition duration and use grid unit for positioning
WordPress · Mar 12, 2021 · 877f615 · 877f615
1 parent 065fdcb
commit 877f615
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 21 deletions.
diff --git 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
@@ -65,3 +65,43 @@
 	// 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.2s opacity, 0.2s border;
+		@include reduce-motion("transition");
+	}
+
+	&.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: -($grid-unit-15 * 3);
+		left: -($grid-unit-15 * 3);
+		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;
+	}
+}