Move ResizableBox to BlockPopover for Cover block borders

Author: aaronrobertshaw

packages/base-styles/_z-index.scss

@@ -32,8 +32,8 @@ $z-layers: (
 	".interface-interface-skeleton__content": 20,
 	".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__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": 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.

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

@@ -81,6 +81,7 @@ export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';
 export { default as PanelColorSettings } from './panel-color-settings';
 export { default as PlainText } from './plain-text';
+export { default as __experimentalResizableBoxPopover } from './resizable-box-popover';
 export { default as __experimentalResponsiveBlockControl } from './responsive-block-control';
 export {
 	default as RichText,

packages/block-editor/src/components/resizable-box-popover/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+
+export default function ResizableCoverPopover( {
+	clientId,
+	__unstableRefreshSize,
+	...props
+} ) {
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstableRefreshSize={ __unstableRefreshSize }
+		>
+			<ResizableBox { ...props } />
+		</BlockPopover>
+	);
+}

packages/block-library/src/cover/block.json

@@ -88,6 +88,18 @@
 				"padding": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"__experimentalDuotone": "> .wp-block-cover__image-background, > .wp-block-cover__video-background",
 			"text": false,

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

@@ -9,9 +9,9 @@ import namesPlugin from 'colord/plugins/names';
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 import { Placeholder, Spinner } from '@wordpress/components';
-import { compose } from '@wordpress/compose';
+import { compose, useResizeObserver } from '@wordpress/compose';
 import {
 	withColors,
 	ColorPalette,
@@ -42,7 +42,7 @@ import useCoverIsDark from './use-cover-is-dark';
 import CoverInspectorControls from './inspector-controls';
 import CoverBlockControls from './block-controls';
 import CoverPlaceholder from './cover-placeholder';
-import ResizableCover from './resizable-cover';
+import ResizableCoverPopover from './resizable-cover-popover';
 
 extend( [ namesPlugin ] );
 
@@ -142,6 +142,14 @@ function CoverEdit( {
 	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
 	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
 
+	const [ resizeListener, { height, width } ] = useResizeObserver();
+	const resizableBoxDimensions = useMemo( () => {
+		return {
+			height: minHeight ? parseFloat( minHeight ) : 'auto',
+			width: 'auto',
+		};
+	}, [ minHeight ] );
+
 	const minHeightWithUnit =
 		minHeight && minHeightUnit
 			? `${ minHeight }${ minHeightUnit }`
@@ -242,24 +250,50 @@ function CoverEdit( {
 		/>
 	);
 
+	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 ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
 				{ blockControls }
 				{ inspectorControls }
+				{ isSelected && (
+					<ResizableCoverPopover { ...resizableCoverProps } />
+				) }
 				<div
 					{ ...blockProps }
 					className={ classnames(
 						'is-placeholder',
 						blockProps.className
 					) }
+					style={ {
+						...blockProps.style,
+						minHeight: minHeightWithUnit || undefined,
+					} }
 				>
+					{ resizeListener }
 					<CoverPlaceholder
 						onSelectMedia={ onSelectMedia }
 						onError={ onUploadError }
-						style={ {
-							minHeight: minHeightWithUnit || undefined,
-						} }
 						toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					>
 						<div className="wp-block-cover__placeholder-background-options">
@@ -271,21 +305,6 @@ function CoverEdit( {
 							/>
 						</div>
 					</CoverPlaceholder>
-					<ResizableCover
-						className="block-library-cover__resize-container"
-						onResizeStart={ () => {
-							setAttributes( { minHeightUnit: 'px' } );
-							toggleSelection( false );
-						} }
-						onResize={ ( value ) => {
-							setAttributes( { minHeight: value } );
-						} }
-						onResizeStop={ ( newMinHeight ) => {
-							toggleSelection( true );
-							setAttributes( { minHeight: newMinHeight } );
-						} }
-						showHandle={ isSelected }
-					/>
 				</div>
 			</>
 		);
@@ -314,22 +333,7 @@ function CoverEdit( {
 				style={ { ...style, ...blockProps.style } }
 				data-url={ url }
 			>
-				<ResizableCover
-					className="block-library-cover__resize-container"
-					onResizeStart={ () => {
-						setAttributes( { minHeightUnit: 'px' } );
-						toggleSelection( false );
-					} }
-					onResize={ ( value ) => {
-						setAttributes( { minHeight: value } );
-					} }
-					onResizeStop={ ( newMinHeight ) => {
-						toggleSelection( true );
-						setAttributes( { minHeight: newMinHeight } );
-					} }
-					showHandle={ isSelected }
-				/>
-
+				{ resizeListener }
 				{ ( ! useFeaturedImage || url ) && (
 					<span
 						aria-hidden="true"
@@ -400,6 +404,9 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</div>
+			{ isSelected && (
+				<ResizableCoverPopover { ...resizableCoverProps } />
+			) }
 		</>
 	);
 }

…ibrary/src/cover/edit/resizable-cover.js …rc/cover/edit/resizable-cover-popover.jspackages/block-library/src/cover/edit/resizable-cover.js renamed to packages/block-library/src/cover/edit/resizable-cover-popover.js packages/block-library/src/cover/edit/resizable-cover.js renamed to packages/block-library/src/cover/edit/resizable-cover-popover.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
-import { ResizableBox } from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __experimentalResizableBoxPopover as ResizableBoxPopover } from '@wordpress/block-editor';
 
 const RESIZABLE_BOX_ENABLE_OPTION = {
 	top: false,
@@ -20,17 +20,25 @@ const RESIZABLE_BOX_ENABLE_OPTION = {
 	topLeft: false,
 };
 
-export default function ResizableCover( {
+export default function ResizableCoverPopover( {
 	className,
-	onResizeStart,
+	height,
+	minHeight,
 	onResize,
+	onResizeStart,
 	onResizeStop,
+	width,
 	...props
 } ) {
 	const [ isResizing, setIsResizing ] = useState( false );
+	const dimensions = useMemo(
+		() => ( { height, minHeight, width } ),
+		[ minHeight, height, width ]
+	);
 
 	return (
-		<ResizableBox
+		<ResizableBoxPopover
+			__unstableRefreshSize={ dimensions }
 			className={ classnames( className, {
 				'is-resizing': isResizing,
 			} ) }

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

@@ -7,24 +7,23 @@
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
 	&.is-placeholder {
-		min-height: auto !important;
 		padding: 0 !important;
+		display: flex;
+		align-items: stretch;
+		overflow: visible;
+		min-height: 240px;
 
-		// Resizable 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;
-				}
 			}
 		}
+
+		// Allow focus outline/box-shadow to align with block's min height.
+		&:focus::after {
+			min-height: auto;
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -88,11 +87,6 @@
 	min-height: 50px;
 }
 
-.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;
-}
-
 // When uploading background images, show a transparent overlay.
 .wp-block-cover > .components-drop-zone .components-drop-zone__content {
 	opacity: 0.8 !important;

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

@@ -11,6 +11,7 @@
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
 	/*rtl:raw: direction: ltr; */
+	overflow: hidden;
 
 	/**
 	 * Set a default background color for has-background-dim _unless_ it includes another