Cover: Add border support using ResizableBox via BlockPopover (#41153)

packages/base-styles/_z-index.scss

@@ -33,8 +33,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/iframe/index.js

@@ -71,7 +71,7 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'dragover' ];
+	const eventTypes = [ 'dragover', 'mousemove' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+
+export default function ResizableBoxPopover( {
+	clientId,
+	resizableBoxProps,
+	...props
+} ) {
+	return (
+		<BlockPopover
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot="block-toolbar"
+			shift={ false }
+			{ ...props }
+		>
+			<ResizableBox { ...resizableBoxProps } />
+		</BlockPopover>
+	);
+}

packages/block-editor/src/private-apis.js

@@ -6,6 +6,7 @@ import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import OffCanvasEditor from './components/off-canvas-editor';
 import LeafMoreMenu from './components/off-canvas-editor/leaf-more-menu';
+import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 
@@ -20,4 +21,5 @@ lock( privateApis, {
 	OffCanvasEditor,
 	PrivateInserter,
 	PrivateListView,
+	ResizableBoxPopover,
 } );

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

@@ -94,6 +94,18 @@
 				"blockGap": 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": true,

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 ] );
 
@@ -146,6 +146,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: minHeightUnit === 'px' ? minHeight : 'auto',
+			width: 'auto',
+		};
+	}, [ minHeight, minHeightUnit ] );
+
 	const minHeightWithUnit =
 		minHeight && minHeightUnit
 			? `${ minHeight }${ minHeightUnit }`
@@ -246,24 +254,50 @@ function CoverEdit( {
 		/>
 	);
 
+	const resizableCoverProps = {
+		className: 'block-library-cover__resize-container',
+		clientId,
+		height,
+		minHeight: minHeightWithUnit,
+		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 } />
+				) }
 				<TagName
 					{ ...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">
@@ -275,21 +309,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 }
-					/>
 				</TagName>
 			</>
 		);
@@ -318,22 +337,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"
@@ -404,6 +408,9 @@ function CoverEdit( {
 				/>
 				<div { ...innerBlocksProps } />
 			</TagName>
+			{ isSelected && (
+				<ResizableCoverPopover { ...resizableCoverProps } />
+			) }
 		</>
 	);
 }

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../private-apis';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+export default function ResizableCoverPopover( {
+	className,
+	height,
+	minHeight,
+	onResize,
+	onResizeStart,
+	onResizeStop,
+	showHandle,
+	size,
+	width,
+	...props
+} ) {
+	const { ResizableBoxPopover } = unlock( blockEditorPrivateApis );
+	const [ isResizing, setIsResizing ] = useState( false );
+	const dimensions = useMemo(
+		() => ( { height, minHeight, width } ),
+		[ minHeight, height, width ]
+	);
+
+	const resizableBoxProps = {
+		className: classnames( className, { 'is-resizing': isResizing } ),
+		enable: RESIZABLE_BOX_ENABLE_OPTION,
+		onResizeStart: ( _event, _direction, elt ) => {
+			onResizeStart( elt.clientHeight );
+			onResize( elt.clientHeight );
+		},
+		onResize: ( _event, _direction, elt ) => {
+			onResize( elt.clientHeight );
+			if ( ! isResizing ) {
+				setIsResizing( true );
+			}
+		},
+		onResizeStop: ( _event, _direction, elt ) => {
+			onResizeStop( elt.clientHeight );
+			setIsResizing( false );
+		},
+		showHandle,
+		size,
+		__experimentalShowTooltip: true,
+		__experimentalTooltipProps: {
+			axis: 'y',
+			position: 'bottom',
+			isVisible: isResizing,
+		},
+	};
+
+	return (
+		<ResizableBoxPopover
+			className="block-library-cover__resizable-box-popover"
+			__unstableRefreshSize={ dimensions }
+			resizableBoxProps={ resizableBoxProps }
+			{ ...props }
+		/>
+	);
+}