Fix: Remove editor usage from media blocks. (#15548)

WordPress · Jun 11, 2019 · 8f65b7c · 8f65b7c
1 parent 851388f
commit 8f65b7c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 29 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
+import { compose } from '@wordpress/compose';
 import {
 	Disabled,
 	IconButton,
@@ -18,9 +19,9 @@ import {
 	MediaPlaceholder,
 	RichText,
 } from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -49,7 +50,12 @@ class AudioEdit extends Component {
 	}
 
 	componentDidMount() {
-		const { attributes, noticeOperations, setAttributes } = this.props;
+		const {
+			attributes,
+			mediaUpload,
+			noticeOperations,
+			setAttributes,
+		} = this.props;
 		const { id, src = '' } = attributes;
 
 		if ( ! id && isBlobURL( src ) ) {
@@ -207,5 +213,13 @@ class AudioEdit extends Component {
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}
 }
-
-export default withNotices( AudioEdit );
+export default compose( [
+	withSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		const { __experimentalMediaUpload } = getSettings();
+		return {
+			mediaUpload: __experimentalMediaUpload,
+		};
+	} ),
+	withNotices,
+] )( AudioEdit );
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -27,7 +27,6 @@ import {
 	MediaPlaceholder,
 	RichText,
 } from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
 import { Component } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 
@@ -56,7 +55,12 @@ class FileEdit extends Component {
 	}
 
 	componentDidMount() {
-		const { attributes, noticeOperations, setAttributes } = this.props;
+		const {
+			attributes,
+			mediaUpload,
+			noticeOperations,
+			setAttributes,
+		} = this.props;
 		const { downloadButtonText, href } = attributes;
 
 		// Upload a file drag-and-dropped into the editor
@@ -248,9 +252,12 @@ class FileEdit extends Component {
 export default compose( [
 	withSelect( ( select, props ) => {
 		const { getMedia } = select( 'core' );
+		const { getSettings } = select( 'core/block-editor' );
+		const { __experimentalMediaUpload } = getSettings();
 		const { id } = props.attributes;
 		return {
 			media: id === undefined ? undefined : getMedia( id ),
+			mediaUpload: __experimentalMediaUpload,
 		};
 	} ),
 	withNotices,

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { filter, map } from 'lodash';
+import { every, filter, forEach, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { compose } from '@wordpress/compose';
 import {
 	IconButton,
 	PanelBody,
@@ -25,6 +26,8 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -174,6 +177,20 @@ class GalleryEdit extends Component {
 		} );
 	}
 
+	componentDidMount() {
+		const { attributes, mediaUpload } = this.props;
+		const { images } = attributes;
+		if ( every( images, ( { url } ) => isBlobURL( url ) ) ) {
+			const filesList = map( images, ( { url } ) => getBlobByURL( url ) );
+			forEach( images, ( { url } ) => revokeBlobURL( url ) );
+			mediaUpload( {
+				filesList,
+				onFileChange: this.onSelectImages,
+				allowedTypes: [ 'image' ],
+			} );
+		}
+	}
+
 	componentDidUpdate( prevProps ) {
 		// Deselect images when deselecting the block
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
@@ -312,5 +329,16 @@ class GalleryEdit extends Component {
 		);
 	}
 }
+export default compose( [
+	withSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		const {
+			__experimentalMediaUpload,
+		} = getSettings();
 
-export default withNotices( GalleryEdit );
+		return {
+			mediaUpload: __experimentalMediaUpload,
+		};
+	} ),
+	withNotices,
+] )( GalleryEdit );
diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js
@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { filter, every, map } from 'lodash';
+import { filter, every } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
-import { mediaUpload } from '@wordpress/editor';
 import { createBlobURL } from '@wordpress/blob';
 
 /**
@@ -89,25 +88,12 @@ const transforms = {
 			isMatch( files ) {
 				return files.length !== 1 && every( files, ( file ) => file.type.indexOf( 'image/' ) === 0 );
 			},
-			transform( files, onChange ) {
+			transform( files ) {
 				const block = createBlock( 'core/gallery', {
 					images: files.map( ( file ) => pickRelevantMediaFiles( {
 						url: createBlobURL( file ),
 					} ) ),
 				} );
-				mediaUpload( {
-					filesList: files,
-					onFileChange: ( images ) => {
-						const imagesAttr = images.map(
-							pickRelevantMediaFiles,
-						);
-						onChange( block.clientId, {
-							ids: map( imagesAttr, 'id' ),
-							images: imagesAttr,
-						} );
-					},
-					allowedTypes: [ 'image' ],
-				} );
 				return block;
 			},
 		},

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -43,7 +43,6 @@ import {
 	MediaPlaceholder,
 	RichText,
 } from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
 import { Component } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
@@ -126,7 +125,12 @@ class ImageEdit extends Component {
 	}
 
 	componentDidMount() {
-		const { attributes, setAttributes, noticeOperations } = this.props;
+		const {
+			attributes,
+			mediaUpload,
+			noticeOperations,
+			setAttributes,
+		} = this.props;
 		const { id, url = '' } = attributes;
 
 		if ( isTemporaryImage( id, url ) ) {
@@ -721,13 +725,19 @@ export default compose( [
 		const { getMedia } = select( 'core' );
 		const { getSettings } = select( 'core/block-editor' );
 		const { id } = props.attributes;
-		const { maxWidth, isRTL, imageSizes } = getSettings();
+		const {
+			__experimentalMediaUpload,
+			imageSizes,
+			isRTL,
+			maxWidth,
+		} = getSettings();
 
 		return {
 			image: id ? getMedia( id ) : null,
 			maxWidth,
 			isRTL,
 			imageSizes,
+			mediaUpload: __experimentalMediaUpload,
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -22,7 +22,6 @@ import {
 	MediaUploadCheck,
 	RichText,
 } from '@wordpress/block-editor';
-import { mediaUpload } from '@wordpress/editor';
 import { Component, createRef } from '@wordpress/element';
 import {
 	__,
@@ -32,6 +31,9 @@ import {
 	compose,
 	withInstanceId,
 } from '@wordpress/compose';
+import {
+	withSelect,
+} from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -61,7 +63,12 @@ class VideoEdit extends Component {
 	}
 
 	componentDidMount() {
-		const { attributes, noticeOperations, setAttributes } = this.props;
+		const {
+			attributes,
+			mediaUpload,
+			noticeOperations,
+			setAttributes,
+		} = this.props;
 		const { id, src = '' } = attributes;
 		if ( ! id && isBlobURL( src ) ) {
 			const file = getBlobByURL( src );
@@ -312,6 +319,13 @@ class VideoEdit extends Component {
 }
 
 export default compose( [
+	withSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		const { __experimentalMediaUpload } = getSettings();
+		return {
+			mediaUpload: __experimentalMediaUpload,
+		};
+	} ),
 	withNotices,
 	withInstanceId,
 ] )( VideoEdit );