@wordpress/block-editor 13.1.0 → 13.3.0

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

@@ -0,0 +1,384 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, forwardRef, useMemo } 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';
+import ButtonBlockAppender from '../button-block-appender';
+
+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?.isManualPlacement &&
+		window.__experimentalEnableGridInteractivity;
+	return (
+		<GridVisualizerGrid
+			gridClientId={ clientId }
+			gridElement={ gridElement }
+			isManualGrid={ isManualGrid }
+			ref={ contentRef }
+		/>
+	);
+}
+
+const GridVisualizerGrid = forwardRef(
+	( { gridClientId, gridElement, isManualGrid }, ref ) => {
+		const [ gridInfo, setGridInfo ] = useState( () =>
+			getGridInfo( gridElement )
+		);
+		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
+
+		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={ gridClientId }
+				__unstablePopoverSlot="block-toolbar"
+			>
+				<div
+					ref={ ref }
+					className="block-editor-grid-visualizer__grid"
+					style={ gridInfo.style }
+				>
+					{ isManualGrid ? (
+						<ManualGridVisualizer
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+						/>
+					) : (
+						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+							<GridVisualizerCell
+								key={ i }
+								color={ gridInfo.currentColor }
+							/>
+						) )
+					) }
+				</div>
+			</BlockPopoverCover>
+		);
+	}
+);
+
+function ManualGridVisualizer( { gridClientId, gridInfo } ) {
+	const [ highlightedRect, setHighlightedRect ] = useState( null );
+
+	const gridItems = useSelect(
+		( select ) => select( blockEditorStore ).getBlocks( gridClientId ),
+		[ gridClientId ]
+	);
+	const occupiedRects = useMemo( () => {
+		const rects = [];
+		for ( const block of gridItems ) {
+			const {
+				columnStart,
+				rowStart,
+				columnSpan = 1,
+				rowSpan = 1,
+			} = block.attributes.style?.layout || {};
+			if ( ! columnStart || ! rowStart ) {
+				continue;
+			}
+			rects.push(
+				new GridRect( {
+					columnStart,
+					rowStart,
+					columnSpan,
+					rowSpan,
+				} )
+			);
+		}
+		return rects;
+	}, [ gridItems ] );
+
+	return range( 1, gridInfo.numRows ).map( ( row ) =>
+		range( 1, gridInfo.numColumns ).map( ( column ) => {
+			const isCellOccupied = occupiedRects.some( ( rect ) =>
+				rect.contains( column, row )
+			);
+			const isHighlighted =
+				highlightedRect?.contains( column, row ) ?? false;
+			return (
+				<GridVisualizerCell
+					key={ `${ row }-${ column }` }
+					color={ gridInfo.currentColor }
+					className={ isHighlighted && 'is-highlighted' }
+				>
+					{ isCellOccupied ? (
+						<GridVisualizerDropZone
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) : (
+						<GridVisualizerAppender
+							column={ column }
+							row={ row }
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+							setHighlightedRect={ setHighlightedRect }
+						/>
+					) }
+				</GridVisualizerCell>
+			);
+		} )
+	);
+}
+
+function GridVisualizerCell( { color, children, className } ) {
+	return (
+		<div
+			className={ clsx(
+				'block-editor-grid-visualizer__cell',
+				className
+			) }
+			style={ {
+				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+				color,
+			} }
+		>
+			{ children }
+		</div>
+	);
+}
+
+function useGridVisualizerDropZone(
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect
+) {
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	return 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 ],
+				getBlockRootClientId( srcClientId ),
+				gridClientId,
+				getNumberOfBlocksBeforeCell( column, row )
+			);
+		},
+	} );
+}
+
+function GridVisualizerDropZone( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
+	return (
+		<div
+			className="block-editor-grid-visualizer__drop-zone"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+		/>
+	);
+}
+
+function GridVisualizerAppender( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
+	const {
+		updateBlockAttributes,
+		moveBlocksToPosition,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		gridInfo.numColumns
+	);
+
+	return (
+		<ButtonBlockAppender
+			rootClientId={ gridClientId }
+			className="block-editor-grid-visualizer__appender"
+			ref={ useGridVisualizerDropZone(
+				column,
+				row,
+				gridClientId,
+				gridInfo,
+				setHighlightedRect
+			) }
+			style={ {
+				color: gridInfo.currentColor,
+			} }
+			onSelect={ ( block ) => {
+				if ( ! block ) {
+					return;
+				}
+				updateBlockAttributes( block.clientId, {
+					style: {
+						layout: {
+							columnStart: column,
+							rowStart: row,
+						},
+					},
+				} );
+				__unstableMarkNextChangeAsNotPersistent();
+				moveBlocksToPosition(
+					[ block.clientId ],
+					gridClientId,
+					gridClientId,
+					getNumberOfBlocksBeforeCell( column, row )
+				);
+			} }
+		/>
+	);
+}
+
+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,98 @@
+.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-inserter * {
+			pointer-events: auto;
+		}
+	}
+}
+
+.block-editor-grid-visualizer__grid {
+	display: grid;
+}
+
+.block-editor-grid-visualizer__cell {
+	display: grid;
+	position: relative;
+
+	.block-editor-inserter {
+		color: inherit;
+		z-index: 32;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		overflow: hidden;
+
+		.block-editor-grid-visualizer__appender {
+			box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor  20%, #0000);
+			color: inherit;
+			overflow: hidden;
+			height: 100%;
+			width: 100%;
+			padding: 0 !important;
+			opacity: 0;
+		}
+
+	}
+
+	&.is-highlighted {
+		.block-editor-inserter,
+		.block-editor-grid-visualizer__drop-zone {
+			background: var(--wp-admin-theme-color);
+		}
+	}
+
+	&:hover .block-editor-grid-visualizer__appender,
+	.block-editor-grid-visualizer__appender:focus {
+		opacity: 1;
+		background-color: color-mix(in srgb, currentColor  20%, #0000);
+	}
+}
+
+.block-editor-grid-visualizer__drop-zone {
+	background: rgba($gray-400, 0.1);
+	width: 100%;
+	height: 100%;
+	grid-column: 1;
+	grid-row: 1;
+
+	// 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;
+}
+
+.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,170 @@
+/**
+ * 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, isManualPlacement } = gridLayout;
+
+		if ( isManualPlacement ) {
+			const rects = [];
+
+			// 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 || {};
+				if ( ! columnStart || ! rowStart ) {
+					continue;
+				}
+				rects.push(
+					new GridRect( {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+					} )
+				);
+			}
+
+			// 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 = 1,
+					rowSpan = 1,
+				} = attributes.style?.layout || {};
+				if ( columnStart && rowStart ) {
+					continue;
+				}
+				const [ newColumnStart, newRowStart ] = getFirstEmptyCell(
+					rects,
+					columnCount,
+					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,
+						},
+					},
+				};
+			}
+
+			// Ensure there's enough rows to fit all blocks.
+			const bottomMostRow = Math.max( ...rects.map( ( r ) => r.rowEnd ) );
+			if ( ! rowCount || rowCount < bottomMostRow ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: bottomMostRow,
+					},
+				};
+			}
+		} 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,
+						},
+					};
+				}
+			}
+
+			// Remove row styles in auto mode
+			if ( rowCount ) {
+				updates[ gridClientId ] = {
+					layout: {
+						...gridLayout,
+						rowCount: undefined,
+					},
+				};
+			}
+		}
+
+		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, columnSpan = 1, rowSpan = 1 ) {
+	for ( let row = 1; ; 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 ];
+			}
+		}
+	}
+}