Refactor the MediaUpload components to check upload permissions by ch…

…ecking the upload handler existence
WordPress · Mar 26, 2019 · c28f11f · c28f11f
1 parent 59e56dc
commit c28f11f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import {
-	defaultTo,
 	every,
 	get,
 	isArray,
@@ -152,18 +151,18 @@ export class MediaPlaceholder extends Component {
 		const {
 			allowedTypes = [],
 			className,
-			hasUploadPermissions,
 			icon,
 			isAppender,
 			labels = {},
 			notices,
 			onSelectURL,
+			mediaUpload,
 		} = this.props;
 
 		let instructions = labels.instructions;
 		let title = labels.title;
 
-		if ( ! hasUploadPermissions && ! onSelectURL ) {
+		if ( ! mediaUpload && ! onSelectURL ) {
 			instructions = __( 'To edit this block, you need permission to upload media.' );
 		}
 
@@ -173,27 +172,15 @@ export class MediaPlaceholder extends Component {
 			const isImage = isOneType && 'image' === allowedTypes[ 0 ];
 			const isVideo = isOneType && 'video' === allowedTypes[ 0 ];
 
-			if ( instructions === undefined ) {
-				if ( hasUploadPermissions ) {
-					instructions = __( 'Drag a media file, upload a new one or select a file from your library.' );
-
-					if ( isAudio ) {
-						instructions = __( 'Drag an audio, upload a new one or select a file from your library.' );
-					} else if ( isImage ) {
-						instructions = __( 'Drag an image, upload a new one or select a file from your library.' );
-					} else if ( isVideo ) {
-						instructions = __( 'Drag a video, upload a new one or select a file from your library.' );
-					}
-				} else if ( ! hasUploadPermissions && onSelectURL ) {
-					instructions = __( 'Given your current role, you can only link a media file, you cannot upload.' );
-
-					if ( isAudio ) {
-						instructions = __( 'Given your current role, you can only link an audio, you cannot upload.' );
-					} else if ( isImage ) {
-						instructions = __( 'Given your current role, you can only link an image, you cannot upload.' );
-					} else if ( isVideo ) {
-						instructions = __( 'Given your current role, you can only link a video, you cannot upload.' );
-					}
+			if ( instructions === undefined && mediaUpload ) {
+				instructions = __( 'Drag a media file, upload a new one or select a file from your library.' );
+
+				if ( isAudio ) {
+					instructions = __( 'Drag an audio, upload a new one or select a file from your library.' );
+				} else if ( isImage ) {
+					instructions = __( 'Drag an image, upload a new one or select a file from your library.' );
+				} else if ( isVideo ) {
+					instructions = __( 'Drag a video, upload a new one or select a file from your library.' );
 				}
 			}
 
@@ -400,11 +387,9 @@ export class MediaPlaceholder extends Component {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { canUser } = select( 'core' );
 	const { getSettings } = select( 'core/block-editor' );
 
 	return {
-		hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
 		mediaUpload: getSettings().__experimentalMediaUpload,
 	};
 } );

diff --git a/packages/block-editor/src/components/media-upload/check.js b/packages/block-editor/src/components/media-upload/check.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { defaultTo } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,9 +8,9 @@ export function MediaUploadCheck( { hasUploadPermissions, fallback = null, child
 }
 
 export default withSelect( ( select ) => {
-	const { canUser } = select( 'core' );
+	const { getSettings } = select( 'core/block-editor' );
 
 	return {
-		hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
+		hasUploadPermissions: !! getSettings().__experimentalMediaUpload,
 	};
 } )( MediaUploadCheck );
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, pick } from 'lodash';
+import { map, pick, defaultTo } from 'lodash';
 import memize from 'memize';
 
 /**
@@ -71,7 +71,7 @@ class EditorProvider extends Component {
 		}
 	}
 
-	getBlockEditorSettings( settings, meta, onMetaChange, reusableBlocks ) {
+	getBlockEditorSettings( settings, meta, onMetaChange, reusableBlocks, hasUploadPermissions ) {
 		return {
 			...pick( settings, [
 				'alignWide',
@@ -97,7 +97,7 @@ class EditorProvider extends Component {
 				onChange: onMetaChange,
 			},
 			__experimentalReusableBlocks: reusableBlocks,
-			__experimentalMediaUpload: mediaUpload,
+			__experimentalMediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalFetchLinkSuggestions: fetchLinkSuggestions,
 		};
 	}
@@ -137,14 +137,15 @@ class EditorProvider extends Component {
 			onMetaChange,
 			reusableBlocks,
 			resetEditorBlocksWithoutUndoLevel,
+			hasUploadPermissions,
 		} = this.props;
 
 		if ( ! isReady ) {
 			return null;
 		}
 
 		const editorSettings = this.getBlockEditorSettings(
-			settings, meta, onMetaChange, reusableBlocks
+			settings, meta, onMetaChange, reusableBlocks, hasUploadPermissions
 		);
 
 		return (
@@ -169,11 +170,14 @@ export default compose( [
 			getEditedPostAttribute,
 			__experimentalGetReusableBlocks,
 		} = select( 'core/editor' );
+		const { canUser } = select( 'core' );
+
 		return {
 			isReady: isEditorReady(),
 			blocks: getEditorBlocks(),
 			meta: getEditedPostAttribute( 'meta' ),
 			reusableBlocks: __experimentalGetReusableBlocks(),
+			hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
 		};
 	} ),
 	withDispatch( ( dispatch ) => {