@wordpress/block-editor 13.1.0 → 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/image-editor/aspect-ratio-dropdown.js

@@ -78,7 +78,6 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 			label={ __( 'Aspect Ratio' ) }
 			popoverProps={ POPOVER_PROPS }
 			toggleProps={ toggleProps }
-			className="wp-block-image__aspect-ratio"
 		>
 			{ ( { onClose } ) => (
 				<>

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/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';
 
@@ -502,7 +503,7 @@ export function RichTextWrapper(
 	);
 
 	const inputRule = useCallback(
-		( value, valueToFormat ) => {
+		( value ) => {
 			if ( ! onReplace ) {
 				return;
 			}
@@ -518,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'
 			);
@@ -533,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;

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

@@ -17,6 +17,23 @@ import { useStyleOverride } from './utils';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
 
+const VARIATION_PREFIX = 'is-style-';
+
+function getVariationMatches( className ) {
+	if ( ! className ) {
+		return [];
+	}
+	return className.split( /\s+/ ).reduce( ( matches, name ) => {
+		if ( name.startsWith( VARIATION_PREFIX ) ) {
+			const match = name.slice( VARIATION_PREFIX.length );
+			if ( match !== 'default' ) {
+				matches.push( match );
+			}
+		}
+		return matches;
+	}, [] );
+}
+
 /**
  * Get the first block style variation that has been registered from the class string.
  *
@@ -28,14 +45,13 @@ import { globalStylesDataKey } from '../store/private-keys';
 function getVariationNameFromClass( className, registeredStyles = [] ) {
 	// The global flag affects how capturing groups work in JS. So the regex
 	// below will only return full CSS classes not just the variation name.
-	const matches = className?.match( /\bis-style-(?!default)(\S+)\b/g );
+	const matches = getVariationMatches( className );
 
 	if ( ! matches ) {
 		return null;
 	}
 
-	for ( const variationClass of matches ) {
-		const variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.
+	for ( const variation of matches ) {
 		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
 			return variation;
 		}
@@ -94,7 +110,7 @@ function useBlockProps( { name, className, clientId } ) {
 
 	const registeredStyles = getBlockStyles( name );
 	const variation = getVariationNameFromClass( className, registeredStyles );
-	const variationClass = `is-style-${ variation }-${ clientId }`;
+	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
 
 	const { settings, styles } = useBlockStyleVariation(
 		name,
@@ -116,7 +132,7 @@ function useBlockProps( { name, className, clientId } ) {
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
-		const isTemplate = true;
+		const disableRootPadding = true;
 
 		return toStyles(
 			variationConfig,
@@ -124,7 +140,7 @@ function useBlockProps( { name, className, clientId } ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate,
+			disableRootPadding,
 			{
 				blockGap: false,
 				blockStyles: true,
@@ -132,6 +148,7 @@ function useBlockProps( { name, className, clientId } ) {
 				marginReset: false,
 				presets: false,
 				rootPadding: false,
+				variationStyles: true,
 			}
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
@@ -152,5 +169,6 @@ function useBlockProps( { name, className, clientId } ) {
 export default {
 	hasSupport: () => true,
 	attributeKeys: [ 'className' ],
+	isMatch: ( { className } ) => getVariationMatches( className ).length > 0,
 	useBlockProps,
 };

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/hooks/utils.js

@@ -582,6 +582,7 @@ export function createBlockListBlockFilter( features ) {
 						hasSupport,
 						attributeKeys = [],
 						useBlockProps,
+						isMatch,
 					} = feature;
 
 					const neededProps = {};
@@ -595,7 +596,8 @@ export function createBlockListBlockFilter( features ) {
 						// Skip rendering if none of the needed attributes are
 						// set.
 						! Object.keys( neededProps ).length ||
-						! hasSupport( props.name )
+						! hasSupport( props.name ) ||
+						( isMatch && ! isMatch( neededProps ) )
 					) {
 						return null;
 					}

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 );
+}

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);

package/src/store/actions.js

@@ -982,7 +982,7 @@ export const __unstableSplitSelection =
 			},
 		};
 
-		const tail = {
+		let tail = {
 			...blockB,
 			// Only preserve the original client ID if the end is different.
 			clientId:
@@ -995,6 +995,26 @@ export const __unstableSplitSelection =
 			},
 		};
 
+		// When splitting a block, attempt to convert the tail block to the
+		// default block type. For example, when splitting a heading block, the
+		// tail block will be converted to a paragraph block. Note that for
+		// blocks such as a list item and button, this will be skipped because
+		// the default block type cannot be inserted.
+		const defaultBlockName = getDefaultBlockName();
+		if (
+			// A block is only split when the selection is within the same
+			// block.
+			blockA.clientId === blockB.clientId &&
+			defaultBlockName &&
+			tail.name !== defaultBlockName &&
+			select.canInsertBlockType( defaultBlockName, anchorRootClientId )
+		) {
+			const switched = switchToBlockType( tail, defaultBlockName );
+			if ( switched?.length === 1 ) {
+				tail = switched[ 0 ];
+			}
+		}
+
 		if ( ! blocks.length ) {
 			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
 				head,

package/src/style.scss

@@ -27,7 +27,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/grid/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/style.scss";