@wordpress/block-editor 13.1.0 → 13.2.0

package/src/components/{grid-visualizer → grid}/grid-item-resizer.js

@@ -9,11 +9,17 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
-import { getComputedCSS } from './utils';
+import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 
-export function GridItemResizer( { clientId, bounds, onChange } ) {
+export function GridItemResizer( {
+	clientId,
+	bounds,
+	onChange,
+	parentLayout,
+} ) {
 	const blockElement = useBlockElement( clientId );
 	const rootBlockElement = blockElement?.parentElement;
+	const { columnCount } = parentLayout;
 
 	if ( ! blockElement || ! rootBlockElement ) {
 		return null;
@@ -26,6 +32,9 @@ export function GridItemResizer( { clientId, bounds, onChange } ) {
 			blockElement={ blockElement }
 			rootBlockElement={ rootBlockElement }
 			onChange={ onChange }
+			isManualGrid={
+				!! columnCount && window.__experimentalEnableGridInteractivity
+			}
 		/>
 	);
 }
@@ -36,6 +45,7 @@ function GridItemResizerInner( {
 	blockElement,
 	rootBlockElement,
 	onChange,
+	isManualGrid,
 } ) {
 	const [ resizeDirection, setResizeDirection ] = useState( null );
 	const [ enableSide, setEnableSide ] = useState( {
@@ -171,59 +181,11 @@ function GridItemResizerInner( {
 					onChange( {
 						columnSpan: columnEnd - columnStart + 1,
 						rowSpan: rowEnd - rowStart + 1,
+						columnStart: isManualGrid ? columnStart : undefined,
+						rowStart: isManualGrid ? rowStart : undefined,
 					} );
 				} }
 			/>
 		</BlockPopoverCover>
 	);
 }
-
-/**
- * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
- * position in pixels of each grid track.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {string} template The grid-template-columns or grid-template-rows CSS property value.
- *                          Only supports fixed sizes in pixels.
- * @param {number} gap      The gap between grid tracks in pixels.
- *
- * @return {Array<{start: number, end: number}>} An array of objects with the start and end
- *                                               position in pixels of each grid track.
- */
-function getGridTracks( template, gap ) {
-	const tracks = [];
-	for ( const size of template.split( ' ' ) ) {
-		const previousTrack = tracks[ tracks.length - 1 ];
-		const start = previousTrack ? previousTrack.end + gap : 0;
-		const end = start + parseFloat( size );
-		tracks.push( { start, end } );
-	}
-	return tracks;
-}
-
-/**
- * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
- * that position.
- *
- * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
- *
- * @param {Array<{start: number, end: number}>} tracks   An array of objects with the start and end
- *                                                       position in pixels of each grid track.
- * @param {number}                              position The position in pixels.
- * @param {string}                              edge     The edge of the track to compare the
- *                                                       position to. Either 'start' or 'end'.
- *
- * @return {number} The index of the closest track to the position. 0-based, unlike CSS grid which
- *                  is 1-based.
- */
-function getClosestTrack( tracks, position, edge = 'start' ) {
-	return tracks.reduce(
-		( closest, track, index ) =>
-			Math.abs( track[ edge ] - position ) <
-			Math.abs( tracks[ closest ][ edge ] - position )
-				? index
-				: closest,
-		0
-	);
-}

package/src/components/grid/grid-visualizer.js

@@ -0,0 +1,267 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopoverCover from '../block-popover/cover';
+import { range, GridRect, getGridInfo } from './utils';
+import { store as blockEditorStore } from '../../store';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+
+export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
+	const isDistractionFree = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().isDistractionFree,
+		[]
+	);
+	const gridElement = useBlockElement( clientId );
+
+	if ( isDistractionFree || ! gridElement ) {
+		return null;
+	}
+
+	const isManualGrid =
+		parentLayout?.columnCount &&
+		window.__experimentalEnableGridInteractivity;
+	return (
+		<GridVisualizerGrid
+			clientId={ clientId }
+			gridElement={ gridElement }
+			isManualGrid={ isManualGrid }
+			ref={ contentRef }
+		/>
+	);
+}
+
+const GridVisualizerGrid = forwardRef(
+	( { clientId, gridElement, isManualGrid }, ref ) => {
+		const [ gridInfo, setGridInfo ] = useState( () =>
+			getGridInfo( gridElement )
+		);
+		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
+		const [ highlightedRect, setHighlightedRect ] = useState( null );
+
+		useEffect( () => {
+			const observers = [];
+			for ( const element of [ gridElement, ...gridElement.children ] ) {
+				const observer = new window.ResizeObserver( () => {
+					setGridInfo( getGridInfo( gridElement ) );
+				} );
+				observer.observe( element );
+				observers.push( observer );
+			}
+			return () => {
+				for ( const observer of observers ) {
+					observer.disconnect();
+				}
+			};
+		}, [ gridElement ] );
+
+		useEffect( () => {
+			function onGlobalDrag() {
+				setIsDroppingAllowed( true );
+			}
+			function onGlobalDragEnd() {
+				setIsDroppingAllowed( false );
+			}
+			document.addEventListener( 'drag', onGlobalDrag );
+			document.addEventListener( 'dragend', onGlobalDragEnd );
+			return () => {
+				document.removeEventListener( 'drag', onGlobalDrag );
+				document.removeEventListener( 'dragend', onGlobalDragEnd );
+			};
+		}, [] );
+
+		return (
+			<BlockPopoverCover
+				className={ clsx( 'block-editor-grid-visualizer', {
+					'is-dropping-allowed': isDroppingAllowed,
+				} ) }
+				clientId={ clientId }
+				__unstablePopoverSlot="block-toolbar"
+			>
+				<div
+					ref={ ref }
+					className="block-editor-grid-visualizer__grid"
+					style={ gridInfo.style }
+				>
+					{ isManualGrid
+						? range( 1, gridInfo.numRows ).map( ( row ) =>
+								range( 1, gridInfo.numColumns ).map(
+									( column ) => (
+										<GridVisualizerCell
+											key={ `${ row }-${ column }` }
+											color={ gridInfo.currentColor }
+										>
+											<GridVisualizerDropZone
+												column={ column }
+												row={ row }
+												gridClientId={ clientId }
+												gridInfo={ gridInfo }
+												highlightedRect={
+													highlightedRect
+												}
+												setHighlightedRect={
+													setHighlightedRect
+												}
+											/>
+										</GridVisualizerCell>
+									)
+								)
+						  )
+						: Array.from(
+								{ length: gridInfo.numItems },
+								( _, i ) => (
+									<GridVisualizerCell
+										key={ i }
+										color={ gridInfo.currentColor }
+									/>
+								)
+						  ) }
+				</div>
+			</BlockPopoverCover>
+		);
+	}
+);
+
+function GridVisualizerCell( { color, children } ) {
+	return (
+		<div
+			className="block-editor-grid-visualizer__cell"
+			style={ {
+				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+			} }
+		>
+			{ children }
+		</div>
+	);
+}
+
+function GridVisualizerDropZone( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	highlightedRect,
+	setHighlightedRect,
+} ) {
+	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	const ref = useDropZoneWithValidation( {
+		validateDrag( srcClientId ) {
+			const attributes = getBlockAttributes( srcClientId );
+			const rect = new GridRect( {
+				columnStart: column,
+				rowStart: row,
+				columnSpan: attributes.style?.layout?.columnSpan,
+				rowSpan: attributes.style?.layout?.rowSpan,
+			} );
+			const isInBounds = new GridRect( {
+				columnSpan: gridInfo.numColumns,
+				rowSpan: gridInfo.numRows,
+			} ).containsRect( rect );
+			return isInBounds;
+		},
+		onDragEnter( srcClientId ) {
+			const attributes = getBlockAttributes( srcClientId );
+			setHighlightedRect(
+				new GridRect( {
+					columnStart: column,
+					rowStart: row,
+					columnSpan: attributes.style?.layout?.columnSpan,
+					rowSpan: attributes.style?.layout?.rowSpan,
+				} )
+			);
+		},
+		onDragLeave() {
+			// onDragEnter can be called before onDragLeave if the user moves
+			// their mouse quickly, so only clear the highlight if it was set
+			// by this cell.
+			setHighlightedRect( ( prevHighlightedRect ) =>
+				prevHighlightedRect?.columnStart === column &&
+				prevHighlightedRect?.rowStart === row
+					? null
+					: prevHighlightedRect
+			);
+		},
+		onDrop( srcClientId ) {
+			setHighlightedRect( null );
+			const attributes = getBlockAttributes( srcClientId );
+			updateBlockAttributes( srcClientId, {
+				style: {
+					...attributes.style,
+					layout: {
+						...attributes.style?.layout,
+						columnStart: column,
+						rowStart: row,
+					},
+				},
+			} );
+			__unstableMarkNextChangeAsNotPersistent();
+			moveBlocksToPosition(
+				[ srcClientId ],
+				gridClientId,
+				gridClientId,
+				getNumberOfBlocksBeforeCell( column, row )
+			);
+		},
+	} );
+
+	const isHighlighted = highlightedRect?.contains( column, row ) ?? false;
+
+	return (
+		<div
+			ref={ ref }
+			className={ clsx( 'block-editor-grid-visualizer__drop-zone', {
+				'is-highlighted': isHighlighted,
+			} ) }
+		/>
+	);
+}
+
+function useDropZoneWithValidation( {
+	validateDrag,
+	onDragEnter,
+	onDragLeave,
+	onDrop,
+} ) {
+	const { getDraggedBlockClientIds } = useSelect( blockEditorStore );
+	return useDropZone( {
+		onDragEnter() {
+			const [ srcClientId ] = getDraggedBlockClientIds();
+			if ( srcClientId && validateDrag( srcClientId ) ) {
+				onDragEnter( srcClientId );
+			}
+		},
+		onDragLeave() {
+			onDragLeave();
+		},
+		onDrop() {
+			const [ srcClientId ] = getDraggedBlockClientIds();
+			if ( srcClientId && validateDrag( srcClientId ) ) {
+				onDrop( srcClientId );
+			}
+		},
+	} );
+}

package/src/components/grid/index.js

@@ -0,0 +1,4 @@
+export { GridVisualizer } from './grid-visualizer';
+export { GridItemResizer } from './grid-item-resizer';
+export { GridItemMovers } from './grid-item-movers';
+export { useGridLayoutSync } from './use-grid-layout-sync';

package/src/components/grid/style.scss

@@ -0,0 +1,63 @@
+.block-editor-grid-visualizer {
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-visualizer.block-editor-grid-visualizer {
+		z-index: z-index(".block-editor-grid-visualizer");
+
+		.components-popover__content * {
+			pointer-events: none;
+		}
+
+		&.is-dropping-allowed {
+			.block-editor-grid-visualizer__drop-zone {
+				pointer-events: all;
+			}
+		}
+	}
+}
+
+.block-editor-grid-visualizer__grid {
+	display: grid;
+}
+
+.block-editor-grid-visualizer__cell {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
+.block-editor-grid-visualizer__drop-zone {
+	background: rgba($gray-400, 0.1);
+	border: $border-width dotted $gray-300;
+	width: 100%;
+	height: 100%;
+
+	// Make drop zone 8x8 at minimum so that it's easier to drag into. This will overflow the parent.
+	min-width: $grid-unit-10;
+	min-height: $grid-unit-10;
+
+	&.is-highlighted {
+		background: var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-grid-item-resizer {
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+		z-index: z-index(".block-editor-grid-visualizer");
+
+		.components-popover__content * {
+			pointer-events: none;
+		}
+	}
+}
+
+.block-editor-grid-item-resizer__box {
+	border: $border-width solid var(--wp-admin-theme-color);
+
+	.components-resizable-box__handle {
+		// Specificity to override the pointer-events set by .components-popover.
+		&.components-resizable-box__handle.components-resizable-box__handle {
+			pointer-events: all;
+		}
+	}
+}

package/src/components/grid/use-get-number-of-blocks-before-cell.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export function useGetNumberOfBlocksBeforeCell( gridClientId, numColumns ) {
+	const { getBlockOrder, getBlockAttributes } = useSelect( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = ( column, row ) => {
+		const targetIndex = ( row - 1 ) * numColumns + column - 1;
+
+		let count = 0;
+		for ( const clientId of getBlockOrder( gridClientId ) ) {
+			const { columnStart, rowStart } =
+				getBlockAttributes( clientId ).style?.layout ?? {};
+			const cellIndex = ( rowStart - 1 ) * numColumns + columnStart - 1;
+			if ( cellIndex < targetIndex ) {
+				count++;
+			}
+		}
+		return count;
+	};
+
+	return getNumberOfBlocksBeforeCell;
+}

package/src/components/grid/use-grid-layout-sync.js

@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { GridRect } from './utils';
+
+export function useGridLayoutSync( { clientId: gridClientId } ) {
+	const { gridLayout, blockOrder } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getBlockOrder } =
+				select( blockEditorStore );
+			return {
+				gridLayout: getBlockAttributes( gridClientId ).layout ?? {},
+				blockOrder: getBlockOrder( gridClientId ),
+			};
+		},
+		[ gridClientId ]
+	);
+
+	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		const updates = {};
+
+		const { columnCount, rowCount = 2 } = gridLayout;
+		const isManualGrid = !! columnCount;
+
+		if ( isManualGrid ) {
+			const rects = [];
+			let cellsTaken = 0;
+
+			// Respect the position of blocks that already have a columnStart and rowStart value.
+			for ( const clientId of blockOrder ) {
+				const attributes = getBlockAttributes( clientId );
+				const {
+					columnStart,
+					rowStart,
+					columnSpan = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout || {};
+				cellsTaken += columnSpan * rowSpan;
+				if ( ! columnStart || ! rowStart ) {
+					continue;
+				}
+				rects.push(
+					new GridRect( {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+					} )
+				);
+			}
+
+			// Ensure there's enough rows to fit all blocks.
+			const minimumNeededRows = Math.ceil( cellsTaken / columnCount );
+			if ( rowCount < minimumNeededRows ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: minimumNeededRows,
+					},
+				};
+			}
+
+			// When in manual mode, ensure that every block has a columnStart and rowStart value.
+			for ( const clientId of blockOrder ) {
+				const attributes = getBlockAttributes( clientId );
+				const { columnStart, rowStart, columnSpan, rowSpan } =
+					attributes.style?.layout || {};
+				if ( columnStart && rowStart ) {
+					continue;
+				}
+				const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
+					rects,
+					columnCount,
+					minimumNeededRows,
+					columnSpan,
+					rowSpan
+				);
+				rects.push(
+					new GridRect( {
+						columnStart: newColumnStart,
+						rowStart: newRowStart,
+						columnSpan,
+						rowSpan,
+					} )
+				);
+				updates[ clientId ] = {
+					style: {
+						...attributes.style,
+						layout: {
+							...attributes.style?.layout,
+							columnStart: newColumnStart,
+							rowStart: newRowStart,
+						},
+					},
+				};
+			}
+		} else {
+			// When in auto mode, remove all of the columnStart and rowStart values.
+			for ( const clientId of blockOrder ) {
+				const attributes = getBlockAttributes( clientId );
+				const { columnStart, rowStart, ...layout } =
+					attributes.style?.layout || {};
+				// Only update attributes if columnStart or rowStart are set.
+				if ( columnStart || rowStart ) {
+					updates[ clientId ] = {
+						style: {
+							...attributes.style,
+							layout,
+						},
+					};
+				}
+			}
+		}
+
+		if ( Object.keys( updates ).length ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes(
+				Object.keys( updates ),
+				updates,
+				/* uniqueByBlock: */ true
+			);
+		}
+	}, [
+		// Actual deps to sync:
+		gridClientId,
+		gridLayout,
+		blockOrder,
+		// Needed for linter:
+		__unstableMarkNextChangeAsNotPersistent,
+		getBlockAttributes,
+		updateBlockAttributes,
+	] );
+}
+
+function getFirstEmptyCell(
+	rects,
+	columnCount,
+	rowCount,
+	columnSpan = 1,
+	rowSpan = 1
+) {
+	for ( let row = 1; row <= rowCount; row++ ) {
+		for ( let column = 1; column <= columnCount; column++ ) {
+			const rect = new GridRect( {
+				columnStart: column,
+				rowStart: row,
+				columnSpan,
+				rowSpan,
+			} );
+			if ( ! rects.some( ( r ) => r.intersectsRect( rect ) ) ) {
+				return [ column, row ];
+			}
+		}
+	}
+	return [ 1, 1 ];
+}