initial commit

WordPress · Sep 23, 2021 · f58abfd · f58abfd
1 parent 1620d51
commit f58abfd
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -271,29 +271,32 @@ function CoverPlaceholder( {
 	noticeUI,
 	noticeOperations,
 	onSelectMedia,
+	style,
 } ) {
 	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={ disableMediaButtons }
-			onError={ ( message ) => {
-				removeAllNotices();
-				createErrorNotice( message );
-			} }
-		>
-			{ children }
-		</MediaPlaceholder>
+		<div className="cover-block__cover-placeholder-container" style={ style }>
+			<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={ disableMediaButtons }
+				onError={ ( message ) => {
+					removeAllNotices();
+					createErrorNotice( message );
+				} }
+			>
+				{ children }
+			</MediaPlaceholder>
+		</div>
 	);
 }
 
@@ -629,10 +632,25 @@ function CoverEdit( {
 						blockProps.className
 					) }
 				>
+					<ResizableCover
+						className="block-library-cover__resize-container"
+						onResizeStart={ () => {
+							setAttributes( { minHeightUnit: 'px' } );
+							toggleSelection( false );
+						} }
+						onResize={ setTemporaryMinHeight }
+						onResizeStop={ ( newMinHeight ) => {
+							toggleSelection( true );
+							setAttributes( { minHeight: newMinHeight } );
+							setTemporaryMinHeight( null );
+						} }
+						showHandle={ isSelected }
+					/>
 					<CoverPlaceholder
 						noticeUI={ noticeUI }
 						onSelectMedia={ onSelectMedia }
 						noticeOperations={ noticeOperations }
+						style={ { minHeight: temporaryMinHeight || minHeight } }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -116,3 +116,10 @@
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
 	background-attachment: scroll;
 }
+
+.cover-block__cover-placeholder-container {
+	background: white;
+	.block-editor-media-placeholder {
+		box-shadow: none;
+	}
+}