@wordpress/block-editor 10.1.0 → 10.2.0

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

@@ -1,13 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
 } from '@wordpress/blocks';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 
 /**
@@ -56,8 +57,8 @@ export function parseDropEvent( event ) {
  * @param {number}   targetBlockIndex          The index where the block(s) will be inserted.
  * @param {Function} getBlockIndex             A function that gets the index of a block.
  * @param {Function} getClientIdsOfDescendants A function that gets the client ids of descendant blocks.
- * @param {Function} moveBlocksToPosition      A function that moves blocks.
- * @param {Function} insertBlocks              A function that inserts blocks.
+ * @param {Function} moveBlocks                A function that moves blocks.
+ * @param {Function} insertOrReplaceBlocks     A function that inserts or replaces blocks.
  * @param {Function} clearSelectedBlock        A function that clears block selection.
  * @return {Function} The event handler for a block drop event.
  */
@@ -66,8 +67,8 @@ export function onBlockDrop(
 	targetBlockIndex,
 	getBlockIndex,
 	getClientIdsOfDescendants,
-	moveBlocksToPosition,
-	insertBlocks,
+	moveBlocks,
+	insertOrReplaceBlocks,
 	clearSelectedBlock
 ) {
 	return ( event ) => {
@@ -84,13 +85,7 @@ export function onBlockDrop(
 			const blocksToInsert = blocks.map( ( block ) =>
 				cloneBlock( block )
 			);
-			insertBlocks(
-				blocksToInsert,
-				targetBlockIndex,
-				targetRootClientId,
-				true,
-				null
-			);
+			insertOrReplaceBlocks( blocksToInsert, true, null );
 		}
 
 		// If the user is moving a block.
@@ -128,12 +123,7 @@ export function onBlockDrop(
 					? targetBlockIndex - draggedBlockCount
 					: targetBlockIndex;
 
-			moveBlocksToPosition(
-				sourceClientIds,
-				sourceRootClientId,
-				targetRootClientId,
-				insertIndex
-			);
+			moveBlocks( sourceClientIds, sourceRootClientId, insertIndex );
 		}
 	};
 }
@@ -146,7 +136,7 @@ export function onBlockDrop(
  * @param {boolean}  hasUploadPermissions  Whether the user has upload permissions.
  * @param {Function} updateBlockAttributes A function that updates a block's attributes.
  * @param {Function} canInsertBlockType    A function that returns checks whether a block type can be inserted.
- * @param {Function} insertBlocks          A function that inserts blocks.
+ * @param {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related file drop event.
  */
@@ -156,7 +146,7 @@ export function onFilesDrop(
 	hasUploadPermissions,
 	updateBlockAttributes,
 	canInsertBlockType,
-	insertBlocks
+	insertOrReplaceBlocks
 ) {
 	return ( files ) => {
 		if ( ! hasUploadPermissions ) {
@@ -176,7 +166,7 @@ export function onFilesDrop(
 				files,
 				updateBlockAttributes
 			);
-			insertBlocks( blocks, targetBlockIndex, targetRootClientId );
+			insertOrReplaceBlocks( blocks );
 		}
 	};
 }
@@ -184,22 +174,22 @@ export function onFilesDrop(
 /**
  * A function that returns an event handler function for block-related HTML drop events.
  *
- * @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 {Function} insertBlocks       A function that inserts blocks.
+ * @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 {Function} insertOrReplaceBlocks A function that inserts or replaces blocks.
  *
  * @return {Function} The event handler for a block-related HTML drop event.
  */
 export function onHTMLDrop(
 	targetRootClientId,
 	targetBlockIndex,
-	insertBlocks
+	insertOrReplaceBlocks
 ) {
 	return ( HTML ) => {
 		const blocks = pasteHandler( { HTML, mode: 'BLOCKS' } );
 
 		if ( blocks.length ) {
-			insertBlocks( blocks, targetBlockIndex, targetRootClientId );
+			insertOrReplaceBlocks( blocks );
 		}
 	};
 }
@@ -207,32 +197,117 @@ export function onHTMLDrop(
 /**
  * A React hook for handling block drop events.
  *
- * @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.
+ * @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 {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`.
  */
-export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
+export default function useOnBlockDrop(
+	targetRootClientId,
+	targetBlockIndex,
+	options = {}
+) {
+	const { action = 'insert' } = options;
 	const hasUploadPermissions = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
 	);
-	const { canInsertBlockType, getBlockIndex, getClientIdsOfDescendants } =
-		useSelect( blockEditorStore );
+	const {
+		canInsertBlockType,
+		getBlockIndex,
+		getClientIdsOfDescendants,
+		getBlockOrder,
+		getBlocksByClientId,
+	} = useSelect( blockEditorStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
 		updateBlockAttributes,
 		clearSelectedBlock,
+		replaceBlocks,
+		removeBlocks,
 	} = useDispatch( blockEditorStore );
+	const registry = useRegistry();
+
+	const insertOrReplaceBlocks = useCallback(
+		( blocks, updateSelection = true, initialPosition = 0 ) => {
+			if ( action === 'replace' ) {
+				const clientIds = getBlockOrder( targetRootClientId );
+				const clientId = clientIds[ targetBlockIndex ];
+
+				replaceBlocks( clientId, blocks, undefined, initialPosition );
+			} else {
+				insertBlocks(
+					blocks,
+					targetBlockIndex,
+					targetRootClientId,
+					updateSelection,
+					initialPosition
+				);
+			}
+		},
+		[
+			action,
+			getBlockOrder,
+			insertBlocks,
+			replaceBlocks,
+			targetBlockIndex,
+			targetRootClientId,
+		]
+	);
+
+	const moveBlocks = useCallback(
+		( sourceClientIds, sourceRootClientId, insertIndex ) => {
+			if ( action === 'replace' ) {
+				const sourceBlocks = getBlocksByClientId( sourceClientIds );
+				const targetBlockClientIds =
+					getBlockOrder( targetRootClientId );
+				const targetBlockClientId =
+					targetBlockClientIds[ targetBlockIndex ];
+
+				registry.batch( () => {
+					// Remove the source blocks.
+					removeBlocks( sourceClientIds, false );
+					// Replace the target block with the source blocks.
+					replaceBlocks(
+						targetBlockClientId,
+						sourceBlocks,
+						undefined,
+						0
+					);
+				} );
+			} else {
+				moveBlocksToPosition(
+					sourceClientIds,
+					sourceRootClientId,
+					targetRootClientId,
+					insertIndex
+				);
+			}
+		},
+		[
+			action,
+			getBlockOrder,
+			getBlocksByClientId,
+			insertBlocks,
+			moveBlocksToPosition,
+			removeBlocks,
+			targetBlockIndex,
+			targetRootClientId,
+		]
+	);
 
 	const _onDrop = onBlockDrop(
 		targetRootClientId,
 		targetBlockIndex,
 		getBlockIndex,
 		getClientIdsOfDescendants,
-		moveBlocksToPosition,
-		insertBlocks,
+		moveBlocks,
+		insertOrReplaceBlocks,
 		clearSelectedBlock
 	);
 	const _onFilesDrop = onFilesDrop(
@@ -241,12 +316,12 @@ export default function useOnBlockDrop( targetRootClientId, targetBlockIndex ) {
 		hasUploadPermissions,
 		updateBlockAttributes,
 		canInsertBlockType,
-		insertBlocks
+		insertOrReplaceBlocks
 	);
 	const _onHTMLDrop = onHTMLDrop(
 		targetRootClientId,
 		targetBlockIndex,
-		insertBlocks
+		insertOrReplaceBlocks
 	);
 
 	return ( event ) => {

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

@@ -98,7 +98,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = noop;
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -115,11 +115,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped to the same place it was dragged from', () => {
@@ -128,7 +128,7 @@ describe( 'onBlockDrop', () => {
 		// Target and source block index is the same.
 		const getBlockIndex = jest.fn( () => targetBlockIndex );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -148,11 +148,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped as a child of itself', () => {
@@ -160,7 +160,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = jest.fn( () => 6 );
 		const getClientIdsOfDescendants = noop;
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -180,11 +180,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block is dropped as a descendant of itself', () => {
@@ -195,7 +195,7 @@ describe( 'onBlockDrop', () => {
 		const getClientIdsOfDescendants = jest.fn( () => [
 			targetRootClientId,
 		] );
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -214,11 +214,11 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).not.toHaveBeenCalled();
+		expect( moveBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if the drop is valid', () => {
@@ -228,7 +228,7 @@ describe( 'onBlockDrop', () => {
 		const targetBlockIndex = 0;
 		const getBlockIndex = jest.fn( () => 1 );
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -247,14 +247,13 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).toHaveBeenCalledWith(
+		expect( moveBlocks ).toHaveBeenCalledWith(
 			sourceClientIds,
 			sourceRootClientId,
-			targetRootClientId,
 			targetBlockIndex
 		);
 	} );
@@ -267,7 +266,7 @@ describe( 'onBlockDrop', () => {
 		const getBlockIndex = jest.fn( () => 1 );
 		// Dragged block is being dropped as a descendant of itself.
 		const getClientIdsOfDescendants = () => [];
-		const moveBlocksToPosition = jest.fn();
+		const moveBlocks = jest.fn();
 
 		const event = {
 			dataTransfer: {
@@ -289,14 +288,13 @@ describe( 'onBlockDrop', () => {
 			targetBlockIndex,
 			getBlockIndex,
 			getClientIdsOfDescendants,
-			moveBlocksToPosition
+			moveBlocks
 		);
 		eventHandler( event );
 
-		expect( moveBlocksToPosition ).toHaveBeenCalledWith(
+		expect( moveBlocks ).toHaveBeenCalledWith(
 			sourceClientIds,
 			sourceRootClientId,
-			targetRootClientId,
 			insertIndex
 		);
 	} );
@@ -306,7 +304,7 @@ describe( 'onFilesDrop', () => {
 	it( 'does nothing if hasUploadPermissions is false', () => {
 		const updateBlockAttributes = jest.fn();
 		const canInsertBlockType = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		const uploadPermissions = false;
@@ -317,12 +315,12 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		onFileDropHandler();
 
 		expect( findTransform ).not.toHaveBeenCalled();
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'does nothing if the block has no matching file transforms', () => {
@@ -330,7 +328,7 @@ describe( 'onFilesDrop', () => {
 		// to have no return value.
 		findTransform.mockImplementation( noop );
 		const updateBlockAttributes = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const canInsertBlockType = noop;
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
@@ -342,12 +340,12 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		onFileDropHandler();
 
 		expect( findTransform ).toHaveBeenCalled();
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if a valid transform can be found', () => {
@@ -359,7 +357,7 @@ describe( 'onFilesDrop', () => {
 		findTransform.mockImplementation( () => transformation );
 		const updateBlockAttributes = noop;
 		const canInsertBlockType = noop;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
 		const uploadPermissions = true;
@@ -370,7 +368,7 @@ describe( 'onFilesDrop', () => {
 			uploadPermissions,
 			updateBlockAttributes,
 			canInsertBlockType,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		const files = 'test';
 		onFileDropHandler( files );
@@ -380,11 +378,7 @@ describe( 'onFilesDrop', () => {
 			files,
 			updateBlockAttributes
 		);
-		expect( insertBlocks ).toHaveBeenCalledWith(
-			blocks,
-			targetBlockIndex,
-			targetRootClientId
-		);
+		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );
 	} );
 } );
 
@@ -393,16 +387,16 @@ describe( 'onHTMLDrop', () => {
 		pasteHandler.mockImplementation( () => [] );
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 
 		const eventHandler = onHTMLDrop(
 			targetRootClientId,
 			targetBlockIndex,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		eventHandler();
 
-		expect( insertBlocks ).not.toHaveBeenCalled();
+		expect( insertOrReplaceBlocks ).not.toHaveBeenCalled();
 	} );
 
 	it( 'inserts blocks if the HTML can be converted into blocks', () => {
@@ -410,19 +404,15 @@ describe( 'onHTMLDrop', () => {
 		pasteHandler.mockImplementation( () => blocks );
 		const targetRootClientId = '1';
 		const targetBlockIndex = 0;
-		const insertBlocks = jest.fn();
+		const insertOrReplaceBlocks = jest.fn();
 
 		const eventHandler = onHTMLDrop(
 			targetRootClientId,
 			targetBlockIndex,
-			insertBlocks
+			insertOrReplaceBlocks
 		);
 		eventHandler();
 
-		expect( insertBlocks ).toHaveBeenCalledWith(
-			blocks,
-			targetBlockIndex,
-			targetRootClientId
-		);
+		expect( insertOrReplaceBlocks ).toHaveBeenCalledWith( blocks );
 	} );
 } );

package/src/components/writing-flow/use-arrow-nav.js

@@ -167,7 +167,8 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
-			const { keyCode, target } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -176,9 +177,7 @@ export default function useArrowNav() {
 			const isHorizontal = isLeft || isRight;
 			const isVertical = isUp || isDown;
 			const isNav = isHorizontal || isVertical;
-			const isShift = event.shiftKey;
-			const hasModifier =
-				isShift || event.ctrlKey || event.altKey || event.metaKey;
+			const hasModifier = shiftKey || ctrlKey || altKey || metaKey;
 			const isNavEdge = isVertical ? isVerticalEdge : isHorizontalEdge;
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
@@ -200,7 +199,7 @@ export default function useArrowNav() {
 					return;
 				}
 
-				if ( isShift ) {
+				if ( shiftKey ) {
 					return;
 				}
 
@@ -249,7 +248,7 @@ export default function useArrowNav() {
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;
 			const { keepCaretInsideBlock } = getSettings();
 
-			if ( isShift ) {
+			if ( shiftKey ) {
 				if (
 					isClosestTabbableABlock( target, isReverse ) &&
 					isNavEdge( target, isReverse )
@@ -261,6 +260,9 @@ export default function useArrowNav() {
 			} else if (
 				isVertical &&
 				isVerticalEdge( target, isReverse ) &&
+				// When Alt is pressed, only intercept if the caret is also at
+				// the horizontal edge.
+				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
 				const closestTabbable = getClosestTabbable(
@@ -273,8 +275,10 @@ export default function useArrowNav() {
 				if ( closestTabbable ) {
 					placeCaretAtVerticalEdge(
 						closestTabbable,
-						isReverse,
-						verticalRect
+						// When Alt is pressed, place the caret at the furthest
+						// horizontal edge and the furthest vertical edge.
+						altKey ? ! isReverse : isReverse,
+						altKey ? undefined : verticalRect
 					);
 					event.preventDefault();
 				}

package/src/hooks/index.js

@@ -20,6 +20,7 @@ import './metadata';
 import './metadata-name';
 
 export { useCustomSides } from './dimensions';
+export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';