Allow dragging blocks from the inserter into the canvas

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

@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { _n, sprintf } from '@wordpress/i18n';
-import { getBlockType } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 import { Flex, FlexItem } from '@wordpress/components';
 import { dragHandle } from '@wordpress/icons';
 
@@ -12,22 +10,7 @@ import { dragHandle } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockDraggableChip( { clientIds } ) {
-	const icon = useSelect(
-		( select ) => {
-			if ( clientIds.length !== 1 ) {
-				return;
-			}
-
-			const { getBlockName } = select( 'core/block-editor' );
-			const [ firstId ] = clientIds;
-			const blockName = getBlockName( firstId );
-
-			return getBlockType( blockName )?.icon;
-		},
-		[ clientIds ]
-	);
-
+export default function BlockDraggableChip( { count, icon } ) {
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
 			<div className="block-editor-block-draggable-chip">
@@ -41,8 +24,8 @@ export default function BlockDraggableChip( { clientIds } ) {
 						) : (
 							sprintf(
 								/* translators: %d: Number of blocks. */
-								_n( '%d block', '%d blocks', clientIds.length ),
-								clientIds.length
+								_n( '%d block', '%d blocks', count ),
+								count
 							)
 						) }
 					</FlexItem>

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

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { getBlockType } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -19,19 +20,23 @@ const BlockDraggable = ( {
 	onDragEnd,
 	elementId,
 } ) => {
-	const { srcRootClientId, isDraggable } = useSelect(
+	const { srcRootClientId, isDraggable, icon } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, getTemplateLock } = select(
-				'core/block-editor'
-			);
+			const {
+				getBlockRootClientId,
+				getTemplateLock,
+				getBlockName,
+			} = select( 'core/block-editor' );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const templateLock = rootClientId
 				? getTemplateLock( rootClientId )
 				: null;
+			const blockName = getBlockName( clientIds[ 0 ] );
 
 			return {
 				srcRootClientId: rootClientId,
 				isDraggable: 'all' !== templateLock,
+				icon: getBlockType( blockName )?.icon,
 			};
 		},
 		[ clientIds ]
@@ -93,14 +98,14 @@ const BlockDraggable = ( {
 				}
 			} }
 			__experimentalDragComponent={
-				<BlockDraggableChip clientIds={ clientIds } />
+				<BlockDraggableChip count={ clientIds.length } icon={ icon } />
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {
-					isDraggable: true,
-					onDraggableStart,
-					onDraggableEnd,
+					draggable: true,
+					onDragStart: onDraggableStart,
+					onDragEnd: onDraggableEnd,
 				} );
 			} }
 		</Draggable>

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

@@ -59,7 +59,7 @@ function BlockMover( {
 					clientIds={ clientIds }
 					cloneClassname="block-editor-block-mover__drag-clone"
 				>
-					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+					{ ( draggableProps ) => (
 						<Button
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
@@ -68,9 +68,7 @@ function BlockMover( {
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
 							tabIndex="-1"
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
-							draggable={ isDraggable }
+							{ ...draggableProps }
 						/>
 					) }
 				</BlockDraggable>

packages/block-editor/src/components/block-navigation/block-contents.js

@@ -91,7 +91,7 @@ const BlockNavigationBlockContents = forwardRef(
 				clientIds={ [ block.clientId ] }
 				elementId={ `block-navigation-block-${ block.clientId }` }
 			>
-				{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) =>
+				{ ( { draggable, onDragStart, onDragEnd } ) =>
 					__experimentalFeatures ? (
 						<BlockNavigationBlockSlot
 							ref={ ref }
@@ -102,9 +102,9 @@ const BlockNavigationBlockContents = forwardRef(
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
-							draggable={ isDraggable && __experimentalFeatures }
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
+							draggable={ draggable && __experimentalFeatures }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
 							{ ...props }
 						/>
 					) : (
@@ -117,9 +117,9 @@ const BlockNavigationBlockContents = forwardRef(
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
 							level={ level }
-							draggable={ isDraggable && __experimentalFeatures }
-							onDragStart={ onDraggableStart }
-							onDragEnd={ onDraggableEnd }
+							draggable={ draggable && __experimentalFeatures }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
 							{ ...props }
 						/>
 					)

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

@@ -20,6 +20,7 @@ function BlockTypesList( {
 	onHover = () => {},
 	children,
 	label,
+	isDraggable = true,
 } ) {
 	const composite = useCompositeState();
 	const orderId = items.reduce( ( acc, item ) => acc + '--' + item.id, '' );
@@ -45,19 +46,12 @@ function BlockTypesList( {
 				return (
 					<InserterListItem
 						key={ item.id }
+						item={ item }
 						className={ getBlockMenuDefaultClassName( item.id ) }
-						icon={ item.icon }
-						onClick={ () => {
-							onSelect( item );
-							onHover( null );
-						} }
-						onFocus={ () => onHover( item ) }
-						onMouseEnter={ () => onHover( item ) }
-						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
-						isDisabled={ item.isDisabled }
-						title={ item.title }
+						onSelect={ onSelect }
+						onHover={ onHover }
 						composite={ composite }
+						isDraggable={ isDraggable }
 					/>
 				);
 			} ) }

packages/block-editor/src/components/inserter-list-item/draggable.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { Draggable } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import BlockDraggableChip from '../block-draggable/draggable-chip';
+
+const InserterListItemDraggable = ( { isEnabled, blocks, icon, children } ) => {
+	const transferData = {
+		type: 'inserter',
+		blocks,
+	};
+
+	return (
+		<Draggable
+			transferData={ transferData }
+			__experimentalDragComponent={
+				<BlockDraggableChip count={ blocks.length } icon={ icon } />
+			}
+		>
+			{ ( { onDraggableStart, onDraggableEnd } ) => {
+				return children( {
+					draggable: isEnabled,
+					onDragStart: isEnabled ? onDraggableStart : undefined,
+					onDragEnd: isEnabled ? onDraggableEnd : undefined,
+				} );
+			} }
+		</Draggable>
+	);
+};
+
+export default InserterListItemDraggable;

packages/block-editor/src/components/inserter-list-item/index.js

@@ -8,60 +8,115 @@ import { CompositeItem } from 'reakit';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
+import { useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import InserterListItemDraggable from './draggable';
 
 function InserterListItem( {
-	icon,
-	onClick,
-	isDisabled,
-	title,
 	className,
 	composite,
+	item,
+	onSelect,
+	onHover,
+	isDraggable,
 	...props
 } ) {
-	const itemIconStyle = icon
+	const isDragging = useRef( false );
+	const itemIconStyle = item.icon
 		? {
-				backgroundColor: icon.background,
-				color: icon.foreground,
+				backgroundColor: item.icon.background,
+				color: item.icon.foreground,
 		  }
 		: {};
+	const blocks = useMemo( () => {
+		return [
+			createBlock(
+				item.name,
+				item.initialAttributes,
+				createBlocksFromInnerBlocksTemplate( item.innerBlocks )
+			),
+		];
+	}, [ item.name, item.initialAttributes, item.initialAttributes ] );
 
 	return (
-		<div className="block-editor-block-types-list__list-item">
-			<CompositeItem
-				role="option"
-				as={ Button }
-				{ ...composite }
-				className={ classnames(
-					'block-editor-block-types-list__item',
-					className
-				) }
-				onClick={ ( event ) => {
-					event.preventDefault();
-					onClick();
-				} }
-				disabled={ isDisabled }
-				// Use the CompositeItem `focusable` prop over Button's
-				// isFocusable. The latter was shown to cause an issue
-				// with tab order in the inserter list.
-				focusable
-				{ ...props }
-			>
-				<span
-					className="block-editor-block-types-list__item-icon"
-					style={ itemIconStyle }
+		<InserterListItemDraggable
+			isEnabled={ isDraggable && ! item.disabled }
+			blocks={ blocks }
+			icon={ item.icon }
+		>
+			{ ( { draggable, onDragStart, onDragEnd } ) => (
+				<div
+					className="block-editor-block-types-list__list-item"
+					draggable={ draggable }
+					onDragStart={ ( event ) => {
+						isDragging.current = true;
+						if ( onDragStart ) {
+							onHover( null );
+							onDragStart( event );
+						}
+					} }
+					onDragEnd={ ( event ) => {
+						isDragging.current = false;
+						if ( onDragEnd ) {
+							onDragEnd( event );
+						}
+					} }
 				>
-					<BlockIcon icon={ icon } showColors />
-				</span>
-				<span className="block-editor-block-types-list__item-title">
-					{ title }
-				</span>
-			</CompositeItem>
-		</div>
+					<CompositeItem
+						role="option"
+						as={ Button }
+						{ ...composite }
+						className={ classnames(
+							'block-editor-block-types-list__item',
+							className
+						) }
+						disabled={ item.isDisabled }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onSelect( item );
+							onHover( null );
+						} }
+						onFocus={ () => {
+							if ( isDragging.current ) {
+								return;
+							}
+							onHover( item );
+						} }
+						onMouseEnter={ () => {
+							if ( isDragging.current ) {
+								return;
+							}
+							onHover( item );
+						} }
+						onMouseLeave={ () => onHover( null ) }
+						onBlur={ () => onHover( null ) }
+						// Use the CompositeItem `focusable` prop over Button's
+						// isFocusable. The latter was shown to cause an issue
+						// with tab order in the inserter list.
+						focusable
+						{ ...props }
+					>
+						<span
+							className="block-editor-block-types-list__item-icon"
+							style={ itemIconStyle }
+						>
+							<BlockIcon icon={ item.icon } showColors />
+						</span>
+						<span className="block-editor-block-types-list__item-title">
+							{ item.title }
+						</span>
+					</CompositeItem>
+				</div>
+			) }
+		</InserterListItemDraggable>
 	);
 }
 

packages/block-editor/src/components/inserter-list-item/style.scss

@@ -62,6 +62,10 @@
 		transition: all 0.15s ease-out;
 		@include reduce-motion("transition");
 	}
+
+	.block-editor-block-types-list__list-item[draggable="true"] & {
+		cursor: grab;
+	}
 }
 
 .block-editor-block-types-list__item-title {

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -107,6 +107,7 @@ export default function QuickInserter( {
 					selectBlockOnInsert={ selectBlockOnInsert }
 					maxBlockPatterns={ showPatterns ? SHOWN_BLOCK_PATTERNS : 0 }
 					maxBlockTypes={ SHOWN_BLOCK_TYPES }
+					isDraggable={ false }
 				/>
 			</div>