Media: Refactor MediaUpload, MediaPlaceholder and mediaUpload to supp…

…ort arrays with multiple supported types. (WordPress#9707) mediaUpload util only allowed the uploads of a single type or all types. That makes impossible for a block to accept just the upload of images and videos. This commit enhances the mediaUpload util and related components ( MediaUpload, MediaPlaceholder) to accept an allowedTypes prop with an array of all the supported types.
jwold · Sep 28, 2018 · 007f15c · 007f15c
1 parent 3a210ab
commit 007f15c
Show file tree

Hide file tree

Showing 15 changed files with 260 additions and 59 deletions.
diff --git a/edit-post/hooks/components/media-upload/index.js b/edit-post/hooks/components/media-upload/index.js
@@ -9,6 +9,7 @@ import { castArray, pick } from 'lodash';
 import { parseWithAttributeSchema } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import deprecated from '@wordpress/deprecated';
 
 // Getter for the sake of unit tests.
 const getGalleryDetailsMediaFrame = () => {
@@ -75,7 +76,15 @@ const getAttachmentsCollection = ( ids ) => {
 };
 
 class MediaUpload extends Component {
-	constructor( { multiple = false, type, gallery = false, title = __( 'Select or Upload Media' ), modalClass, value } ) {
+	constructor( {
+		allowedTypes,
+		type: deprecatedType,
+		multiple = false,
+		gallery = false,
+		title = __( 'Select or Upload Media' ),
+		modalClass,
+		value,
+	} ) {
 		super( ...arguments );
 		this.openModal = this.openModal.bind( this );
 		this.onOpen = this.onOpen.bind( this );
@@ -84,6 +93,19 @@ class MediaUpload extends Component {
 		this.onClose = this.onClose.bind( this );
 		this.processMediaCaption = this.processMediaCaption.bind( this );
 
+		let allowedTypesToUse = allowedTypes;
+		if ( ! allowedTypes && deprecatedType ) {
+			deprecated( 'type property of wp.editor.MediaUpload', {
+				version: '4.2',
+				alternative: 'allowedTypes property containing an array with the allowedTypes or do not pass any property if all types are allowed',
+			} );
+			if ( deprecatedType === '*' ) {
+				allowedTypesToUse = undefined;
+			} else {
+				allowedTypesToUse = [ deprecatedType ];
+			}
+		}
+
 		if ( gallery ) {
 			const currentState = value ? 'gallery-edit' : 'gallery';
 			const GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
@@ -93,7 +115,7 @@ class MediaUpload extends Component {
 				multiple,
 			} );
 			this.frame = new GalleryDetailsMediaFrame( {
-				mimeType: type,
+				mimeType: allowedTypesToUse,
 				state: currentState,
 				multiple,
 				selection,
@@ -108,8 +130,8 @@ class MediaUpload extends Component {
 				},
 				multiple,
 			};
-			if ( !! type ) {
-				frameConfig.library = { type };
+			if ( !! allowedTypesToUse ) {
+				frameConfig.library = { type: allowedTypesToUse };
 			}
 
 			this.frame = wp.media( frameConfig );

diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -21,6 +21,8 @@ import {
 } from '@wordpress/editor';
 import { getBlobByURL } from '@wordpress/blob';
 
+const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+
 class AudioEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -52,7 +54,7 @@ class AudioEdit extends Component {
 						this.setState( { editing: true } );
 						noticeOperations.createErrorNotice( e );
 					},
-					allowedType: 'audio',
+					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
 			}
 		}
@@ -109,7 +111,7 @@ class AudioEdit extends Component {
 					onSelect={ onSelectAudio }
 					onSelectURL={ this.onSelectURL }
 					accept="audio/*"
-					type="audio"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ this.props.attributes }
 					notices={ noticeUI }
 					onError={ noticeOperations.createErrorNotice }

diff --git a/packages/block-library/src/cover-image/index.js b/packages/block-library/src/cover-image/index.js
@@ -54,6 +54,8 @@ const blockAttributes = {
 
 export const name = 'core/cover-image';
 
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
+
 export const settings = {
 	title: __( 'Cover Image' ),
 
@@ -157,7 +159,7 @@ export const settings = {
 					<Toolbar>
 						<MediaUpload
 							onSelect={ onSelectImage }
-							type="image"
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							value={ id }
 							render={ ( { open } ) => (
 								<IconButton
@@ -216,7 +218,7 @@ export const settings = {
 						} }
 						onSelect={ onSelectImage }
 						accept="image/*"
-						type="image"
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						notices={ noticeUI }
 						onError={ noticeOperations.createErrorNotice }
 					/>

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -56,7 +56,6 @@ class FileEdit extends Component {
 			const file = getBlobByURL( href );
 
 			mediaUpload( {
-				allowedType: '*',
 				filesList: [ file ],
 				onFileChange: ( [ media ] ) => this.onSelectFile( media ),
 				onError: ( message ) => {
@@ -149,7 +148,6 @@ class FileEdit extends Component {
 					notices={ noticeUI }
 					onError={ noticeOperations.createErrorNotice }
 					accept="*"
-					type="*"
 				/>
 			);
 		}
@@ -174,7 +172,6 @@ class FileEdit extends Component {
 					<Toolbar>
 						<MediaUpload
 							onSelect={ this.onSelectFile }
-							type="*"
 							value={ id }
 							render={ ( { open } ) => (
 								<IconButton

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -38,6 +38,7 @@ const linkOptions = [
 	{ value: 'media', label: __( 'Media File' ) },
 	{ value: 'none', label: __( 'None' ) },
 ];
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
@@ -131,7 +132,7 @@ class GalleryEdit extends Component {
 		const currentImages = this.props.attributes.images || [];
 		const { noticeOperations, setAttributes } = this.props;
 		mediaUpload( {
-			allowedType: 'image',
+			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList: files,
 			onFileChange: ( images ) => {
 				setAttributes( {
@@ -168,7 +169,7 @@ class GalleryEdit extends Component {
 					<Toolbar>
 						<MediaUpload
 							onSelect={ this.onSelectImages }
-							type="image"
+							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							multiple
 							gallery
 							value={ images.map( ( img ) => img.id ) }
@@ -199,7 +200,7 @@ class GalleryEdit extends Component {
 						} }
 						onSelect={ this.onSelectImages }
 						accept="image/*"
-						type="image"
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						multiple
 						notices={ noticeUI }
 						onError={ noticeOperations.createErrorNotice }

diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -136,7 +136,7 @@ export const settings = {
 					mediaUpload( {
 						filesList: files,
 						onFileChange: ( images ) => onChange( block.clientId, { images } ),
-						allowedType: 'image',
+						allowedTypes: [ 'image' ],
 					} );
 					return block;
 				},

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -54,6 +54,7 @@ const LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const LINK_DESTINATION_CUSTOM = 'custom';
+const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 class ImageEdit extends Component {
 	constructor() {
@@ -88,7 +89,7 @@ class ImageEdit extends Component {
 					onFileChange: ( [ image ] ) => {
 						setAttributes( { ...image } );
 					},
-					allowedType: 'image',
+					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
 			}
 		}
@@ -221,7 +222,7 @@ class ImageEdit extends Component {
 				<Toolbar>
 					<MediaUpload
 						onSelect={ this.onSelectImage }
-						type="image"
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						value={ id }
 						render={ ( { open } ) => (
 							<IconButton
@@ -251,7 +252,7 @@ class ImageEdit extends Component {
 						notices={ noticeUI }
 						onError={ noticeOperations.createErrorNotice }
 						accept="image/*"
-						type="image"
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
 					/>
 				</Fragment>
 			);

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -24,6 +24,8 @@ import {
 } from '@wordpress/editor';
 import { getBlobByURL } from '@wordpress/blob';
 
+const ALLOWED_MEDIA_TYPES = [ 'video' ];
+
 class VideoEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -55,7 +57,7 @@ class VideoEdit extends Component {
 						this.setState( { editing: true } );
 						noticeOperations.createErrorNotice( message );
 					},
-					allowedType: 'video',
+					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
 			}
 		}
@@ -138,7 +140,7 @@ class VideoEdit extends Component {
 					onSelect={ onSelectVideo }
 					onSelectURL={ this.onSelectURL }
 					accept="video/*"
-					type="video"
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ this.props.attributes }
 					notices={ noticeUI }
 					onError={ noticeOperations.createErrorNotice }
@@ -198,7 +200,7 @@ class VideoEdit extends Component {
 							<MediaUpload
 								title={ __( 'Select Poster Image' ) }
 								onSelect={ this.onSelectPoster }
-								type="image"
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
 								render={ ( { open } ) => (
 									<Button isDefault onClick={ open }>
 										{ ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) }

diff --git a/packages/editor/src/components/media-placeholder/index.js b/packages/editor/src/components/media-placeholder/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, noop } from 'lodash';
+import { every, get, noop, startsWith } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -15,6 +15,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -34,6 +35,33 @@ class MediaPlaceholder extends Component {
 		this.onFilesUpload = this.onFilesUpload.bind( this );
 	}
 
+	getAllowedTypes() {
+		const { allowedTypes, type: deprecatedType } = this.props;
+		let allowedTypesToUse = allowedTypes;
+		if ( ! allowedTypes && deprecatedType ) {
+			deprecated( 'type property of wp.editor.MediaPlaceholder', {
+				version: '4.2',
+				alternative: 'allowedTypes property containing an array with the allowedTypes or do not pass any property if all types are allowed',
+			} );
+			if ( deprecatedType === '*' ) {
+				allowedTypesToUse = undefined;
+			} else {
+				allowedTypesToUse = [ deprecatedType ];
+			}
+		}
+		return allowedTypesToUse;
+	}
+
+	onlyAllowsImages() {
+		const allowedTypes = this.getAllowedTypes();
+		if ( ! allowedTypes ) {
+			return false;
+		}
+		return every( allowedTypes, ( allowedType ) => {
+			return allowedType === 'image' || startsWith( allowedType, 'image/' );
+		} );
+	}
+
 	componentDidMount() {
 		this.setState( { src: get( this.props.value, [ 'src' ], '' ) } );
 	}
@@ -62,10 +90,11 @@ class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		const { onSelect, type, multiple, onError } = this.props;
+		const { onSelect, multiple, onError } = this.props;
+		const allowedTypes = this.getAllowedTypes();
 		const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
 		mediaUpload( {
-			allowedType: type,
+			allowedTypes,
 			filesList: files,
 			onFileChange: setMedia,
 			onError,
@@ -74,7 +103,6 @@ class MediaPlaceholder extends Component {
 
 	render() {
 		const {
-			type,
 			accept,
 			icon,
 			className,
@@ -86,7 +114,7 @@ class MediaPlaceholder extends Component {
 			multiple = false,
 			notices,
 		} = this.props;
-
+		const allowedTypes = this.getAllowedTypes();
 		return (
 			<Placeholder
 				icon={ icon }
@@ -127,10 +155,10 @@ class MediaPlaceholder extends Component {
 					{ __( 'Upload' ) }
 				</FormFileUpload>
 				<MediaUpload
-					gallery={ multiple && type === 'image' }
+					gallery={ multiple && this.onlyAllowsImages() }
 					multiple={ multiple }
 					onSelect={ onSelect }
-					type={ type }
+					allowedTypes={ allowedTypes }
 					value={ value.id }
 					render={ ( { open } ) => (
 						<Button isLarge onClick={ open }>

diff --git a/packages/editor/src/components/media-upload/README.md b/packages/editor/src/components/media-upload/README.md
@@ -29,11 +29,13 @@ You can check how this component is implemented for the edit post page using `wp
 import { Button } from '@wordpress/components';
 import { MediaUpload } from '@wordpress/editor';
 
+const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+
 function MyMediaUploader() {
 	return (
 		<MediaUpload
 			onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
-			type="image"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			value={ mediaId }
 			render={ ( { open } ) => (
 				<Button onClick={ open }>
@@ -49,11 +51,14 @@ function MyMediaUploader() {
 
 The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
 
-### type
+### allowedTypes
 
-Type of the media to upload/select from the media library (image, video, audio).
+Array with the types of the media to upload/select from the media library.
+Each type is a string that can contain the general mime type e.g: 'image', 'audio', 'text',
+or the complete mime type e.g: 'audio/mpeg', 'image/gif'.
+If allowedTypes is unset all mime types should be allowed.
 
-- Type: `String`
+- Type: `Array`
 - Required: No
 
 ### multiple