@wordpress/block-editor 12.16.1-next.79a6196f.0 → 12.18.0

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

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

@@ -22,13 +22,6 @@ const elementData = [
 		bottom: 900,
 		right: 400,
 	},
-	// Fourth block wraps to the next row/column.
-	{
-		top: 0,
-		left: 400,
-		bottom: 300,
-		right: 800,
-	},
 ];
 
 const mapElements =
@@ -73,7 +66,7 @@ describe( 'getDropTargetPosition', () => {
 		const orientation = 'vertical';
 
 		it( 'returns `0` when the position is nearest to the start of the first block', () => {
-			const position = { x: 0, y: 0 };
+			const position = { x: 32, y: 0 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -85,7 +78,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `1` when the position is nearest to the end of the first block', () => {
-			const position = { x: 0, y: 190 };
+			const position = { x: 32, y: 190 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -97,7 +90,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `1` when the position is nearest to the start of the second block', () => {
-			const position = { x: 0, y: 210 };
+			const position = { x: 32, y: 210 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -109,7 +102,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `2` when the position is nearest to the end of the second block', () => {
-			const position = { x: 0, y: 450 };
+			const position = { x: 32, y: 450 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -121,7 +114,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `2` when the position is nearest to the start of the third block', () => {
-			const position = { x: 0, y: 510 };
+			const position = { x: 32, y: 510 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -133,7 +126,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `3` when the position is nearest to the end of the third block', () => {
-			const position = { x: 0, y: 880 };
+			const position = { x: 32, y: 880 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -145,7 +138,7 @@ describe( 'getDropTargetPosition', () => {
 		} );
 
 		it( 'returns `3` when the position is past the end of the third block', () => {
-			const position = { x: 0, y: 920 };
+			const position = { x: 32, y: 920 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -155,9 +148,8 @@ describe( 'getDropTargetPosition', () => {
 
 			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
-
-		it( 'returns `4` when the position is nearest to the start of the fourth block', () => {
-			const position = { x: 401, y: 0 };
+		it( 'returns group with index 0 when position is close to the right of the first block', () => {
+			const position = { x: 372, y: 0 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -165,11 +157,10 @@ describe( 'getDropTargetPosition', () => {
 				orientation
 			);
 
-			expect( result ).toEqual( [ 3, 'insert' ] );
+			expect( result ).toEqual( [ 0, 'group', 'right' ] );
 		} );
-
-		it( 'returns `5` when the position is nearest to the end of the fourth block', () => {
-			const position = { x: 401, y: 300 };
+		it( 'returns group with index 1 when position is close to the left of the second block', () => {
+			const position = { x: 12, y: 212 };
 
 			const result = getDropTargetPosition(
 				verticalBlocksData,
@@ -177,7 +168,7 @@ describe( 'getDropTargetPosition', () => {
 				orientation
 			);
 
-			expect( result ).toEqual( [ 4, 'insert' ] );
+			expect( result ).toEqual( [ 1, 'group', 'left' ] );
 		} );
 	} );
 
@@ -267,30 +258,6 @@ describe( 'getDropTargetPosition', () => {
 
 			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
-
-		it( 'returns `3` when the position is nearest to the start of the last block', () => {
-			const position = { x: 0, y: 401 };
-
-			const result = getDropTargetPosition(
-				horizontalBlocksData,
-				position,
-				orientation
-			);
-
-			expect( result ).toEqual( [ 3, 'insert' ] );
-		} );
-
-		it( 'returns `4` when the position is nearest to the end of the last block', () => {
-			const position = { x: 300, y: 401 };
-
-			const result = getDropTargetPosition(
-				horizontalBlocksData,
-				position,
-				orientation
-			);
-
-			expect( result ).toEqual( [ 4, 'insert' ] );
-		} );
 	} );
 
 	describe( 'Unmodified default blocks', () => {
@@ -316,14 +283,18 @@ describe( 'getDropTargetPosition', () => {
 
 			// Dropping above the first block.
 			expect(
-				getDropTargetPosition( blocksData, { x: 0, y: 0 }, orientation )
+				getDropTargetPosition(
+					blocksData,
+					{ x: 32, y: 0 },
+					orientation
+				)
 			).toEqual( [ 0, 'replace' ] );
 
 			// Dropping on the top half of the first block.
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 20 },
+					{ x: 32, y: 20 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -332,7 +303,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 200 },
+					{ x: 32, y: 200 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -341,7 +312,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 211 },
+					{ x: 32, y: 211 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -350,7 +321,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 219 },
+					{ x: 32, y: 219 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -359,7 +330,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 230 },
+					{ x: 32, y: 230 },
 					orientation
 				)
 			).toEqual( [ 0, 'replace' ] );
@@ -368,7 +339,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 410 },
+					{ x: 32, y: 410 },
 					orientation
 				)
 			).toEqual( [ 2, 'insert' ] );
@@ -377,7 +348,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 421 },
+					{ x: 32, y: 421 },
 					orientation
 				)
 			).toEqual( [ 2, 'insert' ] );
@@ -410,7 +381,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 20 },
+					{ x: 32, y: 20 },
 					orientation
 				)
 			).toEqual( [ 0, 'insert' ] );
@@ -419,7 +390,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 200 },
+					{ x: 32, y: 200 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -428,7 +399,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 211 },
+					{ x: 32, y: 211 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -437,7 +408,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 219 },
+					{ x: 32, y: 219 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -446,7 +417,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 230 },
+					{ x: 32, y: 230 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -455,7 +426,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 410 },
+					{ x: 32, y: 410 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );
@@ -464,7 +435,7 @@ describe( 'getDropTargetPosition', () => {
 			expect(
 				getDropTargetPosition(
 					blocksData,
-					{ x: 0, y: 421 },
+					{ x: 32, y: 421 },
 					orientation
 				)
 			).toEqual( [ 1, 'replace' ] );