wip simple handling for adding to containers

packages/block-editor/src/components/list-view/index.js

@@ -111,6 +111,31 @@ function addItemToTree( tree, id, item, insertAfter = true, parentId = '' ) {
 	return { newTree, targetId, targetIndex };
 }
 
+function addChildItemToTree( tree, id, item ) {
+	const newTree = [];
+	for ( let index = 0; index < tree.length; index++ ) {
+		const block = tree[ index ];
+		if ( block.clientId === id ) {
+			block.innerBlocks = [ item, ...block.innerBlocks ];
+			newTree.push( block );
+		} else if ( block.clientId !== id ) {
+			if ( block.innerBlocks.length > 0 ) {
+				newTree.push( {
+					...block,
+					innerBlocks: addChildItemToTree(
+						block.innerBlocks,
+						id,
+						item
+					),
+				} );
+			} else {
+				newTree.push( { ...block } );
+			}
+		}
+	}
+	return newTree;
+}
+
 const UP = 'up';
 const DOWN = 'down';
 
@@ -248,6 +273,10 @@ export default function ListView( {
 		isFirstChild,
 		velocity,
 	} ) => {
+		//TODO: YOU ARE HERE:
+		// - finish up container add.
+		// - Write a blog post on findings so far
+		// - item swap is interesting but not performant, maybe draft up using a drag proxy instead
 		//TODO: support add to container
 		//TODO: support add to child container
 		//TODO: simplify state and code
@@ -312,6 +341,32 @@ export default function ListView( {
 			if ( targetPosition === undefined ) {
 				return;
 			}
+
+			if (
+				position.parentId === targetPosition.parentId &&
+				targetPosition.dropContainer === true
+			) {
+				// ignore if it's valid or not, and let items pass through containers
+				// add to target parent container
+				const {
+					newTree: treeWithoutDragItem,
+					removeParentId,
+				} = removeItemFromTree( clientIdsTree, clientId );
+				const newTree = addChildItemToTree(
+					treeWithoutDragItem,
+					targetPosition.clientId,
+					block
+				);
+				lastTarget.current = {
+					clientId,
+					originalParent: removeParentId,
+					targetId: targetPosition.clientId,
+					targetIndex: 0,
+				};
+				setTree( newTree );
+				return;
+			}
+
 			if ( position.parentId === targetPosition.parentId ) {
 				//Sibling swap
 				const {
@@ -331,6 +386,32 @@ export default function ListView( {
 					targetIndex,
 				};
 				setTree( newTree );
+				return;
+			}
+
+			if (
+				position.parentId !== targetPosition.parentId &&
+				direction === UP
+			) {
+				// ignore if it's valid or not, and let items pass through containers
+				// add to target parent container
+				const {
+					newTree: treeWithoutDragItem,
+					removeParentId,
+				} = removeItemFromTree( clientIdsTree, clientId );
+				const { newTree, targetIndex, targetId } = addItemToTree(
+					treeWithoutDragItem,
+					targetPosition.clientId,
+					block,
+					true
+				);
+				lastTarget.current = {
+					clientId,
+					originalParent: removeParentId,
+					targetId,
+					targetIndex,
+				};
+				setTree( newTree );
 			}
 		}
 	};