Cover block: Allow setting the height from the placeholder state. (#3…

…5068)

* initial commit

* Added some copy.

* Ensure that the resizeable placeholder has a consistent background color (white) and border.

* Experiment to add vertical classes to the placeholder and use it to determine the min-height of the resizeable placeholder.

* limit the resize behaviour to `is-large` placeholders

Reverting changes to the Placeholder `useResizeObserver` since it was a test.
limit the resize behaviour to `is-large` placeholders

* Ensure the placeholder takes up the maximium available width set by the containing block

* 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.

* Bumping min-height of is-large placeholder resizer down to 240px

* Because we removed `minHeight={ COVER_MIN_HEIGHT }` on the resizeable container so that our changes in editor.scss take precedence, we have to reinstate the COVER_MIN_HEIGHT of 50px now via css

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.

packages/block-editor/src/components/media-placeholder/index.js

@@ -78,6 +78,7 @@ export function MediaPlaceholder( {
 	children,
 	mediaLibraryButton,
 	placeholder,
+	style,
 } ) {
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -248,6 +249,7 @@ export function MediaPlaceholder( {
 				notices={ notices }
 				onDoubleClick={ onDoubleClick }
 				preview={ mediaPreview }
+				style={ style }
 			>
 				{ content }
 				{ children }

packages/block-library/src/cover/edit.js

@@ -198,7 +198,6 @@ function ResizableCover( {
 				onResizeStop( elt.clientHeight );
 				setIsResizing( false );
 			} }
-			minHeight={ COVER_MIN_HEIGHT }
 			{ ...props }
 		/>
 	);
@@ -274,6 +273,7 @@ function CoverPlaceholder( {
 	noticeUI,
 	noticeOperations,
 	onSelectMedia,
+	style,
 } ) {
 	const { removeAllNotices, createErrorNotice } = noticeOperations;
 	return (
@@ -294,6 +294,7 @@ function CoverPlaceholder( {
 				removeAllNotices();
 				createErrorNotice( message );
 			} }
+			style={ style }
 		>
 			{ children }
 		</MediaPlaceholder>
@@ -636,6 +637,7 @@ function CoverEdit( {
 						noticeUI={ noticeUI }
 						onSelectMedia={ onSelectMedia }
 						noticeOperations={ noticeOperations }
+						style={ { minHeight: temporaryMinHeight || minHeight } }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
@@ -646,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>
 			</>
 		);

packages/block-library/src/cover/editor.scss

@@ -9,6 +9,22 @@
 	&.is-placeholder {
 		min-height: auto !important;
 		padding: 0 !important;
+
+		// Resizeable placeholder for placeholder.
+		.block-library-cover__resize-container {
+			display: none;
+		}
+		.components-placeholder {
+			&.is-large {
+				min-height: 240px;
+				justify-content: flex-start;
+				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+				+ .block-library-cover__resize-container {
+					min-height: 240px;
+					display: block;
+				}
+			}
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -64,6 +80,7 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
+	min-height: 50px;
 }
 
 .block-library-cover__resize-container:not(.is-resizing) {