Fix resizing items to top and left with GridItemResizer

packages/block-editor/src/components/block-popover/cover.js

@@ -10,7 +10,14 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 import BlockPopover from '.';
 
 function BlockPopoverCover(
-	{ clientId, bottomClientId, children, shift = false, ...props },
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
 	ref
 ) {
 	bottomClientId ??= clientId;
@@ -26,7 +33,10 @@ function BlockPopoverCover(
 			{ ...props }
 		>
 			{ selectedElement && clientId === bottomClientId ? (
-				<CoverContainer selectedElement={ selectedElement }>
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
 					{ children }
 				</CoverContainer>
 			) : (
@@ -36,7 +46,11 @@ function BlockPopoverCover(
 	);
 }
 
-function CoverContainer( { selectedElement, children } ) {
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
 	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
 	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
 
@@ -54,8 +68,9 @@ function CoverContainer( { selectedElement, children } ) {
 			position: 'absolute',
 			width,
 			height,
+			...additionalStyles,
 		};
-	}, [ width, height ] );
+	}, [ width, height, additionalStyles ] );
 
 	return <div style={ style }>{ children }</div>;
 }

packages/block-editor/src/components/grid-visualizer/grid-item-resizer.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { ResizableBox } from '@wordpress/components';
+import { useState, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,14 +13,89 @@ import { getComputedCSS } from './utils';
 
 export function GridItemResizer( { clientId, onChange } ) {
 	const blockElement = useBlockElement( clientId );
+	const rootBlockElement = blockElement?.parentElement;
+	const [ resizeDirection, setResizeDirection ] = useState( null );
+
+	/*
+	 * Resizer dummy is an empty div that exists only so we can
+	 * get the bounding client rect of the resizer element. This is
+	 * necessary because the resizer exists outside of the iframe, so
+	 * its bounding client rect isn't the same as the block element's.
+	 */
+	const resizerRef = useRef( null );
+
 	if ( ! blockElement ) {
 		return null;
 	}
+
+	const justification = {
+		right: 'flex-start',
+		left: 'flex-end',
+	};
+
+	const alignment = {
+		top: 'flex-end',
+		bottom: 'flex-start',
+	};
+
+	const styles = {
+		display: 'flex',
+		justifyContent: 'center',
+		alignItems: 'center',
+		...( justification[ resizeDirection ] && {
+			justifyContent: justification[ resizeDirection ],
+		} ),
+		...( alignment[ resizeDirection ] && {
+			alignItems: alignment[ resizeDirection ],
+		} ),
+	};
+
+	const blockClientRect = blockElement.getBoundingClientRect();
+	const rootBlockClientRect = rootBlockElement.getBoundingClientRect();
+
+	/*
+	 * The bounding element is equivalent to the root block element, but
+	 * its bounding client rect is modified to account for the resizer
+	 * being outside of the editor iframe.
+	 */
+	const boundingElement = {
+		offsetWidth: rootBlockElement.offsetWidth,
+		offsetHeight: rootBlockElement.offsetHeight,
+		getBoundingClientRect: () => {
+			const resizerTop = resizerRef.current?.getBoundingClientRect()?.top;
+			// Fallback value of 60 to account for editor top bar height.
+			const heightDifference = resizerTop
+				? resizerTop - blockClientRect.top
+				: 60;
+			return {
+				bottom: rootBlockClientRect.bottom + heightDifference,
+				height: rootBlockElement.offsetHeight,
+				left: rootBlockClientRect.left,
+				right: rootBlockClientRect.right,
+				top: rootBlockClientRect.top + heightDifference,
+				width: rootBlockClientRect.width,
+				x: rootBlockClientRect.x,
+				y: rootBlockClientRect.y + heightDifference,
+			};
+		},
+	};
+
+	/*
+	 * Only enable resizing to a side if that side is not on the
+	 * edge of the grid.
+	 */
+	const enableTop = blockClientRect.top > rootBlockClientRect.top;
+	const enableBottom = blockClientRect.bottom < rootBlockClientRect.bottom;
+	const enableLeft = blockClientRect.left > rootBlockClientRect.left;
+	const enableRight = blockClientRect.right < rootBlockClientRect.right;
+
 	return (
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
 			clientId={ clientId }
 			__unstablePopoverSlot="block-toolbar"
+			additionalStyles={ styles }
+			__unstableContentRef={ resizerRef }
 		>
 			<ResizableBox
 				className="block-editor-grid-item-resizer__box"
@@ -28,15 +104,41 @@ export function GridItemResizer( { clientId, onChange } ) {
 					height: '100%',
 				} }
 				enable={ {
-					bottom: true,
+					bottom: enableBottom,
 					bottomLeft: false,
 					bottomRight: false,
-					left: false,
-					right: true,
-					top: false,
+					left: enableLeft,
+					right: enableRight,
+					top: enableTop,
 					topLeft: false,
 					topRight: false,
 				} }
+				bounds={ boundingElement }
+				boundsByDirection
+				onResizeStart={ ( event, direction ) => {
+					/*
+					 * The container justification and alignment need to be set
+					 * according to the direction the resizer is being dragged in,
+					 * so that it resizes in the right direction.
+					 */
+					setResizeDirection( direction );
+
+					/*
+					 * The mouseup event on the resize handle doesn't trigger if the mouse
+					 * isn't directly above the handle, so we try to detect if it happens
+					 * outside the grid and dispatch a mouseup event on the handle.
+					 */
+					const rootElementParent = rootBlockElement.parentElement;
+					rootElementParent.addEventListener(
+						'mouseup',
+						() => {
+							event.target.dispatchEvent(
+								new Event( 'mouseup', { bubbles: true } )
+							);
+						},
+						true
+					);
+				} }
 				onResizeStop={ ( event, direction, boxElement ) => {
 					const gridElement = blockElement.parentElement;
 					const columnGap = parseFloat(
@@ -53,28 +155,22 @@ export function GridItemResizer( { clientId, onChange } ) {
 						getComputedCSS( gridElement, 'grid-template-rows' ),
 						rowGap
 					);
+					const rect = new window.DOMRect(
+						blockElement.offsetLeft + boxElement.offsetLeft,
+						blockElement.offsetTop + boxElement.offsetTop,
+						boxElement.offsetWidth,
+						boxElement.offsetHeight
+					);
 					const columnStart =
-						getClosestTrack(
-							gridColumnTracks,
-							blockElement.offsetLeft
-						) + 1;
+						getClosestTrack( gridColumnTracks, rect.left ) + 1;
 					const rowStart =
-						getClosestTrack(
-							gridRowTracks,
-							blockElement.offsetTop
-						) + 1;
+						getClosestTrack( gridRowTracks, rect.top ) + 1;
 					const columnEnd =
-						getClosestTrack(
-							gridColumnTracks,
-							blockElement.offsetLeft + boxElement.offsetWidth,
-							'end'
-						) + 1;
+						getClosestTrack( gridColumnTracks, rect.right, 'end' ) +
+						1;
 					const rowEnd =
-						getClosestTrack(
-							gridRowTracks,
-							blockElement.offsetTop + boxElement.offsetHeight,
-							'end'
-						) + 1;
+						getClosestTrack( gridRowTracks, rect.bottom, 'end' ) +
+						1;
 					onChange( {
 						columnSpan: columnEnd - columnStart + 1,
 						rowSpan: rowEnd - rowStart + 1,

packages/block-editor/src/components/grid-visualizer/style.scss

@@ -31,3 +31,4 @@
 		pointer-events: all !important;
 	}
 }
+