Revert unneeded changes in this PR

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

@@ -36,7 +36,6 @@ const BlockDraggable = ( {
 		[ clientIds ]
 	);
 	const isDragging = useRef( false );
-	const timerRef = useRef();
 	const [ startScrolling, scrollOnDragOver, stopScrolling ] =
 		useScrollWhenDragging();
 
@@ -45,16 +44,12 @@ const BlockDraggable = ( {
 
 	// Stop dragging blocks if the block draggable is unmounted.
 	useEffect( () => {
-		const timer = timerRef.current;
 		return () => {
 			if ( isDragging.current ) {
 				stopDraggingBlocks();
 			}
-			if ( timer ) {
-				window.cancelAnimationFrame( timer );
-			}
 		};
-	}, [ stopDraggingBlocks ] );
+	}, [] );
 
 	if ( ! isDraggable ) {
 		return children( { draggable: false } );
@@ -72,18 +67,14 @@ const BlockDraggable = ( {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
-				// Below code will hide the source element, which is triggered synchronously
-				// and will break the drag event. So we need to defer it to the next frame.
-				timerRef.current = window.requestAnimationFrame( () => {
-					startDraggingBlocks( clientIds );
-					isDragging.current = true;
+				startDraggingBlocks( clientIds );
+				isDragging.current = true;
 
-					startScrolling( event );
+				startScrolling( event );
 
-					if ( onDragStart ) {
-						onDragStart();
-					}
-				} );
+				if ( onDragStart ) {
+					onDragStart();
+				}
 			} }
 			onDragOver={ scrollOnDragOver }
 			onDragEnd={ () => {

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

@@ -13,7 +13,6 @@ const InserterDraggableBlocks = ( {
 	icon,
 	children,
 	isPattern,
-	...props
 } ) => {
 	const transferData = {
 		type: 'inserter',
@@ -31,7 +30,6 @@ const InserterDraggableBlocks = ( {
 					isPattern={ isPattern }
 				/>
 			}
-			{ ...props }
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {
 				return children( {

packages/block-editor/src/components/inserter/media-tab/media-preview.js

@@ -21,7 +21,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useCallback, useState } from '@wordpress/element';
-import { cloneBlock, serialize } from '@wordpress/blocks';
+import { cloneBlock } from '@wordpress/blocks';
 import { moreVertical, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -203,18 +203,7 @@ export function MediaPreview( { media, onClick, composite, category } ) {
 	const onMouseLeave = useCallback( () => setIsHovered( false ), [] );
 	return (
 		<>
-			<InserterDraggableBlocks
-				isEnabled={ true }
-				blocks={ [ block ] }
-				onDragStart={ ( event ) => {
-					// Also set the serialized block as the HTML data for the drag event,
-					// so that it can be parsed by the media placeholder.
-					event.dataTransfer.setData(
-						'text/html',
-						serialize( [ block ] )
-					);
-				} }
-			>
+			<InserterDraggableBlocks isEnabled={ true } blocks={ [ block ] }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<div
 						className={ classnames(

packages/components/src/draggable/index.tsx

@@ -207,8 +207,10 @@ export function Draggable( {
 		// Update cursor to 'grabbing', document wide.
 		ownerDocument.body.classList.add( bodyClass );
 
+		let timerId: number | undefined;
+
 		if ( onDragStart ) {
-			onDragStart( event );
+			timerId = setTimeout( () => onDragStart( event ) );
 		}
 
 		cleanup.current = () => {
@@ -225,6 +227,8 @@ export function Draggable( {
 			ownerDocument.body.classList.remove( bodyClass );
 
 			ownerDocument.removeEventListener( 'dragover', throttledDragOver );
+
+			clearTimeout( timerId );
 		};
 	}