diff --git a/packages/block-editor/src/components/block-drop-zone/index.js b/packages/block-editor/src/components/block-drop-zone/index.js
index e0a0d1060ce4f..0a970fd5c4cb7 100644
--- 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 (
-
-
-
+
);
}
}
@@ -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
index 07e384e22f947..0f9adbc296ec0 100644
--- 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',