We need to reshuffle the order of the elements to ensure that:

- a user can interact with the placeholder controls - we can target the resizer as a sibling of `.components-placeholder.is-large` Also cleaning up the CSS and removing unused styles.
WordPress · Oct 8, 2021 · 7145dff · 7145dff
1 parent c4cacb2
commit 7145dff
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 56 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -37,6 +37,7 @@ $z-layers: (
 	".edit-widgets-header": 30,
 	".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
+	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__image-background": 0, // Image background inside cover block.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -277,29 +277,27 @@ function CoverPlaceholder( {
 } ) {
 	const { removeAllNotices, createErrorNotice } = noticeOperations;
 	return (
-		<div className="cover-block__cover-placeholder-container">
-			<MediaPlaceholder
-				icon={ <BlockIcon icon={ icon } /> }
-				labels={ {
-					title: __( 'Cover' ),
-					instructions: __(
-						'Drag and drop onto this block, upload, or select existing media from your library.'
-					),
-				} }
-				onSelect={ onSelectMedia }
-				accept="image/*,video/*"
-				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				notices={ noticeUI }
-				disableMediaButtons={ disableMediaButtons }
-				onError={ ( message ) => {
-					removeAllNotices();
-					createErrorNotice( message );
-				} }
-				style={ style }
-			>
-				{ children }
-			</MediaPlaceholder>
-		</div>
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ icon } /> }
+			labels={ {
+				title: __( 'Cover' ),
+				instructions: __(
+					'Drag and drop onto this block, upload, or select existing media from your library.'
+				),
+			} }
+			onSelect={ onSelectMedia }
+			accept="image/*,video/*"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			notices={ noticeUI }
+			disableMediaButtons={ disableMediaButtons }
+			onError={ ( message ) => {
+				removeAllNotices();
+				createErrorNotice( message );
+			} }
+			style={ style }
+		>
+			{ children }
+		</MediaPlaceholder>
 	);
 }
 
@@ -641,20 +639,6 @@ function CoverEdit( {
 						noticeOperations={ noticeOperations }
 						style={ { minHeight: temporaryMinHeight || minHeight } }
 					>
-						<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 }
-						/>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
 								disableCustomColors={ true }
@@ -664,6 +648,20 @@ function CoverEdit( {
 							/>
 						</div>
 					</CoverPlaceholder>
+					<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 }
+					/>
 				</div>
 			</>
 		);

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -9,6 +9,22 @@
 	&.is-placeholder {
 		min-height: auto !important;
 		padding: 0 !important;
+
+		// Resizeable placeholder
+		.components-resizable-box__container {
+			display: none;
+		}
+		.components-placeholder {
+			&.is-large {
+				min-height: 250px;
+				justify-content: flex-start;
+				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+				+ .components-resizable-box__container {
+					min-height: 250px;
+					display: block;
+				}
+			}
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -116,22 +132,3 @@
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
 	background-attachment: scroll;
 }
-
-// Resizeable placeholder
-.wp-block-cover.is-placeholder .cover-block__cover-placeholder-container {
-	width: 100%;
-	.components-resizable-box__container {
-		display: none;
-	}
-	.components-placeholder {
-		justify-content: flex-start;
-		&.is-large {
-			min-height: 250px;
-
-			.components-resizable-box__container {
-				min-height: 250px;
-				display: block;
-			}
-		}
-	}
-}