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',