Grid interactivity: Experimenting with drag and drop to set column start and row start

packages/block-editor/src/components/child-layout-control/index.js

@@ -223,7 +223,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ columnStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.columnCount
+											? parentLayout.columnCount -
+											  ( columnSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 							<FlexItem style={ { width: '50%' } }>
@@ -241,7 +247,13 @@ export default function ChildLayoutControl( {
 									} }
 									value={ rowStart }
 									min={ 1 }
-									max={ parentLayout?.columnCount }
+									max={
+										parentLayout?.rowCount
+											? parentLayout.rowCount -
+											  ( rowSpan ?? 1 ) +
+											  1
+											: undefined
+									}
 								/>
 							</FlexItem>
 						</Flex>

packages/block-editor/src/components/grid-interactivity/grid-item-pin-toolbar-item.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { pin as pinIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { getGridItemRect } from './utils';
+
+export function GridItemPinToolbarItem( { clientId, layout, onChange } ) {
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+
+	const isPinned = !! layout?.columnStart || !! layout?.rowStart;
+
+	function unpinBlock() {
+		onChange( {
+			columnStart: undefined,
+			rowStart: undefined,
+		} );
+	}
+
+	function pinBlock() {
+		const rect = getGridItemRect( blockElement );
+		onChange( {
+			columnStart: rect.columnStart,
+			rowStart: rect.rowStart,
+		} );
+	}
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				icon={ pinIcon }
+				label={
+					isPinned ? __( 'Pinned to grid' ) : __( 'Pin to grid' )
+				}
+				isPressed={ isPinned }
+				onClick={ isPinned ? unpinBlock : pinBlock }
+			/>
+		</BlockControls>
+	);
+}

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

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { getGridRect } from './utils';
+
+export function GridItemResizer( { clientId, onChange } ) {
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+	return (
+		<BlockPopoverCover
+			className="block-editor-grid-item-resizer"
+			clientId={ clientId }
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<ResizableBox
+				className="block-editor-grid-item-resizer__box"
+				size={ {
+					width: '100%',
+					height: '100%',
+				} }
+				enable={ {
+					bottom: true,
+					bottomLeft: false,
+					bottomRight: false,
+					left: false,
+					right: true,
+					top: false,
+					topLeft: false,
+					topRight: false,
+				} }
+				onResizeStop={ ( event, direction, boxElement ) => {
+					const rect = getGridRect(
+						blockElement.parentElement,
+						new window.DOMRect(
+							blockElement.offsetLeft,
+							blockElement.offsetTop,
+							boxElement.offsetWidth,
+							boxElement.offsetHeight
+						)
+					);
+					onChange( {
+						columnSpan: rect.columnSpan,
+						rowSpan: rect.rowSpan,
+					} );
+				} }
+			/>
+		</BlockPopoverCover>
+	);
+}