@wordpress/block-editor 12.17.0 → 12.18.1

package/src/components/list-view/use-list-view-drop-zone.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useState, useCallback } from '@wordpress/element';
+import { useState, useCallback, useEffect } from '@wordpress/element';
 import {
 	useThrottle,
 	__experimentalUseDropZone as useDropZone,
+	usePrevious,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
@@ -304,6 +305,7 @@ export function getListViewDropTarget( blocksData, position, rtl = false ) {
 
 		return {
 			rootClientId: candidateBlockData.clientId,
+			clientId: candidateBlockData.clientId,
 			blockIndex: newBlockIndex,
 			dropPosition: 'inside',
 		};
@@ -396,15 +398,30 @@ export function getListViewDropTarget( blocksData, position, rtl = false ) {
 	};
 }
 
+// Throttle options need to be defined outside of the hook to avoid
+// re-creating the object on every render. This is due to a limitation
+// of the `useThrottle` hook, where the options object is included
+// in the dependency array for memoization.
+const EXPAND_THROTTLE_OPTIONS = {
+	leading: false, // Don't call the function immediately on the first call.
+	trailing: true, // Do call the function on the last call.
+};
+
 /**
  * A react hook for implementing a drop zone in list view.
  *
- * @param {Object}       props                   Named parameters.
- * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {Object}       props                    Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement]  Optional element to be used as the drop zone.
+ * @param {Object}       [props.expandedState]    The expanded state of the blocks in the list view.
+ * @param {Function}     [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
  *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone( { dropZoneElement } ) {
+export default function useListViewDropZone( {
+	dropZoneElement,
+	expandedState,
+	setExpandedState,
+} ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
@@ -420,6 +437,55 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 
 	const rtl = isRTL();
 
+	const previousRootClientId = usePrevious( targetRootClientId );
+
+	const maybeExpandBlock = useCallback(
+		( _expandedState, _target ) => {
+			// If the user is attempting to drop a block inside a collapsed block,
+			// that is, using a nesting gesture flagged by 'inside' dropPosition,
+			// expand the block within the list view, if it isn't already.
+			const { rootClientId } = _target || {};
+			if ( ! rootClientId ) {
+				return;
+			}
+			if (
+				_target?.dropPosition === 'inside' &&
+				! _expandedState[ rootClientId ]
+			) {
+				setExpandedState( {
+					type: 'expand',
+					clientIds: [ rootClientId ],
+				} );
+			}
+		},
+		[ setExpandedState ]
+	);
+
+	// Throttle the maybeExpandBlock function to avoid expanding the block
+	// too quickly when the user is dragging over the block. This is to
+	// avoid expanding the block when the user is just passing over it.
+	const throttledMaybeExpandBlock = useThrottle(
+		maybeExpandBlock,
+		500,
+		EXPAND_THROTTLE_OPTIONS
+	);
+
+	useEffect( () => {
+		if (
+			target?.dropPosition !== 'inside' ||
+			previousRootClientId !== target?.rootClientId
+		) {
+			throttledMaybeExpandBlock.cancel();
+			return;
+		}
+		throttledMaybeExpandBlock( expandedState, target );
+	}, [
+		expandedState,
+		previousRootClientId,
+		target,
+		throttledMaybeExpandBlock,
+	] );
+
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
@@ -484,7 +550,7 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 				rtl,
 			]
 		),
-		200
+		50
 	);
 
 	const ref = useDropZone( {
@@ -496,6 +562,9 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 		},
 		onDragLeave() {
 			throttled.cancel();
+			// Use `null` value to indicate that the drop target is not valid,
+			// but that the drag is still active. This allows for styling rules
+			// that are active only when a user drags outside of the list view.
 			setTarget( null );
 		},
 		onDragOver( event ) {
@@ -506,7 +575,10 @@ export default function useListViewDropZone( { dropZoneElement } ) {
 		},
 		onDragEnd() {
 			throttled.cancel();
-			setTarget( null );
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
 		},
 	} );
 

package/src/components/list-view/utils.js

@@ -93,3 +93,119 @@ export function focusListItem( focusClientId, treeGridElementRef ) {
 		} );
 	}
 }
+
+/**
+ * Get values for the block that flag whether the block should be displaced up or down,
+ * whether the block is being nested, and whether the block appears after the dragged
+ * blocks. These values are used to determine the class names to apply to the block.
+ * The list view rows are displaced visually via CSS rules. Displacement rules:
+ * - `normal`: no displacement — used to apply a translateY of `0` so that the block
+ *  appears in its original position, and moves to that position smoothly when dragging
+ *  outside of the list view area.
+ * - `up`: the block should be displaced up, creating room beneath the block for the drop indicator.
+ * - `down`: the block should be displaced down, creating room above the block for the drop indicator.
+ *
+ * @param {Object}                props
+ * @param {Object}                props.blockIndexes           The indexes of all the blocks in the list view, keyed by clientId.
+ * @param {number|null|undefined} props.blockDropTargetIndex   The index of the block that the user is dropping to.
+ * @param {?string}               props.blockDropPosition      The position relative to the block that the user is dropping to.
+ * @param {string}                props.clientId               The client id for the current block.
+ * @param {?number}               props.firstDraggedBlockIndex The index of the first dragged block.
+ * @param {?boolean}              props.isDragged              Whether the current block is being dragged. Dragged blocks skip displacement.
+ * @return {Object} An object containing the `displacement`, `isAfterDraggedBlocks` and `isNesting` values.
+ */
+export function getDragDisplacementValues( {
+	blockIndexes,
+	blockDropTargetIndex,
+	blockDropPosition,
+	clientId,
+	firstDraggedBlockIndex,
+	isDragged,
+} ) {
+	let displacement;
+	let isNesting;
+	let isAfterDraggedBlocks;
+
+	if ( ! isDragged ) {
+		isNesting = false;
+		const thisBlockIndex = blockIndexes[ clientId ];
+		isAfterDraggedBlocks = thisBlockIndex > firstDraggedBlockIndex;
+
+		// Determine where to displace the position of the current block, relative
+		// to the blocks being dragged (in their original position) and the drop target
+		// (the position where a user is currently dragging the blocks to).
+		if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// If the block is being dragged and there is a valid drop target,
+			// determine if the block being rendered should be displaced up or down.
+
+			if ( thisBlockIndex !== undefined ) {
+				if (
+					thisBlockIndex >= firstDraggedBlockIndex &&
+					thisBlockIndex < blockDropTargetIndex
+				) {
+					// If the current block appears after the set of dragged blocks
+					// (in their original position), but is before the drop target,
+					// then the current block should be displaced up.
+					displacement = 'up';
+				} else if (
+					thisBlockIndex < firstDraggedBlockIndex &&
+					thisBlockIndex >= blockDropTargetIndex
+				) {
+					// If the current block appears before the set of dragged blocks
+					// (in their original position), but is after the drop target,
+					// then the current block should be displaced down.
+					displacement = 'down';
+				} else {
+					displacement = 'normal';
+				}
+				isNesting =
+					typeof blockDropTargetIndex === 'number' &&
+					blockDropTargetIndex - 1 === thisBlockIndex &&
+					blockDropPosition === 'inside';
+			}
+		} else if (
+			blockDropTargetIndex === null &&
+			firstDraggedBlockIndex !== undefined
+		) {
+			// A `null` value for `blockDropTargetIndex` indicates that the
+			// drop target is outside of the valid areas within the list view.
+			// In this case, the drag is still active, but as there is no
+			// valid drop target, we should remove the gap indicating where
+			// the block would be inserted.
+			if (
+				thisBlockIndex !== undefined &&
+				thisBlockIndex >= firstDraggedBlockIndex
+			) {
+				displacement = 'up';
+			} else {
+				displacement = 'normal';
+			}
+		} else if (
+			blockDropTargetIndex !== undefined &&
+			blockDropTargetIndex !== null &&
+			firstDraggedBlockIndex === undefined
+		) {
+			// If the blockdrop target is defined, but there are no dragged blocks,
+			// then the block should be displaced relative to the drop target.
+			if ( thisBlockIndex !== undefined ) {
+				if ( thisBlockIndex < blockDropTargetIndex ) {
+					displacement = 'normal';
+				} else {
+					displacement = 'down';
+				}
+			}
+		} else if ( blockDropTargetIndex === null ) {
+			displacement = 'normal';
+		}
+	}
+
+	return {
+		displacement,
+		isNesting,
+		isAfterDraggedBlocks,
+	};
+}

package/src/components/provider/index.js

@@ -46,7 +46,9 @@ export const ExperimentalBlockEditorProvider = withRegistryProvider(
 
 		return (
 			<SlotFillProvider passthrough>
-				<KeyboardShortcuts.Register />
+				{ ! settings.__unstableIsPreviewMode && (
+					<KeyboardShortcuts.Register />
+				) }
 				<BlockRefsProvider>{ children }</BlockRefsProvider>
 			</SlotFillProvider>
 		);

package/src/components/recursion-provider/README.md

@@ -11,8 +11,8 @@ To help with detecting infinite loops on the client, the `RecursionProvider` com
  * WordPress dependencies
  */
 import {
-	__experimentalRecursionProvider as RecursionProvider,
-	__experimentalUseHasRecursion as useHasRecursion,
+	RecursionProvider,
+	useHasRecursion,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';

package/src/components/recursion-provider/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { createContext, useContext, useMemo } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -82,3 +83,19 @@ export function useHasRecursion( uniqueId, blockName = '' ) {
 	blockName = blockName || name;
 	return Boolean( previouslyRenderedBlocks[ blockName ]?.has( uniqueId ) );
 }
+
+export const DeprecatedExperimentalRecursionProvider = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalRecursionProvider', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.RecursionProvider',
+	} );
+	return <RecursionProvider { ...props } />;
+};
+
+export const DeprecatedExperimentalUseHasRecursion = ( props ) => {
+	deprecated( 'wp.blockEditor.__experimentalUseHasRecursion', {
+		since: '6.5',
+		alternative: 'wp.blockEditor.useHasRecursion',
+	} );
+	return useHasRecursion( ...props );
+};

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

@@ -19,6 +19,7 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -44,6 +45,7 @@ import FormatEdit from './format-edit';
 import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import { withDeprecations } from './with-deprecations';
+import { unlock } from '../../lock-unlock';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -113,7 +115,11 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const { clientId, isSelected: isBlockSelected } = useBlockEditContext();
+	const {
+		clientId,
+		isSelected: isBlockSelected,
+		name: blockName,
+	} = useBlockEditContext();
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -121,10 +127,12 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd } =
+		const { getSelectionStart, getSelectionEnd, getBlockAttributes } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
+		const blockBindings =
+			getBlockAttributes( clientId )?.metadata?.bindings;
 
 		let isSelected;
 
@@ -137,18 +145,44 @@ export function RichTextWrapper(
 			isSelected = selectionStart.clientId === clientId;
 		}
 
+		// Disable Rich Text editing if block bindings specify that.
+		let shouldDisableEditing = false;
+		if ( blockBindings ) {
+			const blockTypeAttributes = getBlockType( blockName ).attributes;
+			const { getBlockBindingsSource } = unlock(
+				select( blockEditorStore )
+			);
+			for ( const [ attribute, args ] of Object.entries(
+				blockBindings
+			) ) {
+				// If any of the attributes with source "rich-text" is part of the bindings,
+				// has a source with `lockAttributesEditing`, disable it.
+				if (
+					blockTypeAttributes?.[ attribute ]?.source ===
+						'rich-text' &&
+					getBlockBindingsSource( args.source.name )
+						?.lockAttributesEditing
+				) {
+					shouldDisableEditing = true;
+					break;
+				}
+			}
+		}
+
 		return {
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
+			shouldDisableEditing,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
-		clientId,
-		identifier,
-		originalIsSelected,
-		isBlockSelected,
-	] );
+	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
+		useSelect( selector, [
+			clientId,
+			identifier,
+			originalIsSelected,
+			isBlockSelected,
+		] );
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -376,7 +410,7 @@ export function RichTextWrapper(
 					useFirefoxCompat(),
 					anchorRef,
 				] ) }
-				contentEditable={ true }
+				contentEditable={ ! shouldDisableEditing }
 				suppressContentEditableWarning={ true }
 				className={ classnames(
 					'block-editor-rich-text__editable',
@@ -389,7 +423,11 @@ export function RichTextWrapper(
 				// select blocks when Shift Clicking into an element with
 				// tabIndex because Safari will focus the element. However,
 				// Safari will correctly ignore nested contentEditable elements.
-				tabIndex={ props.tabIndex === 0 ? null : props.tabIndex }
+				tabIndex={
+					props.tabIndex === 0 && ! shouldDisableEditing
+						? null
+						: props.tabIndex
+				}
 				data-wp-block-attribute-key={ identifier }
 			/>
 		</>

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

@@ -264,7 +264,7 @@ export class RichText extends Component {
 	onCreateUndoLevel() {
 		const { __unstableOnCreateUndoLevel: onCreateUndoLevel } = this.props;
 		// If the content is the same, no level needs to be created.
-		if ( this.lastHistoryValue.toString() === this.value.toString() ) {
+		if ( this.lastHistoryValue?.toString() === this.value?.toString() ) {
 			return;
 		}
 
@@ -317,7 +317,7 @@ export class RichText extends Component {
 			event.nativeEvent.text
 		);
 		// On iOS, onChange can be triggered after selection changes, even though there are no content changes.
-		if ( contentWithoutRootTag === this.value.toString() ) {
+		if ( contentWithoutRootTag === this.value?.toString() ) {
 			return;
 		}
 		this.lastEventCount = event.nativeEvent.eventCount;
@@ -333,7 +333,7 @@ export class RichText extends Component {
 		);
 
 		this.debounceCreateUndoLevel();
-		const refresh = this.value.toString() !== contentWithoutRootTag;
+		const refresh = this.value?.toString() !== contentWithoutRootTag;
 		this.value = contentWithoutRootTag;
 
 		// We don't want to refresh if our goal is just to create a record.
@@ -564,7 +564,7 @@ export class RichText extends Component {
 		// Check if value is up to date with latest state of native AztecView.
 		if (
 			event.nativeEvent.text &&
-			event.nativeEvent.text !== this.props.value.toString()
+			event.nativeEvent.text !== this.props.value?.toString()
 		) {
 			this.onTextUpdate( event );
 		}
@@ -589,7 +589,7 @@ export class RichText extends Component {
 		// this approach is not perfectly reliable.
 		const isManual =
 			this.lastAztecEventType !== 'input' &&
-			this.props.value.toString() === this.value.toString();
+			this.props.value?.toString() === this.value?.toString();
 		if ( hasChanged && isManual ) {
 			const value = this.createRecord();
 			const activeFormats = getActiveFormats( value );
@@ -659,7 +659,7 @@ export class RichText extends Component {
 			event.nativeEvent.text
 		);
 		if (
-			contentWithoutRootTag === this.value.toString() &&
+			contentWithoutRootTag === this.value?.toString() &&
 			realStart === this.selectionStart &&
 			realEnd === this.selectionEnd
 		) {
@@ -756,7 +756,7 @@ export class RichText extends Component {
 			typeof nextProps.value !== 'undefined' &&
 			typeof this.props.value !== 'undefined' &&
 			( ! this.comesFromAztec || ! this.firedAfterTextChanged ) &&
-			nextProps.value.toString() !== this.props.value.toString()
+			nextProps.value?.toString() !== this.props.value?.toString()
 		) {
 			// Gutenberg seems to try to mirror the caret state even on events that only change the content so,
 			//  let's force caret update if state has selection set.
@@ -824,7 +824,7 @@ export class RichText extends Component {
 		const { style, tagName } = this.props;
 		const { currentFontSize } = this.state;
 
-		if ( this.props.value.toString() !== this.value.toString() ) {
+		if ( this.props.value?.toString() !== this.value?.toString() ) {
 			this.value = this.props.value;
 		}
 		const { __unstableIsSelected: prevIsSelected } = prevProps;
@@ -884,8 +884,8 @@ export class RichText extends Component {
 		// On android if content is empty we need to send no content or else the placeholder will not show.
 		if (
 			! this.isIOS &&
-			( value.toString() === '' ||
-				value.toString() === EMPTY_PARAGRAPH_TAGS )
+			( value?.toString() === '' ||
+				value?.toString() === EMPTY_PARAGRAPH_TAGS )
 		) {
 			return '';
 		}

package/src/components/use-block-drop-zone/index.js

@@ -20,6 +20,7 @@ import useOnBlockDrop from '../use-on-block-drop';
 import {
 	getDistanceToNearestEdge,
 	isPointContainedByRect,
+	isPointWithinTopAndBottomBoundariesOfRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
 
@@ -72,6 +73,8 @@ export function getDropTargetPosition(
 	let nearestIndex = 0;
 	let insertPosition = 'before';
 	let minDistance = Infinity;
+	let targetBlockIndex = null;
+	let nearestSide = 'right';
 
 	const {
 		dropZoneElement,
@@ -136,7 +139,12 @@ export function getDropTargetPosition(
 	}
 
 	blocksData.forEach(
-		( { isUnmodifiedDefaultBlock, getBoundingClientRect, blockIndex } ) => {
+		( {
+			isUnmodifiedDefaultBlock,
+			getBoundingClientRect,
+			blockIndex,
+			blockOrientation,
+		} ) => {
 			const rect = getBoundingClientRect();
 
 			let [ distance, edge ] = getDistanceToNearestEdge(
@@ -144,12 +152,35 @@ export function getDropTargetPosition(
 				rect,
 				allowedEdges
 			);
+			// If the the point is close to a side, prioritize that side.
+			const [ sideDistance, sideEdge ] = getDistanceToNearestEdge(
+				position,
+				rect,
+				[ 'left', 'right' ]
+			);
+
+			const isPointInsideRect = isPointContainedByRect( position, rect );
+
 			// Prioritize the element if the point is inside of an unmodified default block.
-			if (
-				isUnmodifiedDefaultBlock &&
-				isPointContainedByRect( position, rect )
-			) {
+			if ( isUnmodifiedDefaultBlock && isPointInsideRect ) {
 				distance = 0;
+			} else if (
+				orientation === 'vertical' &&
+				blockOrientation !== 'horizontal' &&
+				( ( isPointInsideRect && sideDistance < THRESHOLD_DISTANCE ) ||
+					( ! isPointInsideRect &&
+						isPointWithinTopAndBottomBoundariesOfRect(
+							position,
+							rect
+						) ) )
+			) {
+				/**
+				 * This condition should only apply when the layout is vertical (otherwise there's
+				 * no need to create a Row) and dropzones should only activate when the block is
+				 * either within and close to the sides of the target block or on its outer sides.
+				 */
+				targetBlockIndex = blockIndex;
+				nearestSide = sideEdge;
 			}
 
 			if ( distance < minDistance ) {
@@ -175,6 +206,10 @@ export function getDropTargetPosition(
 	const isAdjacentBlockUnmodifiedDefaultBlock =
 		!! blocksData[ adjacentIndex ]?.isUnmodifiedDefaultBlock;
 
+	// If the target index is set then group with the block at that index.
+	if ( targetBlockIndex !== null ) {
+		return [ targetBlockIndex, 'group', nearestSide ];
+	}
 	// If both blocks are not unmodified default blocks then just insert between them.
 	if (
 		! isNearestBlockUnmodifiedDefaultBlock &&
@@ -284,6 +319,7 @@ export default function useBlockDropZone( {
 		dropTarget.index,
 		{
 			operation: dropTarget.operation,
+			nearestSide: dropTarget.nearestSide,
 		}
 	);
 	const throttled = useThrottle(
@@ -333,28 +369,32 @@ export default function useBlockDropZone( {
 								.getElementById( `block-${ clientId }` )
 								.getBoundingClientRect(),
 						blockIndex: getBlockIndex( clientId ),
+						blockOrientation:
+							getBlockListSettings( clientId )?.orientation,
 					};
 				} );
 
-				const [ targetIndex, operation ] = getDropTargetPosition(
-					blocksData,
-					{ x: event.clientX, y: event.clientY },
-					getBlockListSettings( targetRootClientId )?.orientation,
-					{
-						dropZoneElement,
-						parentBlockClientId,
-						parentBlockOrientation: parentBlockClientId
-							? getBlockListSettings( parentBlockClientId )
-									?.orientation
-							: undefined,
-						rootBlockIndex: getBlockIndex( targetRootClientId ),
-					}
-				);
+				const [ targetIndex, operation, nearestSide ] =
+					getDropTargetPosition(
+						blocksData,
+						{ x: event.clientX, y: event.clientY },
+						getBlockListSettings( targetRootClientId )?.orientation,
+						{
+							dropZoneElement,
+							parentBlockClientId,
+							parentBlockOrientation: parentBlockClientId
+								? getBlockListSettings( parentBlockClientId )
+										?.orientation
+								: undefined,
+							rootBlockIndex: getBlockIndex( targetRootClientId ),
+						}
+					);
 
 				registry.batch( () => {
 					setDropTarget( {
 						index: targetIndex,
 						operation,
+						nearestSide,
 					} );
 
 					const insertionPointClientId = [
@@ -366,6 +406,7 @@ export default function useBlockDropZone( {
 
 					showInsertionPoint( insertionPointClientId, targetIndex, {
 						operation,
+						nearestSide,
 					} );
 				} );
 			},