Add Grid interactivity

packages/base-styles/_z-index.scss

@@ -108,6 +108,9 @@ $z-layers: (
 	// Above the block list and the header.
 	".block-editor-block-popover": 31,
 
+	// Below the block toolbar.
+	".block-editor-grid-visualizer": 30,
+
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,
 

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

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { ResizableBox } from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopover from '../block-popover';
+import { getComputedCSS } from './utils';
+
+export function GridItemResizer( { clientId, onChange } ) {
+	const resizableRef = useRef();
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+	return (
+		<BlockPopover
+			className="block-editor-grid-item-resizer"
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<ResizableBox
+				ref={ resizableRef }
+				className="block-editor-grid-item-resizer__box"
+				defaultSize={ {
+					width: '100%',
+					height: '100%',
+				} }
+				enable={ {
+					bottom: true,
+					bottomLeft: false,
+					bottomRight: false,
+					left: false,
+					right: true,
+					top: false,
+					topLeft: false,
+					topRight: false,
+				} }
+				onResizeStop={ ( event, direction, element ) => {
+					const boxWidth = element.offsetWidth;
+					const boxHeight = element.offsetHeight;
+					const { columnGap, rowGap, itemWidth, itemHeight } =
+						getGridDimensions( blockElement.parentElement );
+					const columnSpan = Math.round(
+						( columnGap + boxWidth ) / ( columnGap + itemWidth )
+					);
+					const rowSpan = Math.round(
+						( rowGap + boxHeight ) / ( rowGap + itemHeight )
+					);
+					const newBoxWidth =
+						columnSpan * itemWidth + ( columnSpan - 1 ) * columnGap;
+					const newBoxHeight =
+						rowSpan * itemHeight + ( rowSpan - 1 ) * rowGap;
+					onChange( {
+						columnSpan,
+						rowSpan,
+					} );
+					resizableRef.current.updateSize( {
+						width: newBoxWidth,
+						height: newBoxHeight,
+					} );
+				} }
+			/>
+		</BlockPopover>
+	);
+}
+
+function getGridDimensions( element ) {
+	const width = element.clientWidth;
+	const height = element.clientHeight;
+	const paddingX =
+		parseFloat( getComputedCSS( element, 'padding-left' ) ) +
+		parseFloat( getComputedCSS( element, 'padding-right' ) );
+	const paddingY =
+		parseFloat( getComputedCSS( element, 'padding-top' ) ) +
+		parseFloat( getComputedCSS( element, 'padding-bottom' ) );
+	const gridTemplateColumns = getComputedCSS(
+		element,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS( element, 'grid-template-rows' );
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const columnGap = parseFloat( getComputedCSS( element, 'column-gap' ) );
+	const rowGap = parseFloat( getComputedCSS( element, 'row-gap' ) );
+	const totalColumnGap = columnGap * ( numColumns - 1 );
+	const totalRowGap = rowGap * ( numRows - 1 );
+	const itemWidth = ( width - paddingX - totalColumnGap ) / numColumns;
+	const itemHeight = ( height - paddingY - totalRowGap ) / numRows;
+	return {
+		columnGap,
+		rowGap,
+		itemWidth,
+		itemHeight,
+	};
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopover from '../block-popover';
+import { getComputedCSS } from './utils';
+
+export function GridVisualizer( { clientId } ) {
+	const blockElement = useBlockElement( clientId );
+	if ( ! blockElement ) {
+		return null;
+	}
+	const gridTemplateColumns = getComputedCSS(
+		blockElement,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS(
+		blockElement,
+		'grid-template-rows'
+	);
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const numItems = numColumns * numRows;
+	return (
+		<BlockPopover
+			className="block-editor-grid-visualizer"
+			clientId={ clientId }
+			__unstableCoverTarget
+			__unstablePopoverSlot="block-toolbar"
+		>
+			<div
+				className="block-editor-grid-visualizer__grid"
+				style={ {
+					gridTemplateColumns,
+					gridTemplateRows,
+					gap: getComputedCSS( blockElement, 'gap' ),
+					padding: getComputedCSS( blockElement, 'padding' ),
+				} }
+			>
+				{ Array.from( { length: numItems }, ( _, i ) => (
+					<div
+						key={ i }
+						className="block-editor-grid-visualizer__item"
+					/>
+				) ) }
+			</div>
+		</BlockPopover>
+	);
+}

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

@@ -0,0 +1,2 @@
+export { GridVisualizer } from './grid-visualizer';
+export { GridItemResizer } from './grid-item-resizer';

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

@@ -0,0 +1,29 @@
+// TODO: Specificity hacks to get rid of all these darn !importants.
+
+.block-editor-grid-visualizer {
+	z-index: z-index(".block-editor-grid-visualizer") !important;
+}
+
+.block-editor-grid-visualizer .components-popover__content * {
+	pointer-events: none !important;
+}
+
+.block-editor-grid-visualizer__grid {
+	display: grid;
+}
+
+.block-editor-grid-visualizer__item {
+	border: $border-width dashed $gray-300;
+}
+
+.block-editor-grid-item-resizer .components-popover__content * {
+	pointer-events: none !important;
+}
+
+.block-editor-grid-item-resizer__box {
+	border: $border-width solid var(--wp-admin-theme-color);
+
+	.components-resizable-box__handle {
+		pointer-events: all !important;
+	}
+}

packages/block-editor/src/components/grid-visualizer/utils.js

@@ -0,0 +1,5 @@
+export function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}

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

@@ -42,6 +42,7 @@ createBlockEditFilter(
 		contentLockUI,
 		blockHooks,
 		blockRenaming,
+		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [

packages/block-editor/src/hooks/layout-child.js

@@ -9,6 +9,8 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
+import { useLayout } from '../components/block-list/layout';
+import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
@@ -93,8 +95,42 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	return { className: `wp-container-content-${ id }` };
 }
 
+function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
+	const rootClientId = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+	if ( parentLayout.type !== 'grid' ) {
+		return null;
+	}
+	return (
+		<>
+			<GridVisualizer clientId={ rootClientId } />
+			<GridItemResizer
+				clientId={ clientId }
+				onChange={ ( { rowSpan, columnSpan } ) => {
+					setAttributes( {
+						style: {
+							...style,
+							layout: {
+								...style?.layout,
+								rowSpan,
+								columnSpan,
+							},
+						},
+					} );
+				} }
+			/>
+		</>
+	);
+}
+
 export default {
 	useBlockProps: useBlockPropsChildLayoutStyles,
+	edit: ChildLayoutControlsPure,
 	attributeKeys: [ 'style' ],
 	hasSupport() {
 		return true;

packages/block-editor/src/hooks/layout.js

@@ -135,7 +135,12 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	return css;
 }
 
-function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
+function LayoutPanelPure( {
+	layout,
+	setAttributes,
+	name: blockName,
+	clientId,
+} ) {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
@@ -266,13 +271,17 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 				</PanelBody>
@@ -282,6 +291,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					name={ blockName }
+					clientId={ clientId }
 				/>
 			) }
 		</>

packages/block-editor/src/layouts/grid.js

@@ -19,6 +19,7 @@ import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
+import { GridVisualizer } from '../components/grid-visualizer';
 
 const RANGE_CONTROL_MAX_VALUES = {
 	px: 600,
@@ -63,17 +64,26 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
+		clientId,
 	} ) {
-		return layout?.columnCount ? (
-			<GridLayoutColumnsControl layout={ layout } onChange={ onChange } />
-		) : (
-			<GridLayoutMinimumWidthControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+		return (
+			<>
+				{ layout?.columnCount ? (
+					<GridLayoutColumnsControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) : (
+					<GridLayoutMinimumWidthControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
+				<GridVisualizer clientId={ clientId } />
+			</>
 		);
 	},
-	toolBarControls: function DefaultLayoutToolbarControls() {
+	toolBarControls: function GridLayoutToolbarControls() {
 		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {

packages/block-editor/src/style.scss

@@ -28,6 +28,7 @@
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/global-styles/style.scss";
+@import "./components/grid-visualizer/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";