A little refactoring

aaronrobertshaw · aaronrobertshaw · commit 325666741fe8 · 2022-05-20T18:28:36.000+10:00
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -38,7 +38,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": 32, // InnerBlocks area inside cover image block. Must be higher than block popover and less than drop zone.
-	".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
+	".wp-block-cover.is-placeholder .components-placeholder.is-large": 32, // 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.
 	".block-library-cover__padding-visualizer": 2, // BoxControl visualizer needs to be +1 higher than .wp-block-cover.has-background-dim::before
 	".wp-block-cover__image-background": 0, // Image background inside cover block.
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
@@ -220,6 +220,27 @@ function CoverEdit( {
 		overlayColor,
 	};
 
+	const resizableCoverProps = {
+		className: 'block-library-cover__resize-container',
+		clientId,
+		height,
+		minHeight: parseFloat( minHeight ),
+		onResizeStart: () => {
+			setAttributes( { minHeightUnit: 'px' } );
+			toggleSelection( false );
+		},
+		onResize: ( value ) => {
+			setAttributes( { minHeight: value } );
+		},
+		onResizeStop: ( newMinHeight ) => {
+			toggleSelection( true );
+			setAttributes( { minHeight: newMinHeight } );
+		},
+		showHandle: true,
+		size: resizableBoxDimensions,
+		width,
+	};
+
 	if ( ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
@@ -238,26 +259,7 @@ function CoverEdit( {
 					currentSettings={ currentSettings }
 				/>
 				{ isSelected && (
-					<ResizableCoverPopover
-						clientId={ clientId }
-						className="block-library-cover__resize-container is-placeholder"
-						minHeight={ parseFloat( minHeight ) }
-						onResizeStart={ () => {
-							setAttributes( { minHeightUnit: 'px' } );
-							toggleSelection( false );
-						} }
-						onResize={ ( value ) => {
-							setAttributes( { minHeight: value } );
-						} }
-						onResizeStop={ ( newMinHeight ) => {
-							toggleSelection( true );
-							setAttributes( { minHeight: newMinHeight } );
-						} }
-						showHandle={ true }
-						size={ { height: 'auto', width: 'auto' } }
-						width={ width }
-						height={ height }
-					/>
+					<ResizableCoverPopover { ...resizableCoverProps } />
 				) }
 				<div
 					{ ...blockProps }
@@ -319,28 +321,6 @@ function CoverEdit( {
 				coverRef={ ref }
 				currentSettings={ currentSettings }
 			/>
-			{ isSelected && (
-				<ResizableCoverPopover
-					clientId={ clientId }
-					className="block-library-cover__resize-container"
-					minHeight={ parseFloat( minHeight ) }
-					onResizeStart={ () => {
-						setAttributes( { minHeightUnit: 'px' } );
-						toggleSelection( false );
-					} }
-					onResize={ ( value ) => {
-						setAttributes( { minHeight: value } );
-					} }
-					onResizeStop={ ( newMinHeight ) => {
-						toggleSelection( true );
-						setAttributes( { minHeight: newMinHeight } );
-					} }
-					showHandle
-					size={ resizableBoxDimensions }
-					width={ width }
-					height={ height }
-				/>
-			) }
 			<div
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
@@ -396,6 +376,9 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</div>
+			{ isSelected && (
+				<ResizableCoverPopover { ...resizableCoverProps } />
+			) }
 		</>
 	);
 }
