@wordpress/block-editor 10.2.0 → 10.3.0

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getNearestBlockIndex } from '..';
+import { getDropTargetPosition } from '..';
 
 const elementData = [
 	{
@@ -31,19 +31,12 @@ const elementData = [
 	},
 ];
 
-const createMockClassList = ( classes ) => {
-	return {
-		contains( textToMatch ) {
-			return classes.includes( textToMatch );
-		},
-	};
-};
-
 const mapElements =
 	( orientation ) =>
-	( { top, right, bottom, left }, index ) => {
+	( { top, right, bottom, left, isUnmodifiedDefaultBlock }, index ) => {
 		return {
-			dataset: { block: index + 1 },
+			isUnmodifiedDefaultBlock: !! isUnmodifiedDefaultBlock,
+			blockIndex: index,
 			getBoundingClientRect() {
 				return orientation === 'vertical'
 					? {
@@ -59,27 +52,21 @@ const mapElements =
 							right: bottom,
 					  };
 			},
-			classList: createMockClassList( 'wp-block' ),
 		};
 	};
 
-const verticalElements = elementData.map( mapElements( 'vertical' ) );
+const verticalBlocksData = elementData.map( mapElements( 'vertical' ) );
 // Flip the elementData to make a horizontal block list.
-const horizontalElements = elementData.map( mapElements( 'horizontal' ) );
+const horizontalBlocksData = elementData.map( mapElements( 'horizontal' ) );
 
-describe( 'getNearestBlockIndex', () => {
-	it( 'returns `undefined` for an empty list of elements', () => {
-		const emptyElementList = [];
+describe( 'getDropTargetPosition', () => {
+	it( 'returns `0` for an empty list of elements', () => {
 		const position = { x: 0, y: 0 };
 		const orientation = 'horizontal';
 
-		const result = getNearestBlockIndex(
-			emptyElementList,
-			position,
-			orientation
-		);
+		const result = getDropTargetPosition( [], position, orientation );
 
-		expect( result ).toBeUndefined();
+		expect( result ).toEqual( [ 0, 'insert' ] );
 	} );
 
 	describe( 'Vertical block lists', () => {
@@ -88,109 +75,109 @@ describe( 'getNearestBlockIndex', () => {
 		it( 'returns `0` when the position is nearest to the start of the first block', () => {
 			const position = { x: 0, y: 0 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 0 );
+			expect( result ).toEqual( [ 0, 'insert' ] );
 		} );
 
 		it( 'returns `1` when the position is nearest to the end of the first block', () => {
 			const position = { x: 0, y: 190 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 1 );
+			expect( result ).toEqual( [ 1, 'insert' ] );
 		} );
 
 		it( 'returns `1` when the position is nearest to the start of the second block', () => {
 			const position = { x: 0, y: 210 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 1 );
+			expect( result ).toEqual( [ 1, 'insert' ] );
 		} );
 
 		it( 'returns `2` when the position is nearest to the end of the second block', () => {
 			const position = { x: 0, y: 450 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 2 );
+			expect( result ).toEqual( [ 2, 'insert' ] );
 		} );
 
 		it( 'returns `2` when the position is nearest to the start of the third block', () => {
 			const position = { x: 0, y: 510 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 2 );
+			expect( result ).toEqual( [ 2, 'insert' ] );
 		} );
 
 		it( 'returns `3` when the position is nearest to the end of the third block', () => {
 			const position = { x: 0, y: 880 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
 		it( 'returns `3` when the position is past the end of the third block', () => {
 			const position = { x: 0, y: 920 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
-		it( 'returns `3` when the position is nearest to the start of the fourth block', () => {
+		it( 'returns `4` when the position is nearest to the start of the fourth block', () => {
 			const position = { x: 401, y: 0 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
-		it( 'returns `4` when the position is nearest to the end of the fourth block', () => {
+		it( 'returns `5` when the position is nearest to the end of the fourth block', () => {
 			const position = { x: 401, y: 300 };
 
-			const result = getNearestBlockIndex(
-				verticalElements,
+			const result = getDropTargetPosition(
+				verticalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 4 );
+			expect( result ).toEqual( [ 4, 'insert' ] );
 		} );
 	} );
 
@@ -200,109 +187,374 @@ describe( 'getNearestBlockIndex', () => {
 		it( 'returns `0` when the position is nearest to the start of the first block', () => {
 			const position = { x: 0, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 0 );
+			expect( result ).toEqual( [ 0, 'insert' ] );
 		} );
 
 		it( 'returns `1` when the position is nearest to the end of the first block', () => {
 			const position = { x: 190, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 1 );
+			expect( result ).toEqual( [ 1, 'insert' ] );
 		} );
 
 		it( 'returns `1` when the position is nearest to the start of the second block', () => {
 			const position = { x: 210, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 1 );
+			expect( result ).toEqual( [ 1, 'insert' ] );
 		} );
 
 		it( 'returns `2` when the position is nearest to the end of the second block', () => {
 			const position = { x: 450, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 2 );
+			expect( result ).toEqual( [ 2, 'insert' ] );
 		} );
 
 		it( 'returns `2` when the position is nearest to the start of the third block', () => {
 			const position = { x: 510, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 2 );
+			expect( result ).toEqual( [ 2, 'insert' ] );
 		} );
 
 		it( 'returns `3` when the position is nearest to the end of the third block', () => {
 			const position = { x: 880, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
 		it( 'returns `3` when the position is past the end of the third block', () => {
 			const position = { x: 920, y: 0 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
-		it( 'returns `3` when the position is nearest to the start of the fourth block', () => {
+		it( 'returns `3` when the position is nearest to the start of the last block', () => {
 			const position = { x: 0, y: 401 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 3 );
+			expect( result ).toEqual( [ 3, 'insert' ] );
 		} );
 
-		it( 'returns `4` when the position is nearest to the end of the fourth block', () => {
+		it( 'returns `4` when the position is nearest to the end of the last block', () => {
 			const position = { x: 300, y: 401 };
 
-			const result = getNearestBlockIndex(
-				horizontalElements,
+			const result = getDropTargetPosition(
+				horizontalBlocksData,
 				position,
 				orientation
 			);
 
-			expect( result ).toBe( 4 );
+			expect( result ).toEqual( [ 4, 'insert' ] );
+		} );
+	} );
+
+	describe( 'Unmodified default blocks', () => {
+		const orientation = 'vertical';
+
+		it( 'handles replacement index when only the first block is an unmodified default block', () => {
+			const blocksData = [
+				{
+					left: 0,
+					top: 10,
+					right: 400,
+					bottom: 210,
+					isUnmodifiedDefaultBlock: true,
+				},
+				{
+					left: 0,
+					top: 220,
+					right: 400,
+					bottom: 420,
+					isUnmodifiedDefaultBlock: false,
+				},
+			].map( mapElements( 'vertical' ) );
+
+			// Dropping above the first block.
+			expect(
+				getDropTargetPosition( blocksData, { x: 0, y: 0 }, orientation )
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the top half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 20 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the bottom half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 200 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping slightly after the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 211 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping slightly above the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 219 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the top half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 230 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the bottom half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 410 },
+					orientation
+				)
+			).toEqual( [ 2, 'insert' ] );
+
+			// Dropping below the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 421 },
+					orientation
+				)
+			).toEqual( [ 2, 'insert' ] );
+		} );
+
+		it( 'handles replacement index when only the second block is an unmodified default block', () => {
+			const blocksData = [
+				{
+					left: 0,
+					top: 10,
+					right: 400,
+					bottom: 210,
+					isUnmodifiedDefaultBlock: false,
+				},
+				{
+					left: 0,
+					top: 220,
+					right: 400,
+					bottom: 420,
+					isUnmodifiedDefaultBlock: true,
+				},
+			].map( mapElements( 'vertical' ) );
+
+			// Dropping above the first block.
+			expect(
+				getDropTargetPosition( blocksData, { x: 0, y: 0 }, orientation )
+			).toEqual( [ 0, 'insert' ] );
+
+			// Dropping on the top half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 20 },
+					orientation
+				)
+			).toEqual( [ 0, 'insert' ] );
+
+			// Dropping on the bottom half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 200 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping slightly after the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 211 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping slightly above the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 219 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping on the top half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 230 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping on the bottom half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 410 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping below the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 421 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+		} );
+
+		it( 'returns replacement index when both blocks are unmodified default blocks', () => {
+			const blocksData = [
+				{
+					left: 0,
+					top: 10,
+					right: 400,
+					bottom: 210,
+					isUnmodifiedDefaultBlock: true,
+				},
+				{
+					left: 0,
+					top: 220,
+					right: 400,
+					bottom: 420,
+					isUnmodifiedDefaultBlock: true,
+				},
+			].map( mapElements( 'vertical' ) );
+
+			// Dropping above the first block.
+			expect(
+				getDropTargetPosition( blocksData, { x: 0, y: 0 }, orientation )
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the top half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 20 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping on the bottom half of the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 200 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping slightly after the first block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 211 },
+					orientation
+				)
+			).toEqual( [ 0, 'replace' ] );
+
+			// Dropping slightly above the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 219 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping on the top half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 230 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping on the bottom half of the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 410 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
+
+			// Dropping below the second block.
+			expect(
+				getDropTargetPosition(
+					blocksData,
+					{ x: 0, y: 421 },
+					orientation
+				)
+			).toEqual( [ 1, 'replace' ] );
 		} );
 	} );
 } );

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

@@ -17,6 +17,7 @@ import { getFilesFromDataTransfer } from '@wordpress/dom';
 import { store as blockEditorStore } from '../../store';
 
 /** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('./types').WPDropOperation} WPDropOperation */
 
 /**
  * Retrieve the data for a block drop event.
@@ -197,21 +198,19 @@ export function onHTMLDrop(
 /**
  * A React hook for handling block drop events.
  *
- * @typedef {'insert'|'replace'} DropAction The type of action to perform on drop.
+ * @param {string}          targetRootClientId  The root client id where the block(s) will be inserted.
+ * @param {number}          targetBlockIndex    The index where the block(s) will be inserted.
+ * @param {Object}          options             The optional options.
+ * @param {WPDropOperation} [options.operation] The type of operation to perform on drop. Could be `insert` or `replace` for now.
  *
- * @param {string}     targetRootClientId The root client id where the block(s) will be inserted.
- * @param {number}     targetBlockIndex   The index where the block(s) will be inserted.
- * @param {Object}     options            The optional options.
- * @param {DropAction} options.action     The type of action to perform on drop. Could be `insert` or `replace` for now.
- *
- * @return {Object} An object that contains the event handlers `onDrop`, `onFilesDrop` and `onHTMLDrop`.
+ * @return {Function} A function to be passed to the onDrop handler.
  */
 export default function useOnBlockDrop(
 	targetRootClientId,
 	targetBlockIndex,
 	options = {}
 ) {
-	const { action = 'insert' } = options;
+	const { operation = 'insert' } = options;
 	const hasUploadPermissions = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -235,7 +234,7 @@ export default function useOnBlockDrop(
 
 	const insertOrReplaceBlocks = useCallback(
 		( blocks, updateSelection = true, initialPosition = 0 ) => {
-			if ( action === 'replace' ) {
+			if ( operation === 'replace' ) {
 				const clientIds = getBlockOrder( targetRootClientId );
 				const clientId = clientIds[ targetBlockIndex ];
 
@@ -251,7 +250,7 @@ export default function useOnBlockDrop(
 			}
 		},
 		[
-			action,
+			operation,
 			getBlockOrder,
 			insertBlocks,
 			replaceBlocks,
@@ -262,7 +261,7 @@ export default function useOnBlockDrop(
 
 	const moveBlocks = useCallback(
 		( sourceClientIds, sourceRootClientId, insertIndex ) => {
-			if ( action === 'replace' ) {
+			if ( operation === 'replace' ) {
 				const sourceBlocks = getBlocksByClientId( sourceClientIds );
 				const targetBlockClientIds =
 					getBlockOrder( targetRootClientId );
@@ -290,7 +289,7 @@ export default function useOnBlockDrop(
 			}
 		},
 		[
-			action,
+			operation,
 			getBlockOrder,
 			getBlocksByClientId,
 			insertBlocks,

package/src/components/use-on-block-drop/types.ts

@@ -0,0 +1 @@
+export type WPDropOperation = 'insert' | 'replace';

package/src/hooks/align.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -74,7 +73,9 @@ export function getValidAlignments(
 		! hasWideEnabled ||
 		( blockAlign === true && ! hasWideBlockSupport )
 	) {
-		return without( validAlignments, ...WIDE_ALIGNMENTS );
+		return validAlignments.filter(
+			( alignment ) => ! WIDE_ALIGNMENTS.includes( alignment )
+		);
 	}
 
 	return validAlignments;