Fix: Impossible to drag & drop blocks if the user has no permission t…

…o upload files
WordPress · May 29, 2019 · 56fc5b7 · 56fc5b7
1 parent bb24bbe
commit 56fc5b7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/block-drop-zone/index.js b/packages/block-editor/src/components/block-drop-zone/index.js
@@ -19,11 +19,6 @@ import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import MediaUploadCheck from '../media-upload/check';
-
 const parseDropEvent = ( event ) => {
 	let result = {
 		srcRootClientId: null,
@@ -111,23 +106,20 @@ class BlockDropZone extends Component {
 	}
 
 	render() {
-		const { isLockedAll, index } = this.props;
+		const { hasUploadPermissions, isLockedAll, index } = this.props;
 		if ( isLockedAll ) {
 			return null;
 		}
 		const isAppender = index === undefined;
-
 		return (
-			<MediaUploadCheck>
-				<DropZone
-					className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
-						'is-appender': isAppender,
-					} ) }
-					onFilesDrop={ this.onFilesDrop }
-					onHTMLDrop={ this.onHTMLDrop }
-					onDrop={ this.onDrop }
-				/>
-			</MediaUploadCheck>
+			<DropZone
+				className={ classnames( 'editor-block-drop-zone block-editor-block-drop-zone', {
+					'is-appender': isAppender,
+				} ) }
+				onHTMLDrop={ this.onHTMLDrop }
+				onDrop={ this.onDrop }
+				onFilesDrop={ hasUploadPermissions ? this.onFilesDrop : undefined }
+			/>
 		);
 	}
 }
@@ -156,11 +148,17 @@ export default compose(
 		};
 	} ),
 	withSelect( ( select, { rootClientId } ) => {
-		const { getClientIdsOfDescendants, getTemplateLock, getBlockIndex } = select( 'core/block-editor' );
-		return {
-			isLockedAll: getTemplateLock( rootClientId ) === 'all',
+		const {
+			getBlockIndex,
 			getClientIdsOfDescendants,
+			getSettings,
+			getTemplateLock,
+		} = select( 'core/block-editor' );
+		return {
 			getBlockIndex,
+			getClientIdsOfDescendants,
+			hasUploadPermissions: !! getSettings().__experimentalMediaUpload,
+			isLockedAll: getTemplateLock( rootClientId ) === 'all',
 		};
 	} ),
 	withFilters( 'editor.BlockDropZone' )

diff --git a/packages/components/src/drop-zone/index.js b/packages/components/src/drop-zone/index.js
@@ -58,10 +58,14 @@ class DropZoneComponent extends Component {
 	}
 
 	render() {
-		const { className, label } = this.props;
+		const { className, label, onFilesDrop, onHTMLDrop, onDrop } = this.props;
 		const { isDraggingOverDocument, isDraggingOverElement, position, type } = this.state;
 		const classes = classnames( 'components-drop-zone', className, {
-			'is-active': isDraggingOverDocument || isDraggingOverElement,
+			'is-active': ( isDraggingOverDocument || isDraggingOverElement ) && (
+				( type === 'file' && onFilesDrop ) ||
+				( type === 'html' && onHTMLDrop ) ||
+				( type === 'default' && onDrop )
+			),
 			'is-dragging-over-document': isDraggingOverDocument,
 			'is-dragging-over-element': isDraggingOverElement,
 			'is-close-to-top': position && position.y === 'top',