Disallow drag from Nav list view into block canvas

docs/reference-guides/data/data-core-block-editor.md

@@ -1573,6 +1573,7 @@ Returns an action object used in signalling that the user has begun to drag bloc
 _Parameters_
 
 -   _clientIds_ `string[]`: An array of client ids being dragged
+-   _targets_ `Array`: the names of target dropzones into which this draggable can be dropped.
 
 _Returns_
 

packages/block-editor/src/components/block-draggable/README.md

@@ -0,0 +1,71 @@
+# Block Draggable
+
+Block Draggable is a block-specific implementation of a `<Draggable>` which defines behaviour for dragged elements in a block editor context, including (but not limited to):
+
+-   determining whether the given block(s) can be moved.
+-   setting information on the [`transferData` object](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer).
+-   (optionally) setting the `target` dropzones with which this draggable is compatible.
+-   displaying a suitable "chip" during the drag operation.
+-   managing scrolling during the drag.
+
+Note that the majority of the behaviour is delegated to `Draggable` from `@wordpress/components`.
+
+## Usage
+
+```js
+import { BlockDraggable } from '@wordpress/block-editor';
+
+function MyComponent() {
+	return <BlockDraggable clientIds={ clientIds } />;
+}
+```
+
+## Props
+
+### clientIds
+
+-   Type: `Array`
+-   Required: Yes
+
+Blocks IDs of candidates to be dragged.
+
+### targets
+
+-   Type: `Array[string]`
+-   Required: No
+
+A list of dropzone names that this draggable considers valid drop targets. If provided then it will only be possible to drop the draggable in a _named_ dropzone that is included in the list.
+
+### `children`
+
+-   Type: Function
+-   Required: No
+
+Component children as a function. The function receives the following arguments:
+
+-   `draggable` - whether or not the block(s) are deemed to be draggable.
+-   `onDragStart` (optional) - an event handler to be passed as the `onDragStart` event prop of any child node.
+-   `onDragEnd` - an event handler to be passed as the `onDragEnd` event prop of any child node.
+
+See [`Draggable`](./packages/components/src/draggable/README.md) for more information.
+
+### cloneClassname
+
+-   Type: `string`
+-   Required: No
+
+A className to be passed to the clone of the draggable.
+
+### `onDragStart`
+
+-   Type: Function
+-   Required: No
+
+A function to be called on the `ondragstart` event.
+
+### `onDragEnd`
+
+-   Type: Function
+-   Required: No
+
+A function to be called on the `ondragend` event.

packages/block-editor/src/components/block-draggable/index.js

@@ -19,6 +19,7 @@ const BlockDraggable = ( {
 	cloneClassname,
 	onDragStart,
 	onDragEnd,
+	targets = [],
 } ) => {
 	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
@@ -59,6 +60,7 @@ const BlockDraggable = ( {
 		type: 'block',
 		srcClientIds: clientIds,
 		srcRootClientId,
+		targets,
 	};
 
 	return (
@@ -67,7 +69,7 @@ const BlockDraggable = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				startDraggingBlocks( clientIds );
+				startDraggingBlocks( clientIds, targets );
 				isDragging.current = true;
 
 				startScrolling( event );

packages/block-editor/src/components/list-view/use-list-view-drop-zone.js

@@ -17,6 +17,7 @@ import {
 } from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../experiments';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 
@@ -179,26 +180,39 @@ function getListViewDropTarget( blocksData, position ) {
 /**
  * A react hook for implementing a drop zone in list view.
  *
+ * @param {string} dropZoneName the name of the drop zone.
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone() {
+export default function useListViewDropZone( dropZoneName ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
 		getBlockCount,
 		getDraggedBlockClientIds,
 		canInsertBlocks,
-	} = useSelect( blockEditorStore );
+		getDraggedBlocksTargets,
+	} = unlock( useSelect( blockEditorStore ) );
 	const [ target, setTarget ] = useState();
 	const { rootClientId: targetRootClientId, blockIndex: targetBlockIndex } =
 		target || {};
 
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
+	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex, {
+		dropZoneName,
+	} );
 
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
 			( event, currentTarget ) => {
+				const draggedBlocksTargets = getDraggedBlocksTargets();
+
+				if (
+					draggedBlocksTargets?.length &&
+					! draggedBlocksTargets.includes( dropZoneName )
+				) {
+					// If drag targets are defined and the drop zone doesn't match, don't allow dropping.
+					return;
+				}
 				const position = { x: event.clientX, y: event.clientY };
 				const isBlockDrag = !! draggedBlockClientIds?.length;
 

packages/block-editor/src/components/off-canvas-editor/block-contents.js

@@ -123,7 +123,10 @@ const ListViewBlockContents = forwardRef(
 						} }
 					/>
 				) }
-				<BlockDraggable clientIds={ draggableClientIds }>
+				<BlockDraggable
+					clientIds={ draggableClientIds }
+					targets={ [ 'offcanvas' ] }
+				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton
 							ref={ ref }

packages/block-editor/src/components/off-canvas-editor/index.js

@@ -92,7 +92,8 @@ function OffCanvasEditor(
 
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
-	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
+	const { ref: dropZoneRef, target: blockDropTarget } =
+		useListViewDropZone( 'offcanvas' );
 	const elementRef = useRef();
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 

packages/block-editor/src/components/off-canvas-editor/use-list-view-drop-zone.js

@@ -17,6 +17,7 @@ import {
 } from '../../utils/math';
 import useOnBlockDrop from '../use-on-block-drop';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../experiments';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 
@@ -179,26 +180,39 @@ function getListViewDropTarget( blocksData, position ) {
 /**
  * A react hook for implementing a drop zone in list view.
  *
+ * @param {string} dropZoneName The name of the drop zone.
  * @return {WPListViewDropZoneTarget} The drop target.
  */
-export default function useListViewDropZone() {
+export default function useListViewDropZone( dropZoneName ) {
 	const {
 		getBlockRootClientId,
 		getBlockIndex,
 		getBlockCount,
 		getDraggedBlockClientIds,
 		canInsertBlocks,
-	} = useSelect( blockEditorStore );
+		getDraggedBlocksTargets,
+	} = unlock( useSelect( blockEditorStore ) );
 	const [ target, setTarget ] = useState();
 	const { rootClientId: targetRootClientId, blockIndex: targetBlockIndex } =
 		target || {};
 
-	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex );
+	const onBlockDrop = useOnBlockDrop( targetRootClientId, targetBlockIndex, {
+		dropZoneName,
+	} );
 
 	const draggedBlockClientIds = getDraggedBlockClientIds();
 	const throttled = useThrottle(
 		useCallback(
 			( event, currentTarget ) => {
+				const draggedBlocksTargets = getDraggedBlocksTargets();
+
+				if (
+					draggedBlocksTargets?.length &&
+					! draggedBlocksTargets.includes( dropZoneName )
+				) {
+					// If drag targets are defined and the drop zone doesn't match, don't allow dropping.
+					return;
+				}
 				const position = { x: event.clientX, y: event.clientY };
 				const isBlockDrag = !! draggedBlockClientIds?.length;
 

packages/block-editor/src/components/use-block-drop-zone/README.md

@@ -1,3 +1,12 @@
 # useBlockDropZone
 
 `useBlockDropZone` is a React hook used to specify a drop zone for a block. This drop zone supports the drag and drop of media into the editor.
+
+## Props
+
+### dropZoneName
+
+-   Type: `string`
+-   Required: No
+
+An optional name for the dropzone. Note that if a name is provided then only `<BlockDraggable>`s that specify this name in their `targets` prop will be able to be dropped.

packages/block-editor/src/components/use-block-drop-zone/index.js

@@ -19,6 +19,7 @@ import {
 	isPointContainedByRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../experiments';
 
 /** @typedef {import('../../utils/math').WPPoint} WPPoint */
 /** @typedef {import('../use-on-block-drop/types').WPDropOperation} WPDropOperation */
@@ -141,6 +142,7 @@ export default function useBlockDropZone( {
 	// values returned by the `getRootBlockClientId` selector, which also uses
 	// an empty string to represent top-level blocks.
 	rootClientId: targetRootClientId = '',
+	dropZoneName,
 } = {} ) {
 	const [ dropTarget, setDropTarget ] = useState( {
 		index: null,
@@ -166,17 +168,33 @@ export default function useBlockDropZone( {
 		[ targetRootClientId ]
 	);
 
-	const { getBlockListSettings, getBlocks, getBlockIndex } =
-		useSelect( blockEditorStore );
+	const {
+		getBlockListSettings,
+		getBlocks,
+		getBlockIndex,
+		getDraggedBlocksTargets,
+	} = unlock( useSelect( blockEditorStore ) );
+
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
 	const onBlockDrop = useOnBlockDrop( targetRootClientId, dropTarget.index, {
 		operation: dropTarget.operation,
+		dropZoneName,
 	} );
 	const throttled = useThrottle(
 		useCallback(
 			( event, ownerDocument ) => {
+				const draggedBlocksTargets = getDraggedBlocksTargets();
+
+				if (
+					draggedBlocksTargets?.length &&
+					! draggedBlocksTargets.includes( dropZoneName )
+				) {
+					// If drag targets are defined and the drop zone doesn't match, don't allow dropping.
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.

packages/block-editor/src/components/use-on-block-drop/index.js

@@ -33,6 +33,7 @@ export function parseDropEvent( event ) {
 		srcIndex: null,
 		type: null,
 		blocks: null,
+		targets: null,
 	};
 
 	if ( ! event.dataTransfer ) {
@@ -61,6 +62,7 @@ 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}   dropZoneName              The dropZoneName where the drop event will occur (e.g. 'list-view', 'canvas)
  * @return {Function} The event handler for a block drop event.
  */
 export function onBlockDrop(
@@ -70,14 +72,16 @@ export function onBlockDrop(
 	getClientIdsOfDescendants,
 	moveBlocks,
 	insertOrReplaceBlocks,
-	clearSelectedBlock
+	clearSelectedBlock,
+	dropZoneName
 ) {
 	return ( event ) => {
 		const {
 			srcRootClientId: sourceRootClientId,
 			srcClientIds: sourceClientIds,
 			type: dropType,
 			blocks,
+			targets: draggableTargets,
 		} = parseDropEvent( event );
 
 		// If the user is inserting a block.
@@ -91,6 +95,12 @@ export function onBlockDrop(
 
 		// If the user is moving a block.
 		if ( dropType === 'block' ) {
+			if (
+				draggableTargets?.length &&
+				! draggableTargets.includes( dropZoneName )
+			) {
+				return;
+			}
 			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
 
 			// If the user is dropping to the same position, return early.
@@ -210,7 +220,7 @@ export default function useOnBlockDrop(
 	targetBlockIndex,
 	options = {}
 ) {
-	const { operation = 'insert' } = options;
+	const { operation = 'insert', dropZoneName } = options;
 	const hasUploadPermissions = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
 		[]
@@ -307,7 +317,8 @@ export default function useOnBlockDrop(
 		getClientIdsOfDescendants,
 		moveBlocks,
 		insertOrReplaceBlocks,
-		clearSelectedBlock
+		clearSelectedBlock,
+		dropZoneName
 	);
 	const _onFilesDrop = onFilesDrop(
 		targetRootClientId,