Drop Zone: Omit unallowed block types

editor/components/block-drop-zone/index.js

@@ -2,7 +2,7 @@
  * External Dependencies
  */
 import { connect } from 'react-redux';
-import { reduce, get, find } from 'lodash';
+import { reduce, includes, get, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import { compose } from '@wordpress/element';
  */
 import { insertBlocks, updateBlockAttributes } from '../../store/actions';
 
-function BlockDropZone( { index, isLocked, ...props } ) {
+export function BlockDropZone( { index, isLocked, allowedBlockTypes, ...props } ) {
 	if ( isLocked ) {
 		return null;
 	}
@@ -29,6 +29,10 @@ function BlockDropZone( { index, isLocked, ...props } ) {
 
 	const onDropFiles = ( files, position ) => {
 		const transformation = reduce( getBlockTypes(), ( ret, blockType ) => {
+			if ( Array.isArray( allowedBlockTypes ) && ! includes( allowedBlockTypes, blockType.name ) ) {
+				return ret;
+			}
+
 			if ( ret ) {
 				return ret;
 			}
@@ -67,10 +71,11 @@ export default compose(
 		{ insertBlocks, updateBlockAttributes }
 	),
 	withContext( 'editor' )( ( settings ) => {
-		const { templateLock } = settings;
+		const { templateLock, blockTypes } = settings;
 
 		return {
 			isLocked: !! templateLock,
+			allowedBlockTypes: blockTypes,
 		};
 	} )
 )( BlockDropZone );

editor/components/block-drop-zone/test/index.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	registerBlockType,
+	getBlockTypes,
+	unregisterBlockType,
+	createBlock,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { BlockDropZone } from '../';
+
+describe( 'BlockDropZone', () => {
+	beforeAll( () => {
+		registerBlockType( 'core/foo', {
+			save: noop,
+
+			category: 'common',
+
+			title: 'block title',
+
+			attributes: {
+				fileType: {
+					type: 'string',
+				},
+			},
+
+			transforms: {
+				from: [
+					{
+						type: 'files',
+						isMatch: ( files ) => files.some( ( file ) => file.isFooMatch ),
+						transform( files ) {
+							return Promise.resolve( files.map( ( file ) => (
+								createBlock( 'core/foo', { fileType: file.type } )
+							) ) );
+						},
+					},
+				],
+			},
+		} );
+	} );
+
+	afterAll( () => {
+		getBlockTypes().forEach( block => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should render nothing if template locking in effect', () => {
+		const wrapper = shallow( <BlockDropZone isLocked /> );
+
+		expect( wrapper.type() ).toBe( null );
+	} );
+
+	it( 'should do nothing if no matched transform for dropped files', ( done ) => {
+		const insertBlocks = jest.fn();
+		const wrapper = shallow(
+			<BlockDropZone insertBlocks={ insertBlocks } />
+		);
+
+		wrapper.prop( 'onFilesDrop' )( [
+			{
+				isBarMatch: true,
+				type: 'application/x-fake',
+			},
+		] );
+
+		process.nextTick( () => {
+			expect( insertBlocks ).not.toHaveBeenCalled();
+			done();
+		} );
+	} );
+
+	it( 'should call insert callback with transformed files', ( done ) => {
+		const insertBlocks = jest.fn();
+		const wrapper = shallow(
+			<BlockDropZone
+				index={ 0 }
+				insertBlocks={ insertBlocks } />
+		);
+
+		wrapper.prop( 'onFilesDrop' )( [
+			{
+				isFooMatch: true,
+				type: 'application/x-fake',
+			},
+		], { y: 'bottom' } );
+
+		process.nextTick( () => {
+			expect( insertBlocks ).toHaveBeenCalled();
+			const [ blocks, index ] = insertBlocks.mock.calls[ 0 ];
+			expect( blocks ).toHaveLength( 1 );
+			expect( blocks[ 0 ] ).toMatchObject( {
+				name: 'core/foo',
+				attributes: {
+					fileType: 'application/x-fake',
+				},
+			} );
+			expect( index ).toBe( 1 );
+			done();
+		} );
+	} );
+
+	it( 'should call insert callback with transformed files (top)', ( done ) => {
+		const insertBlocks = jest.fn();
+		const wrapper = shallow(
+			<BlockDropZone
+				index={ 0 }
+				insertBlocks={ insertBlocks } />
+		);
+
+		wrapper.prop( 'onFilesDrop' )( [
+			{
+				isFooMatch: true,
+				type: 'application/x-fake',
+			},
+		], { y: 'top' } );
+
+		process.nextTick( () => {
+			const [ , index ] = insertBlocks.mock.calls[ 0 ];
+			expect( index ).toBe( 0 );
+			done();
+		} );
+	} );
+
+	it( 'should respect allowed block types (not allowed)', ( done ) => {
+		const insertBlocks = jest.fn();
+		const wrapper = shallow(
+			<BlockDropZone
+				index={ 0 }
+				allowedBlockTypes={ [ 'core/bar' ] }
+				insertBlocks={ insertBlocks } />
+		);
+
+		wrapper.prop( 'onFilesDrop' )( [
+			{
+				isFooMatch: true,
+				type: 'application/x-fake',
+			},
+		], { y: 'top' } );
+
+		process.nextTick( () => {
+			expect( insertBlocks ).not.toHaveBeenCalled();
+			done();
+		} );
+	} );
+
+	it( 'should respect allowed block types (allowed)', ( done ) => {
+		const insertBlocks = jest.fn();
+		const wrapper = shallow(
+			<BlockDropZone
+				index={ 0 }
+				allowedBlockTypes={ [ 'core/foo' ] }
+				insertBlocks={ insertBlocks } />
+		);
+
+		wrapper.prop( 'onFilesDrop' )( [
+			{
+				isFooMatch: true,
+				type: 'application/x-fake',
+			},
+		], { y: 'top' } );
+
+		process.nextTick( () => {
+			expect( insertBlocks ).toHaveBeenCalled();
+			done();
+		} );
+	} );
+} );