From e804f80f83d78b1b72dea682142ee9d86fe312d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <andres.maneiro@automattic.com>
Date: Thu, 30 Aug 2018 09:57:56 +0200
Subject: [PATCH] Make Draggable ready to process children functions

---
 packages/components/src/draggable/index.js    | 17 ++++++++----
 .../components/block-list/block-draggable.js  | 26 +++++++++++++------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/draggable/index.js b/packages/components/src/draggable/index.js
index 63e2e50b5bc17..c36eb1bea75e9 100644
--- a/packages/components/src/draggable/index.js
+++ b/packages/components/src/draggable/index.js
@@ -20,11 +20,6 @@ class Draggable extends Component {
 	constructor() {
 		super( ...arguments );
 
-		deprecated( 'wp.components.Draggable', {
-			version: 3.7,
-			alternative: 'wp.components.withDraggable',
-		} );
-
 		this.onDragStart = this.onDragStart.bind( this );
 		this.onDragOver = this.onDragOver.bind( this );
 		this.onDragEnd = this.onDragEnd.bind( this );
@@ -154,6 +149,18 @@ class Draggable extends Component {
 
 	render() {
 		const { children, className } = this.props;
+		if ( typeof children === 'function' ) {
+			return children( {
+				onDraggableStart: this.onDragStart,
+				onDraggableEnd: this.onDragEnd,
+			} );
+		}
+
+		deprecated( 'wp.components.Draggable as a DOM node drag handle', {
+			version: 3.8,
+			alternative: 'wp.components.Draggable as a wrapper component for a DOM node',
+		} );
+
 		return (
 			<div
 				className={ classnames( 'components-draggable', className ) }
diff --git a/packages/editor/src/components/block-list/block-draggable.js b/packages/editor/src/components/block-list/block-draggable.js
index 8d0a8534b1124..e6cf9d380c8cd 100644
--- a/packages/editor/src/components/block-list/block-draggable.js
+++ b/packages/editor/src/components/block-list/block-draggable.js
@@ -7,26 +7,36 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { withDraggable } from '@wordpress/components';
+import { Draggable } from '@wordpress/components';
 
 class BlockDraggable extends Component {
 	render() {
-		const { isDragging, onDragStart, onDragEnd } = this.props;
+		const { isDragging, elementId, transferData, onDragStart, onDragEnd } = this.props;
 		const className = classnames( 'editor-block-list__block-draggable', {
 			'is-visible': isDragging,
 		} );
 
 		return (
-			<div
-				className={ className }
+			<Draggable
+				elementId={ elementId }
+				transferData={ transferData }
 				onDragStart={ onDragStart }
 				onDragEnd={ onDragEnd }
-				draggable
 			>
-				<div className="editor-block-list__block-draggable-inner"></div>
-			</div>
+				{
+					( { onDraggableStart, onDraggableEnd } ) => (
+						<div
+							className={ className }
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+							draggable
+						>
+							<div className="editor-block-list__block-draggable-inner"></div>
+						</div> )
+				}
+			</Draggable>
 		);
 	}
 }
 
-export default withDraggable( BlockDraggable );
+export default BlockDraggable;