@wordpress/block-editor 13.0.3 → 13.2.0

package/src/components/grid/utils.js

@@ -0,0 +1,178 @@
+export function range( start, length ) {
+	return Array.from( { length }, ( _, i ) => start + i );
+}
+
+export class GridRect {
+	constructor( {
+		columnStart,
+		rowStart,
+		columnEnd,
+		rowEnd,
+		columnSpan,
+		rowSpan,
+	} = {} ) {
+		this.columnStart = columnStart ?? 1;
+		this.rowStart = rowStart ?? 1;
+		if ( columnSpan !== undefined ) {
+			this.columnEnd = this.columnStart + columnSpan - 1;
+		} else {
+			this.columnEnd = columnEnd ?? this.columnStart;
+		}
+		if ( rowSpan !== undefined ) {
+			this.rowEnd = this.rowStart + rowSpan - 1;
+		} else {
+			this.rowEnd = rowEnd ?? this.rowStart;
+		}
+	}
+
+	get columnSpan() {
+		return this.columnEnd - this.columnStart + 1;
+	}
+
+	get rowSpan() {
+		return this.rowEnd - this.rowStart + 1;
+	}
+
+	contains( column, row ) {
+		return (
+			column >= this.columnStart &&
+			column <= this.columnEnd &&
+			row >= this.rowStart &&
+			row <= this.rowEnd
+		);
+	}
+
+	containsRect( rect ) {
+		return (
+			this.contains( rect.columnStart, rect.rowStart ) &&
+			this.contains( rect.columnEnd, rect.rowEnd )
+		);
+	}
+
+	intersectsRect( rect ) {
+		return (
+			this.columnStart <= rect.columnEnd &&
+			this.columnEnd >= rect.columnStart &&
+			this.rowStart <= rect.rowEnd &&
+			this.rowEnd >= rect.rowStart
+		);
+	}
+}
+
+export function getComputedCSS( element, property ) {
+	return element.ownerDocument.defaultView
+		.getComputedStyle( element )
+		.getPropertyValue( property );
+}
+
+/**
+ * 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.
+ */
+export 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.
+ */
+export 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
+	);
+}
+
+export function getGridRect( gridElement, rect ) {
+	const columnGap = parseFloat( getComputedCSS( gridElement, 'column-gap' ) );
+	const rowGap = parseFloat( getComputedCSS( gridElement, 'row-gap' ) );
+	const gridColumnTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-columns' ),
+		columnGap
+	);
+	const gridRowTracks = getGridTracks(
+		getComputedCSS( gridElement, 'grid-template-rows' ),
+		rowGap
+	);
+	const columnStart = getClosestTrack( gridColumnTracks, rect.left ) + 1;
+	const rowStart = getClosestTrack( gridRowTracks, rect.top ) + 1;
+	const columnEnd =
+		getClosestTrack( gridColumnTracks, rect.right, 'end' ) + 1;
+	const rowEnd = getClosestTrack( gridRowTracks, rect.bottom, 'end' ) + 1;
+	return new GridRect( {
+		columnStart,
+		columnEnd,
+		rowStart,
+		rowEnd,
+	} );
+}
+
+export function getGridItemRect( gridItemElement ) {
+	return getGridRect(
+		gridItemElement.parentElement,
+		new window.DOMRect(
+			gridItemElement.offsetLeft,
+			gridItemElement.offsetTop,
+			gridItemElement.offsetWidth,
+			gridItemElement.offsetHeight
+		)
+	);
+}
+
+export function getGridInfo( gridElement ) {
+	const gridTemplateColumns = getComputedCSS(
+		gridElement,
+		'grid-template-columns'
+	);
+	const gridTemplateRows = getComputedCSS(
+		gridElement,
+		'grid-template-rows'
+	);
+	const numColumns = gridTemplateColumns.split( ' ' ).length;
+	const numRows = gridTemplateRows.split( ' ' ).length;
+	const numItems = numColumns * numRows;
+	return {
+		numColumns,
+		numRows,
+		numItems,
+		currentColor: getComputedCSS( gridElement, 'color' ),
+		style: {
+			gridTemplateColumns,
+			gridTemplateRows,
+			gap: getComputedCSS( gridElement, 'gap' ),
+			padding: getComputedCSS( gridElement, 'padding' ),
+		},
+	};
+}

package/src/components/inner-blocks/index.js

@@ -267,7 +267,9 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 
 	const ref = useMergeRefs( [
 		props.ref,
-		__unstableDisableDropZone || isDropZoneDisabled
+		__unstableDisableDropZone ||
+		isDropZoneDisabled ||
+		( layout?.columnCount && window.__experimentalEnableGridInteractivity )
 			? null
 			: blockDropZoneRef,
 	] );

package/src/components/inserter/block-types-tab.native.js

@@ -18,7 +18,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 function BlockTypesTab( { onSelect, rootClientId, listProps } ) {
 	const [ rawBlockTypes, , collections ] = useBlockTypesState(
 		rootClientId,
-		onSelect
+		onSelect,
+		true
 	);
 	const clipboardBlock = useClipboardBlock( rootClientId );
 	const filteredBlockTypes = filterInserterItems( rawBlockTypes );

package/src/components/link-control/link-preview.js

@@ -27,6 +27,20 @@ import { ViewerSlot } from './viewer-slot';
 
 import useRichUrlData from './use-rich-url-data';
 
+/**
+ * Filters the title for display. Removes the protocol and www prefix.
+ *
+ * @param {string} title The title to be filtered.
+ *
+ * @return {string} The filtered title.
+ */
+function filterTitleForDisplay( title ) {
+	// Derived from `filterURLForDisplay` in `@wordpress/url`.
+	return title
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
+}
+
 export default function LinkPreview( {
 	value,
 	onEditClick,
@@ -59,6 +73,9 @@ export default function LinkPreview( {
 		! isEmptyURL &&
 		stripHTML( richData?.title || value?.title || displayURL );
 
+	const isUrlRedundant =
+		! value?.url || filterTitleForDisplay( displayTitle ) === displayURL;
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -112,7 +129,7 @@ export default function LinkPreview( {
 										{ displayTitle }
 									</Truncate>
 								</ExternalLink>
-								{ value?.url && displayTitle !== displayURL && (
+								{ ! isUrlRedundant && (
 									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
 											{ displayURL }

package/src/components/provider/use-block-sync.js

@@ -9,7 +9,6 @@ import { cloneBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { undoIgnoreBlocks } from '../../store/undo-ignore';
 
 const noop = () => {};
 
@@ -274,10 +273,6 @@ export default function useBlockSync( {
 				const updateParent = isPersistent
 					? onChangeRef.current
 					: onInputRef.current;
-				const undoIgnore = undoIgnoreBlocks.has( blocks );
-				if ( undoIgnore ) {
-					undoIgnoreBlocks.delete( blocks );
-				}
 				updateParent( blocks, {
 					selection: {
 						selectionStart: getSelectionStart(),
@@ -285,7 +280,6 @@ export default function useBlockSync( {
 						initialPosition:
 							getSelectedBlocksInitialCaretPosition(),
 					},
-					undoIgnore,
 				} );
 			}
 			previousAreBlocksDifferent = areBlocksDifferent;

package/src/components/rich-text/event-listeners/input-rules.js

@@ -14,7 +14,7 @@ import {
 	START_OF_SELECTED_AREA,
 } from '../../../utils/selection';
 
-function findSelection( blocks ) {
+export function findSelection( blocks ) {
 	let i = blocks.length;
 
 	while ( i-- ) {

package/src/components/rich-text/index.native.js

@@ -24,7 +24,6 @@ import {
 	create,
 	split,
 	toHTMLString,
-	slice,
 } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -46,6 +45,8 @@ import EmbedHandlerPicker from './embed-handler-picker';
 import { Content } from './content';
 import RichText from './native';
 import { withDeprecations } from './with-deprecations';
+import { findSelection } from './event-listeners/input-rules';
+import { START_OF_SELECTED_AREA } from '../../utils/selection';
 
 const classes = 'block-editor-rich-text__editable';
 
@@ -80,6 +81,7 @@ export function RichTextWrapper(
 		unstableOnFocus,
 		__unstableAllowPrefixTransformations,
 		// Native props.
+		__unstableUseSplitSelection,
 		__unstableMobileNoFocusOnMount,
 		deleteEnter,
 		placeholderTextColor,
@@ -178,6 +180,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		__unstableSplitSelection,
 		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
@@ -345,6 +348,8 @@ export function RichTextWrapper(
 				}
 			} else if ( canSplit ) {
 				splitValue( value );
+			} else if ( __unstableUseSplitSelection ) {
+				__unstableSplitSelection();
 			} else if ( canSplitAtEnd ) {
 				onSplitAtEnd();
 			} else if (
@@ -498,7 +503,7 @@ export function RichTextWrapper(
 	);
 
 	const inputRule = useCallback(
-		( value, valueToFormat ) => {
+		( value ) => {
 			if ( ! onReplace ) {
 				return;
 			}
@@ -514,7 +519,7 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const trimmedTextBefore = text.slice( 0, startPosition ).trim();
+			const trimmedTextBefore = text.slice( 0, start ).trim();
 			const prefixTransforms = getBlockTransforms( 'from' ).filter(
 				( { type } ) => type === 'prefix'
 			);
@@ -529,15 +534,16 @@ export function RichTextWrapper(
 				return;
 			}
 
-			const content = valueToFormat(
-				slice( value, startPosition, text.length )
-			);
+			const content = toHTMLString( {
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
+			} );
 			const block = transformation.transform( content );
-
+			const currentSelection = findSelection( [ block ] );
 			onReplace( [ block ] );
+			selectionChange( ...currentSelection );
 			__unstableMarkAutomaticChange();
 		},
-		[ onReplace, __unstableMarkAutomaticChange ]
+		[ onReplace, start, selectionChange, __unstableMarkAutomaticChange ]
 	);
 
 	const mergedRef = useMergeRefs( [ providedRef, fallbackRef ] );

package/src/components/rich-text/native/index.native.js

@@ -316,6 +316,23 @@ export class RichText extends Component {
 		const contentWithoutRootTag = this.removeRootTagsProducedByAztec(
 			event.nativeEvent.text
 		);
+
+		const { __unstableInputRule } = this.props;
+		const currentValuePosition = {
+			end: this.isIOS ? this.selectionEnd : this.selectionEnd + 1,
+			start: this.isIOS ? this.selectionStart : this.selectionStart + 1,
+		};
+
+		if (
+			__unstableInputRule &&
+			__unstableInputRule( {
+				...currentValuePosition,
+				...this.formatToValue( contentWithoutRootTag ),
+			} )
+		) {
+			return;
+		}
+
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
 		if ( contentWithoutRootTag === this.value?.toString() ) {
 			return;
@@ -424,7 +441,9 @@ export class RichText extends Component {
 			return;
 		}
 
-		onDelete( { isReverse, value } );
+		if ( onDelete ) {
+			onDelete( { isReverse, value } );
+		}
 
 		event.preventDefault();
 		this.lastAztecEventType = 'input';

package/src/hooks/block-style-variation.js

@@ -59,7 +59,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
-function useBlockSyleVariation( name, variation, clientId ) {
+function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
 	// editor settings and available in the post editor.
@@ -112,7 +112,7 @@ function useBlockProps( { name, className, clientId } ) {
 	const variation = getVariationNameFromClass( className, registeredStyles );
 	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
 
-	const { settings, styles } = useBlockSyleVariation(
+	const { settings, styles } = useBlockStyleVariation(
 		name,
 		variation,
 		clientId

package/src/hooks/layout-child.js

@@ -11,7 +11,11 @@ import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
-import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
+import {
+	GridVisualizer,
+	GridItemResizer,
+	GridItemMovers,
+} from '../components/grid';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
@@ -135,10 +139,12 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 }
 
 function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
 	const {
 		type: parentLayoutType = 'default',
 		allowSizingOnChildren = false,
-	} = useLayout() || {};
+		columnCount,
+	} = parentLayout;
 
 	const rootClientId = useSelect(
 		( select ) => {
@@ -154,29 +160,43 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		return null;
 	}
 
+	const isManualGrid = !! columnCount;
+
+	function updateLayout( layout ) {
+		setAttributes( {
+			style: {
+				...style,
+				layout: {
+					...style?.layout,
+					...layout,
+				},
+			},
+		} );
+	}
+
 	return (
 		<>
 			<GridVisualizer
 				clientId={ rootClientId }
 				contentRef={ setResizerBounds }
+				parentLayout={ parentLayout }
 			/>
 			{ allowSizingOnChildren && (
 				<GridItemResizer
 					clientId={ clientId }
 					// Don't allow resizing beyond the grid visualizer.
 					bounds={ resizerBounds }
-					onChange={ ( { columnSpan, rowSpan } ) => {
-						setAttributes( {
-							style: {
-								...style,
-								layout: {
-									...style?.layout,
-									columnSpan,
-									rowSpan,
-								},
-							},
-						} );
-					} }
+					onChange={ updateLayout }
+					parentLayout={ parentLayout }
+				/>
+			) }
+			{ isManualGrid && window.__experimentalEnableGridInteractivity && (
+				<GridItemMovers
+					layout={ style?.layout }
+					parentLayout={ parentLayout }
+					onChange={ updateLayout }
+					gridClientId={ rootClientId }
+					blockClientId={ clientId }
 				/>
 			) }
 		</>

package/src/layouts/grid.js

@@ -23,7 +23,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';
+import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 
 const RANGE_CONTROL_MAX_VALUES = {
 	px: 600,
@@ -93,7 +93,14 @@ export default {
 		);
 	},
 	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
-		return <GridVisualizer clientId={ clientId } />;
+		return (
+			<>
+				{ window.__experimentalEnableGridInteractivity && (
+					<GridLayoutSync clientId={ clientId } />
+				) }
+				<GridVisualizer clientId={ clientId } />
+			</>
+		);
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -245,9 +252,6 @@ function GridLayoutColumnsAndRowsControl( {
 	return (
 		<>
 			<fieldset>
-				<BaseControl.VisualLabel as="legend">
-					{ __( 'Columns' ) }
-				</BaseControl.VisualLabel>
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
@@ -266,68 +270,43 @@ function GridLayoutColumnsAndRowsControl( {
 							value={ columnCount }
 							min={ 1 }
 							label={ __( 'Columns' ) }
-							hideLabelFromVision
 						/>
 					</FlexItem>
+
 					<FlexItem isBlock>
-						<RangeControl
-							value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
-							onChange={ ( value ) =>
-								onChange( {
-									...layout,
-									columnCount: value,
-								} )
-							}
-							min={ 1 }
-							max={ 16 }
-							withInputField={ false }
-							label={ __( 'Columns' ) }
-							hideLabelFromVision
-						/>
+						{ window.__experimentalEnableGridInteractivity &&
+						allowSizingOnChildren ? (
+							<NumberControl
+								size="__unstable-large"
+								onChange={ ( value ) => {
+									onChange( {
+										...layout,
+										rowCount: value,
+									} );
+								} }
+								value={ rowCount }
+								min={ 1 }
+								label={ __( 'Rows' ) }
+							/>
+						) : (
+							<RangeControl
+								value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+								onChange={ ( value ) =>
+									onChange( {
+										...layout,
+										columnCount: value,
+									} )
+								}
+								min={ 1 }
+								max={ 16 }
+								withInputField={ false }
+								label={ __( 'Columns' ) }
+								hideLabelFromVision
+							/>
+						) }
 					</FlexItem>
 				</Flex>
 			</fieldset>
-			{ allowSizingOnChildren &&
-				window.__experimentalEnableGridInteractivity && (
-					<fieldset>
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Rows' ) }
-						</BaseControl.VisualLabel>
-						<Flex gap={ 4 }>
-							<FlexItem isBlock>
-								<NumberControl
-									size="__unstable-large"
-									onChange={ ( value ) => {
-										onChange( {
-											...layout,
-											rowCount: value,
-										} );
-									} }
-									value={ rowCount }
-									min={ 1 }
-									label={ __( 'Rows' ) }
-									hideLabelFromVision
-								/>
-							</FlexItem>
-							<FlexItem isBlock>
-								<RangeControl
-									value={ parseInt( rowCount, 10 ) } // RangeControl can't deal with strings.
-									onChange={ ( value ) =>
-										onChange( {
-											...layout,
-											rowCount: value,
-										} )
-									}
-									min={ 1 }
-									max={ 16 }
-									withInputField={ false }
-									label={ __( 'Rows' ) }
-									hideLabelFromVision
-								/>
-							</FlexItem>
-						</Flex>
-					</fieldset>
-				) }
 		</>
 	);
 }
@@ -366,10 +345,19 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
-			label={ __( 'Type' ) }
+			label={ __( 'Grid item position' ) }
 			value={ isManual }
 			onChange={ onChangeType }
 			isBlock
+			help={
+				isManual === 'manual'
+					? __(
+							'Grid items can be manually placed in any position on the grid.'
+					  )
+					: __(
+							'Grid items are placed automatically depending on their order.'
+					  )
+			}
 		>
 			<ToggleGroupControlOption
 				key="auto"
@@ -384,3 +372,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 		</ToggleGroupControl>
 	);
 }
+
+function GridLayoutSync( props ) {
+	useGridLayoutSync( props );
+}