Make Draggable ready to process children functions

WordPress · Aug 30, 2018 · e804f80 · e804f80
1 parent 02a728b
commit e804f80
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git 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
@@ -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;