@wordpress/block-editor 13.2.0 → 13.4.0

package/src/components/grid/grid-item-movers.js

@@ -1,10 +1,25 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToolbarButton } from '@wordpress/components';
-import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import {
+	VisuallyHidden,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronUp,
+	chevronDown,
+	chevronRight,
+} from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -32,97 +47,136 @@ export function GridItemMovers( {
 	const columnCount = parentLayout?.columnCount;
 	const rowCount = parentLayout?.rowCount;
 
-	const columnCountNumber = parseInt( columnCount, 10 );
-	const rowStartNumber = parseInt( rowStart, 10 );
-	const columnStartNumber = parseInt( columnStart, 10 );
-
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		gridClientId,
-		columnCountNumber
+		columnCount
 	);
 
 	return (
 		<BlockControls group="parent">
+			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
+				<GridItemMover
+					className="is-left-button"
+					icon={ chevronLeft }
+					label={ __( 'Move left' ) }
+					description={ __( 'Move left' ) }
+					isDisabled={ columnStart <= 1 }
+					onClick={ () => {
+						onChange( {
+							columnStart: columnStart - 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStart - 1,
+								rowStart
+							)
+						);
+					} }
+				/>
+				<div className="block-editor-grid-item-mover__move-vertical-button-container">
+					<GridItemMover
+						className="is-up-button"
+						icon={ chevronUp }
+						label={ __( 'Move up' ) }
+						description={ __( 'Move up' ) }
+						isDisabled={ rowStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart - 1
+								)
+							);
+						} }
+					/>
+					<GridItemMover
+						className="is-down-button"
+						icon={ chevronDown }
+						label={ __( 'Move down' ) }
+						description={ __( 'Move down' ) }
+						isDisabled={ rowCount && rowEnd >= rowCount }
+						onClick={ () => {
+							onChange( {
+								rowStart: rowStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart,
+									rowStart + 1
+								)
+							);
+						} }
+					/>
+				</div>
+				<GridItemMover
+					className="is-right-button"
+					icon={ chevronRight }
+					label={ __( 'Move right' ) }
+					description={ __( 'Move right' ) }
+					isDisabled={ columnCount && columnEnd >= columnCount }
+					onClick={ () => {
+						onChange( {
+							columnStart: columnStart + 1,
+						} );
+						__unstableMarkNextChangeAsNotPersistent();
+						moveBlocksToPosition(
+							[ blockClientId ],
+							gridClientId,
+							gridClientId,
+							getNumberOfBlocksBeforeCell(
+								columnStart + 1,
+								rowStart
+							)
+						);
+					} }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+
+function GridItemMover( {
+	className,
+	icon,
+	label,
+	isDisabled,
+	onClick,
+	description,
+} ) {
+	const instanceId = useInstanceId( GridItemMover );
+	const descriptionId = `block-editor-grid-item-mover-button__description-${ instanceId }`;
+	return (
+		<>
 			<ToolbarButton
-				icon={ arrowUp }
-				label={ __( 'Move block up' ) }
-				isDisabled={ rowStart <= 1 }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart - 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber - 1
-						)
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowDown }
-				label={ __( 'Move block down' ) }
-				isDisabled={ rowCount && rowEnd >= rowCount }
-				onClick={ () => {
-					onChange( {
-						rowStart: rowStart + 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber,
-							rowStartNumber + 1
-						)
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowLeft }
-				label={ __( 'Move block left' ) }
-				isDisabled={ columnStart <= 1 }
-				onClick={ () => {
-					onChange( {
-						columnStart: columnStartNumber - 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber - 1,
-							rowStartNumber
-						)
-					);
-				} }
-			/>
-			<ToolbarButton
-				icon={ arrowRight }
-				label={ __( 'Move block right' ) }
-				isDisabled={ columnCount && columnEnd >= columnCount }
-				onClick={ () => {
-					onChange( {
-						columnStart: columnStartNumber + 1,
-					} );
-					__unstableMarkNextChangeAsNotPersistent();
-					moveBlocksToPosition(
-						[ blockClientId ],
-						gridClientId,
-						gridClientId,
-						getNumberOfBlocksBeforeCell(
-							columnStartNumber + 1,
-							rowStartNumber
-						)
-					);
-				} }
+				className={ clsx(
+					'block-editor-grid-item-mover-button',
+					className
+				) }
+				icon={ icon }
+				label={ label }
+				aria-describedby={ descriptionId }
+				onClick={ isDisabled ? null : onClick }
+				disabled={ isDisabled }
+				accessibleWhenDisabled
 			/>
-		</BlockControls>
+			<VisuallyHidden id={ descriptionId }>
+				{ description }
+			</VisuallyHidden>
+		</>
 	);
 }

package/src/components/grid/grid-item-resizer.js

@@ -19,7 +19,7 @@ export function GridItemResizer( {
 } ) {
 	const blockElement = useBlockElement( clientId );
 	const rootBlockElement = blockElement?.parentElement;
-	const { columnCount } = parentLayout;
+	const { isManualPlacement } = parentLayout;
 
 	if ( ! blockElement || ! rootBlockElement ) {
 		return null;
@@ -33,7 +33,8 @@ export function GridItemResizer( {
 			rootBlockElement={ rootBlockElement }
 			onChange={ onChange }
 			isManualGrid={
-				!! columnCount && window.__experimentalEnableGridInteractivity
+				isManualPlacement &&
+				window.__experimentalEnableGridInteractivity
 			}
 		/>
 	);

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, forwardRef } from '@wordpress/element';
+import { useState, useEffect, forwardRef, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 
@@ -18,6 +18,7 @@ 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(
@@ -32,11 +33,11 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 	}
 
 	const isManualGrid =
-		parentLayout?.columnCount &&
+		parentLayout?.isManualPlacement &&
 		window.__experimentalEnableGridInteractivity;
 	return (
 		<GridVisualizerGrid
-			clientId={ clientId }
+			gridClientId={ clientId }
 			gridElement={ gridElement }
 			isManualGrid={ isManualGrid }
 			ref={ contentRef }
@@ -45,12 +46,11 @@ export function GridVisualizer( { clientId, contentRef, parentLayout } ) {
 }
 
 const GridVisualizerGrid = forwardRef(
-	( { clientId, gridElement, isManualGrid }, ref ) => {
+	( { gridClientId, gridElement, isManualGrid }, ref ) => {
 		const [ gridInfo, setGridInfo ] = useState( () =>
 			getGridInfo( gridElement )
 		);
 		const [ isDroppingAllowed, setIsDroppingAllowed ] = useState( false );
-		const [ highlightedRect, setHighlightedRect ] = useState( null );
 
 		useEffect( () => {
 			const observers = [];
@@ -88,59 +88,110 @@ const GridVisualizerGrid = forwardRef(
 				className={ clsx( 'block-editor-grid-visualizer', {
 					'is-dropping-allowed': isDroppingAllowed,
 				} ) }
-				clientId={ clientId }
-				__unstablePopoverSlot="block-toolbar"
+				clientId={ gridClientId }
+				__unstablePopoverSlot="__unstable-block-tools-after"
 			>
 				<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 }
-									/>
-								)
-						  ) }
+					{ isManualGrid ? (
+						<ManualGridVisualizer
+							gridClientId={ gridClientId }
+							gridInfo={ gridInfo }
+						/>
+					) : (
+						Array.from( { length: gridInfo.numItems }, ( _, i ) => (
+							<GridVisualizerCell
+								key={ i }
+								color={ gridInfo.currentColor }
+							/>
+						) )
+					) }
 				</div>
 			</BlockPopoverCover>
 		);
 	}
 );
 
-function GridVisualizerCell( { color, children } ) {
+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="block-editor-grid-visualizer__cell"
+			className={ clsx(
+				'block-editor-grid-visualizer__cell',
+				className
+			) }
 			style={ {
 				boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${ color } 20%, #0000)`,
+				color,
 			} }
 		>
 			{ children }
@@ -148,15 +199,15 @@ function GridVisualizerCell( { color, children } ) {
 	);
 }
 
-function GridVisualizerDropZone( {
+function useGridVisualizerDropZone(
 	column,
 	row,
 	gridClientId,
 	gridInfo,
-	highlightedRect,
-	setHighlightedRect,
-} ) {
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	setHighlightedRect
+) {
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const {
 		updateBlockAttributes,
 		moveBlocksToPosition,
@@ -168,7 +219,7 @@ function GridVisualizerDropZone( {
 		gridInfo.numColumns
 	);
 
-	const ref = useDropZoneWithValidation( {
+	return useDropZoneWithValidation( {
 		validateDrag( srcClientId ) {
 			const attributes = getBlockAttributes( srcClientId );
 			const rect = new GridRect( {
@@ -221,21 +272,87 @@ function GridVisualizerDropZone( {
 			__unstableMarkNextChangeAsNotPersistent();
 			moveBlocksToPosition(
 				[ srcClientId ],
-				gridClientId,
+				getBlockRootClientId( srcClientId ),
 				gridClientId,
 				getNumberOfBlocksBeforeCell( column, row )
 			);
 		},
 	} );
+}
 
-	const isHighlighted = highlightedRect?.contains( column, row ) ?? false;
-
+function GridVisualizerDropZone( {
+	column,
+	row,
+	gridClientId,
+	gridInfo,
+	setHighlightedRect,
+} ) {
 	return (
 		<div
-			ref={ ref }
-			className={ clsx( 'block-editor-grid-visualizer__drop-zone', {
-				'is-highlighted': isHighlighted,
-			} ) }
+			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 )
+				);
+			} }
 		/>
 	);
 }