@wordpress/block-editor 12.17.0 → 12.18.1

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' ] );

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

@@ -4,9 +4,11 @@
 import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
+	createBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
@@ -61,6 +63,8 @@ export function parseDropEvent( event ) {
  * @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.
+ * @param {string}   operation                 The type of operation to perform on drop. Could be `insert` or `replace` or `group`.
+ * @param {Function} getBlock                  A function that returns a block given its client id.
  * @return {Function} The event handler for a block drop event.
  */
 export function onBlockDrop(
@@ -70,7 +74,9 @@ export function onBlockDrop(
 	getClientIdsOfDescendants,
 	moveBlocks,
 	insertOrReplaceBlocks,
-	clearSelectedBlock
+	clearSelectedBlock,
+	operation,
+	getBlock
 ) {
 	return ( event ) => {
 		const {
@@ -113,6 +119,21 @@ export function onBlockDrop(
 				return;
 			}
 
+			// If the user is dropping a block over another block, replace both blocks
+			// with a group block containing them
+			if ( operation === 'group' ) {
+				const blocksToInsert = sourceClientIds.map( ( clientId ) =>
+					getBlock( clientId )
+				);
+				insertOrReplaceBlocks(
+					blocksToInsert,
+					true,
+					null,
+					sourceClientIds
+				);
+				return;
+			}
+
 			const isAtSameLevel = sourceRootClientId === targetRootClientId;
 			const draggedBlockCount = sourceClientIds.length;
 
@@ -202,7 +223,7 @@ export default function useOnBlockDrop(
 	targetBlockIndex,
 	options = {}
 ) {
-	const { operation = 'insert' } = options;
+	const { operation = 'insert', nearestSide = 'right' } = options;
 	const {
 		canInsertBlockType,
 		getBlockIndex,
@@ -210,7 +231,10 @@ export default function useOnBlockDrop(
 		getBlockOrder,
 		getBlocksByClientId,
 		getSettings,
+		getBlock,
+		isGroupable,
 	} = useSelect( blockEditorStore );
+	const { getBlockType, getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
@@ -222,12 +246,63 @@ export default function useOnBlockDrop(
 	const registry = useRegistry();
 
 	const insertOrReplaceBlocks = useCallback(
-		( blocks, updateSelection = true, initialPosition = 0 ) => {
+		(
+			blocks,
+			updateSelection = true,
+			initialPosition = 0,
+			clientIdsToReplace = []
+		) => {
+			const clientIds = getBlockOrder( targetRootClientId );
+			const clientId = clientIds[ targetBlockIndex ];
+			const blocksClientIds = blocks.map( ( block ) => block.clientId );
+			const areGroupableBlocks = isGroupable( [
+				...blocksClientIds,
+				clientId,
+			] );
 			if ( operation === 'replace' ) {
-				const clientIds = getBlockOrder( targetRootClientId );
-				const clientId = clientIds[ targetBlockIndex ];
-
 				replaceBlocks( clientId, blocks, undefined, initialPosition );
+			} else if ( operation === 'group' && areGroupableBlocks ) {
+				const targetBlock = getBlock( clientId );
+				if ( nearestSide === 'left' ) {
+					blocks.push( targetBlock );
+				} else {
+					blocks.unshift( targetBlock );
+				}
+
+				const groupInnerBlocks = blocks.map( ( block ) => {
+					return createBlock(
+						block.name,
+						block.attributes,
+						block.innerBlocks
+					);
+				} );
+
+				const areAllImages = blocks.every( ( block ) => {
+					return block.name === 'core/image';
+				} );
+
+				const galleryBlock = !! getBlockType( 'core/gallery' );
+
+				const wrappedBlocks = createBlock(
+					areAllImages && galleryBlock
+						? 'core/gallery'
+						: getGroupingBlockName(),
+					{
+						layout: {
+							type: 'flex',
+							flexWrap: areAllImages ? null : 'nowrap',
+						},
+					},
+					groupInnerBlocks
+				);
+				// Need to make sure both the target block and the block being dragged are replaced
+				// otherwise the dragged block will be duplicated.
+				replaceBlocks(
+					[ clientId, ...clientIdsToReplace ],
+					wrappedBlocks,
+					undefined,
+					initialPosition
+				);
 			} else {
 				insertBlocks(
 					blocks,
@@ -239,12 +314,16 @@ export default function useOnBlockDrop(
 			}
 		},
 		[
-			operation,
 			getBlockOrder,
-			insertBlocks,
-			replaceBlocks,
-			targetBlockIndex,
 			targetRootClientId,
+			targetBlockIndex,
+			operation,
+			replaceBlocks,
+			getBlock,
+			nearestSide,
+			getBlockType,
+			getGroupingBlockName,
+			insertBlocks,
 		]
 	);
 
@@ -297,7 +376,9 @@ export default function useOnBlockDrop(
 		getClientIdsOfDescendants,
 		moveBlocks,
 		insertOrReplaceBlocks,
-		clearSelectedBlock
+		clearSelectedBlock,
+		operation,
+		getBlock
 	);
 	const _onFilesDrop = onFilesDrop(
 		targetRootClientId,

package/src/hooks/block-hooks.js

@@ -55,8 +55,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
 				( clientIds, block ) => {
 					// If the block doesn't exist anywhere in the block tree,
-					// we know that we have to display the toggle for it, and set
-					// it to disabled.
+					// we know that we have to set the toggle to disabled.
 					if ( getGlobalBlockCount( block.name ) === 0 ) {
 						return clientIds;
 					}
@@ -83,7 +82,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 					}
 
 					const hookedBlock = candidates?.find(
-						( candidate ) => name === candidate.name
+						( candidate ) => candidate.name === block.name
 					);
 
 					// If the block exists in the designated location, we consider it hooked
@@ -96,13 +95,8 @@ function BlockHooksControlPure( { name, clientId } ) {
 					}
 
 					// If no hooked block was found in any of its designated locations,
-					// but it exists elsewhere in the block tree, we consider it manually inserted.
-					// In this case, we take note and will remove the corresponding toggle from the
-					// block inspector panel.
-					return {
-						...clientIds,
-						[ block.name ]: false,
-					};
+					// we set the toggle to disabled.
+					return clientIds;
 				},
 				{}
 			);
@@ -118,13 +112,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
 
-	// Remove toggle if block isn't present in the designated location but elsewhere in the block tree.
-	const hookedBlocksForCurrentBlockIfNotPresentElsewhere =
-		hookedBlocksForCurrentBlock?.filter(
-			( block ) => hookedBlockClientIds?.[ block.name ] !== false
-		);
-
-	if ( ! hookedBlocksForCurrentBlockIfNotPresentElsewhere.length ) {
+	if ( ! hookedBlocksForCurrentBlock.length ) {
 		return null;
 	}
 

package/src/hooks/content-lock-ui.js

@@ -4,40 +4,23 @@
 import { ToolbarButton, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
 import { BlockControls, BlockSettingsMenuControls } from '../components';
+import { unlock } from '../lock-unlock';
 
-function StopEditingAsBlocksOnOutsideSelect( {
-	clientId,
-	stopEditingAsBlock,
-} ) {
-	const isBlockOrDescendantSelected = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return (
-				isBlockSelected( clientId ) ||
-				hasSelectedInnerBlock( clientId, true )
-			);
-		},
-		[ clientId ]
-	);
-	useEffect( () => {
-		if ( ! isBlockOrDescendantSelected ) {
-			stopEditingAsBlock();
-		}
-	}, [ isBlockOrDescendantSelected, stopEditingAsBlock ] );
-	return null;
-}
+// The implementation of content locking is mainly in this file, although the mechanism
+// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
+// at block-editor/src/components/block-list/index.js.
+// Besides the components on this file and the file referenced above the implementation
+// also includes artifacts on the store (actions, reducers, and selector).
 
 function ContentLockControlsPure( { clientId, isSelected } ) {
 	const { getBlockListSettings, getSettings } = useSelect( blockEditorStore );
-	const focusModeToRevert = useRef();
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -61,31 +44,15 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		updateBlockListSettings,
 		__unstableSetTemporarilyEditingAsBlocks,
 	} = useDispatch( blockEditorStore );
+	const { stopEditingAsBlocks } = unlock( useDispatch( blockEditorStore ) );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
 	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
 
-	const stopEditingAsBlock = useCallback( () => {
-		__unstableMarkNextChangeAsNotPersistent();
-		updateBlockAttributes( clientId, {
-			templateLock: 'contentOnly',
-		} );
-		updateBlockListSettings( clientId, {
-			...getBlockListSettings( clientId ),
-			templateLock: 'contentOnly',
-		} );
-		updateSettings( { focusMode: focusModeToRevert.current } );
-		__unstableSetTemporarilyEditingAsBlocks();
-	}, [
-		clientId,
-		updateSettings,
-		updateBlockListSettings,
-		getBlockListSettings,
-		__unstableMarkNextChangeAsNotPersistent,
-		updateBlockAttributes,
-		__unstableSetTemporarilyEditingAsBlocks,
-	] );
+	const stopEditingAsBlockCallback = useCallback( () => {
+		stopEditingAsBlocks( clientId );
+	}, [ clientId, stopEditingAsBlocks ] );
 
 	if ( ! isContentLocked && ! isEditingAsBlocks ) {
 		return null;
@@ -99,16 +66,8 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 		<>
 			{ showStopEditingAsBlocks && (
 				<>
-					<StopEditingAsBlocksOnOutsideSelect
-						clientId={ clientId }
-						stopEditingAsBlock={ stopEditingAsBlock }
-					/>
 					<BlockControls group="other">
-						<ToolbarButton
-							onClick={ () => {
-								stopEditingAsBlock();
-							} }
-						>
+						<ToolbarButton onClick={ stopEditingAsBlockCallback }>
 							{ __( 'Done' ) }
 						</ToolbarButton>
 					</BlockControls>
@@ -127,11 +86,12 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 									...getBlockListSettings( clientId ),
 									templateLock: false,
 								} );
-								focusModeToRevert.current =
+								const focusModeToRevert =
 									getSettings().focusMode;
 								updateSettings( { focusMode: true } );
 								__unstableSetTemporarilyEditingAsBlocks(
-									clientId
+									clientId,
+									focusModeToRevert
 								);
 								onClose();
 							} }