Added video block creation by dropping (#8122)

* Added video block creation by dropping

Dropping a video file on an insertion point now creates a Video Block
instead of a File Block.

This was done by adding the corresponding transform for the Video Block
It supports immediate preview until upload.

* Added error handling

core-blocks/video/edit.js

@@ -15,7 +15,9 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 	RichText,
+	editorMediaUpload,
 } from '@wordpress/editor';
+import { getBlobByURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -35,6 +37,27 @@ class VideoEdit extends Component {
 		this.onSelectURL = this.onSelectURL.bind( this );
 	}
 
+	componentDidMount() {
+		const { attributes, noticeOperations, setAttributes } = this.props;
+		const { id, src = '' } = attributes;
+		if ( ! id && src.indexOf( 'blob:' ) === 0 ) {
+			const file = getBlobByURL( src );
+			if ( file ) {
+				editorMediaUpload( {
+					filesList: [ file ],
+					onFileChange: ( [ { url } ] ) => {
+						setAttributes( { src: url } );
+					},
+					onError: ( message ) => {
+						this.setState( { editing: true } );
+						noticeOperations.createErrorNotice( message );
+					},
+					allowedType: 'video',
+				} );
+			}
+		}
+	}
+
 	toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			this.props.setAttributes( { [ attribute ]: newValue } );

core-blocks/video/index.js

@@ -7,6 +7,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { RichText } from '@wordpress/editor';
+import { createBlock } from '@wordpress/blocks';
+import { createBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -68,6 +70,27 @@ export const settings = {
 		},
 	},
 
+	transforms: {
+		from: [
+			{
+				type: 'files',
+				isMatch( files ) {
+					return files.length === 1 && files[ 0 ].type.indexOf( 'video/' ) === 0;
+				},
+				transform( files ) {
+					const file = files[ 0 ];
+					// We don't need to upload the media directly here
+					// It's already done as part of the `componentDidMount`
+					// in the video block
+					const block = createBlock( 'core/video', {
+						src: createBlobURL( file ),
+					} );
+					return block;
+				},
+			},
+		],
+	},
+
 	supports: {
 		align: true,
 	},