Fix: Cover Block: Default height cuts off taller content.

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

@@ -8,6 +8,12 @@ import tinycolor from 'tinycolor2';
 /**
  * WordPress dependencies
  */
+import {
+	Component,
+	createRef,
+	useCallback,
+	useState,
+} from '@wordpress/element';
 import {
 	FocalPointPicker,
 	IconButton,
@@ -34,7 +40,6 @@ import {
 	withColors,
 	ColorPalette,
 } from '@wordpress/block-editor';
-import { Component, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -45,7 +50,6 @@ import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
-	COVER_DEFAULT_HEIGHT,
 	backgroundImageStyles,
 	dimRatioToClass,
 } from './shared';
@@ -69,11 +73,115 @@ function retrieveFastAverageColor() {
 	return retrieveFastAverageColor.fastAverageColor;
 }
 
+const CoverHeightInput = withInstanceId(
+	function( { value = '', instanceId, onChange } ) {
+		const [ temporaryInput, setTemporaryInput ] = useState( null );
+		const onChangeEvent = useCallback(
+			( event ) => {
+				const unprocessedValue = event.target.value;
+				const inputValue = unprocessedValue !== '' ?
+					parseInt( event.target.value, 10 ) :
+					undefined;
+				if ( ( isNaN( inputValue ) || inputValue < COVER_MIN_HEIGHT ) && inputValue !== undefined ) {
+					setTemporaryInput( event.target.value );
+					return;
+				}
+				setTemporaryInput( null );
+				onChange( inputValue );
+			},
+			[ onChange, setTemporaryInput ]
+		);
+		const onBlurEvent = useCallback(
+			() => {
+				if ( temporaryInput !== null ) {
+					setTemporaryInput( null );
+				}
+			},
+			[ temporaryInput, setTemporaryInput ]
+		);
+		const inputId = `block-cover-height-input-${ instanceId }`;
+		return (
+			<BaseControl label={ __( 'Height in pixels' ) } id={ inputId }>
+				<input
+					type="number"
+					id={ inputId }
+					onChange={ onChangeEvent }
+					onBlur={ onBlurEvent }
+					value={ temporaryInput !== null ? temporaryInput : value }
+					min={ COVER_MIN_HEIGHT }
+					step="10"
+				/>
+			</BaseControl>
+		);
+	}
+);
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+function ResizableCover( {
+	className,
+	children,
+	onResize,
+	onResizeStop,
+} ) {
+	const [ isResizing, setIsResizing ] = useState( false );
+	const onResizeEvent = useCallback(
+		( event, direction, elt ) => {
+			onResize( elt.clientHeight );
+			if ( ! isResizing ) {
+				setIsResizing( true );
+			}
+		},
+		[ onResize, setIsResizing ],
+	);
+	const onResizeStartEvent = useCallback(
+		( event, direction, elt ) => {
+			onResize( elt.clientHeight );
+		},
+		[ onResize ]
+	);
+	const onResizeStopEvent = useCallback(
+		( event, direction, elt ) => {
+			onResizeStop( elt.clientHeight );
+			setIsResizing( false );
+		},
+		[ onResizeStop, setIsResizing ]
+	);
+
+	return (
+		<ResizableBox
+			className={ classnames(
+				className,
+				{
+					'is-resizing': isResizing,
+				}
+			) }
+			enable={ RESIZABLE_BOX_ENABLE_OPTION }
+			onResizeStart={ onResizeStartEvent }
+			onResize={ onResizeEvent }
+			onResizeStop={ onResizeStopEvent }
+			minHeight={ COVER_MIN_HEIGHT }
+		>
+			{ children }
+		</ResizableBox>
+	);
+}
+
 class CoverEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		this.state = {
 			isDark: false,
+			temporaryMinHeight: null,
 		};
 		this.imageRef = createRef();
 		this.videoRef = createRef();
@@ -97,7 +205,6 @@ class CoverEdit extends Component {
 
 	render() {
 		const {
-			instanceId,
 			attributes,
 			setAttributes,
 			isSelected,
@@ -113,7 +220,7 @@ class CoverEdit extends Component {
 			hasParallax,
 			id,
 			url,
-			minHeight = COVER_DEFAULT_HEIGHT,
+			minHeight,
 		} = attributes;
 		const onSelectMedia = ( media ) => {
 			if ( ! media || ! media.url ) {
@@ -159,19 +266,22 @@ class CoverEdit extends Component {
 		};
 		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 
+		const { temporaryMinHeight } = this.state;
+
 		const style = {
 			...(
 				backgroundType === IMAGE_BACKGROUND_TYPE ?
 					backgroundImageStyles( url ) :
 					{}
 			),
 			backgroundColor: overlayColor.color,
+			minHeight: ( temporaryMinHeight || minHeight ),
 		};
 
 		if ( focalPoint ) {
 			style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
 		}
-		const inputId = `block-cover-height-input-${ instanceId }`;
+
 		const controls = (
 			<>
 				<BlockControls>
@@ -215,28 +325,16 @@ class CoverEdit extends Component {
 									onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
 								/>
 							) }
-							<BaseControl label={ __( 'Height in pixels' ) } id={ inputId }>
-								<input
-									type="number"
-									id={ inputId }
-									onChange={ ( event ) => {
-										let coverMinHeight = parseInt( event.target.value, 10 );
-										this.setState( { coverMinHeight } );
-										if ( isNaN( coverMinHeight ) ) {
-											// Set cover min height to default size and input box to empty string
-											this.setState( { coverMinHeight: COVER_DEFAULT_HEIGHT } );
-											coverMinHeight = COVER_DEFAULT_HEIGHT;
-										} else if ( coverMinHeight < COVER_MIN_HEIGHT ) {
-											// Set cover min height to minimum size
-											coverMinHeight = COVER_MIN_HEIGHT;
-										}
-										setAttributes( { minHeight: coverMinHeight } );
-									} }
-									value={ this.state.coverMinHeight || minHeight }
-									min={ COVER_MIN_HEIGHT }
-									step="10"
-								/>
-							</BaseControl>
+							<CoverHeightInput
+								value={ temporaryMinHeight || minHeight }
+								onChange={
+									( value ) => {
+										setAttributes( {
+											minHeight: value,
+										} );
+									}
+								}
+							/>
 							<PanelRow>
 								<Button
 									isDefault
@@ -329,32 +427,26 @@ class CoverEdit extends Component {
 		return (
 			<>
 				{ controls }
-				<ResizableBox
+				<ResizableCover
 					className={ classnames(
 						'block-library-cover__resize-container',
 						{ 'is-selected': isSelected },
 					) }
-					size={ {
-						height: minHeight,
-					} }
-					minHeight={ COVER_MIN_HEIGHT }
-					enable={ {
-						top: false,
-						right: false,
-						bottom: true,
-						left: false,
-						topRight: false,
-						bottomRight: false,
-						bottomLeft: false,
-						topLeft: false,
-					} }
-					onResizeStop={ ( event, direction, elt, delta ) => {
-						const coverHeight = parseInt( minHeight + delta.height, 10 );
-						this.setState( { coverMinHeight: coverHeight } );
-						setAttributes( {
-							minHeight: coverHeight,
+					onResize={ ( newMinHeight ) => {
+						this.setState( {
+							temporaryMinHeight: newMinHeight,
 						} );
 					} }
+					onResizeStop={
+						( newMinHeight ) => {
+							setAttributes( {
+								minHeight: newMinHeight,
+							} );
+							this.setState( {
+								temporaryMinHeight: null,
+							} );
+						}
+					}
 				>
 
 					<div
@@ -390,7 +482,7 @@ class CoverEdit extends Component {
 							/>
 						</div>
 					</div>
-				</ResizableBox>
+				</ResizableCover>
 			</>
 		);
 	}

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

@@ -1,6 +1,5 @@
 .wp-block-cover-image,
 .wp-block-cover {
-	min-height: auto;
 
 	&.components-placeholder h2 {
 		color: inherit;
@@ -57,3 +56,8 @@
 .block-library-cover__reset-button {
 	margin-left: auto;
 }
+
+.block-library-cover__resize-container:not(.is-resizing) {
+	// Important is used to have higher specificity than the inline style set by re-resizable library.
+	height: auto !important;
+}

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

@@ -1,7 +1,6 @@
 export const IMAGE_BACKGROUND_TYPE = 'image';
 export const VIDEO_BACKGROUND_TYPE = 'video';
 export const COVER_MIN_HEIGHT = 50;
-export const COVER_DEFAULT_HEIGHT = 430;
 export function backgroundImageStyles( url ) {
 	return url ?
 		{ backgroundImage: `url(${ url })` } :