Use the MediaUploadCheck component before each Upload component (#11924)

* Use the MediaUploadCheck component before each Upload component This PR should fix #11910 1. It adds a MediaUploadCheck component before the forgotten MediaUpload components used directly in some blocks : - within the edit toolbar buttons of the cover, file and image blocks, - within the Poster image setting of the video block. 2. It also adds a MediaUploadCheck component before rendering the Block Drop Zone. * Edit the MediaUpload documentation about Upload Permissions Include some informations about how to make sure the current user has upload permissions (by wrapping the MediaUpload component into the MediaUploadCheck one)
WordPress · Nov 17, 2018 · 88b5033 · 88b5033
1 parent 1b6cf07
commit 88b5033
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 86 deletions.
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -26,6 +26,7 @@ import {
 	BlockAlignmentToolbar,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadCheck,
 	AlignmentToolbar,
 	PanelColorSettings,
 	RichText,
@@ -259,21 +260,23 @@ export const settings = {
 										setAttributes( { contentAlign: nextAlign } );
 									} }
 								/>
-								<Toolbar>
-									<MediaUpload
-										onSelect={ onSelectMedia }
-										allowedTypes={ ALLOWED_MEDIA_TYPES }
-										value={ id }
-										render={ ( { open } ) => (
-											<IconButton
-												className="components-toolbar__control"
-												label={ __( 'Edit media' ) }
-												icon="edit"
-												onClick={ open }
-											/>
-										) }
-									/>
-								</Toolbar>
+								<MediaUploadCheck>
+									<Toolbar>
+										<MediaUpload
+											onSelect={ onSelectMedia }
+											allowedTypes={ ALLOWED_MEDIA_TYPES }
+											value={ id }
+											render={ ( { open } ) => (
+												<IconButton
+													className="components-toolbar__control"
+													label={ __( 'Edit media' ) }
+													icon="edit"
+													onClick={ open }
+												/>
+											) }
+										/>
+									</Toolbar>
+								</MediaUploadCheck>
 							</Fragment>
 						) }
 					</BlockControls>

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -19,6 +19,7 @@ import { Component, Fragment } from '@wordpress/element';
 import {
 	MediaUpload,
 	MediaPlaceholder,
+	MediaUploadCheck,
 	BlockControls,
 	RichText,
 	mediaUpload,
@@ -165,20 +166,22 @@ class FileEdit extends Component {
 					} }
 				/>
 				<BlockControls>
-					<Toolbar>
-						<MediaUpload
-							onSelect={ this.onSelectFile }
-							value={ id }
-							render={ ( { open } ) => (
-								<IconButton
-									className="components-toolbar__control"
-									label={ __( 'Edit file' ) }
-									onClick={ open }
-									icon="edit"
-								/>
-							) }
-						/>
-					</Toolbar>
+					<MediaUploadCheck>
+						<Toolbar>
+							<MediaUpload
+								onSelect={ this.onSelectFile }
+								value={ id }
+								render={ ( { open } ) => (
+									<IconButton
+										className="components-toolbar__control"
+										label={ __( 'Edit file' ) }
+										onClick={ open }
+										icon="edit"
+									/>
+								) }
+							/>
+						</Toolbar>
+					</MediaUploadCheck>
 				</BlockControls>
 				<div className={ classes }>
 					<div className={ `${ className }__content-wrapper` }>

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -39,6 +39,7 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadCheck,
 	BlockAlignmentToolbar,
 	mediaUpload,
 } from '@wordpress/editor';
@@ -328,21 +329,23 @@ class ImageEdit extends Component {
 				);
 			} else {
 				toolbarEditButton = (
-					<Toolbar>
-						<MediaUpload
-							onSelect={ this.onSelectImage }
-							allowedTypes={ ALLOWED_MEDIA_TYPES }
-							value={ id }
-							render={ ( { open } ) => (
-								<IconButton
-									className="components-toolbar__control"
-									label={ __( 'Edit image' ) }
-									icon="edit"
-									onClick={ open }
-								/>
-							) }
-						/>
-					</Toolbar>
+					<MediaUploadCheck>
+						<Toolbar>
+							<MediaUpload
+								onSelect={ this.onSelectImage }
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								value={ id }
+								render={ ( { open } ) => (
+									<IconButton
+										className="components-toolbar__control"
+										label={ __( 'Edit image' ) }
+										icon="edit"
+										onClick={ open }
+									/>
+								) }
+							/>
+						</Toolbar>
+					</MediaUploadCheck>
 				);
 			}
 		}

diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -19,6 +19,7 @@ import {
 	InspectorControls,
 	MediaPlaceholder,
 	MediaUpload,
+	MediaUploadCheck,
 	RichText,
 	mediaUpload,
 } from '@wordpress/editor';
@@ -207,30 +208,32 @@ class VideoEdit extends Component {
 								{ value: 'none', label: __( 'None' ) },
 							] }
 						/>
-						<BaseControl
-							className="editor-video-poster-control"
-							label={ __( 'Poster Image' ) }
-						>
-							<MediaUpload
-								title={ __( 'Select Poster Image' ) }
-								onSelect={ this.onSelectPoster }
-								allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }
-								render={ ( { open } ) => (
-									<Button
-										isDefault
-										onClick={ open }
-										ref={ this.posterImageButton }
-									>
-										{ ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) }
+						<MediaUploadCheck>
+							<BaseControl
+								className="editor-video-poster-control"
+								label={ __( 'Poster Image' ) }
+							>
+								<MediaUpload
+									title={ __( 'Select Poster Image' ) }
+									onSelect={ this.onSelectPoster }
+									allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }
+									render={ ( { open } ) => (
+										<Button
+											isDefault
+											onClick={ open }
+											ref={ this.posterImageButton }
+										>
+											{ ! this.props.attributes.poster ? __( 'Select Poster Image' ) : __( 'Replace image' ) }
+										</Button>
+									) }
+								/>
+								{ !! this.props.attributes.poster &&
+									<Button onClick={ this.onRemovePoster } isLink isDestructive>
+										{ __( 'Remove Poster Image' ) }
 									</Button>
-								) }
-							/>
-							{ !! this.props.attributes.poster &&
-								<Button onClick={ this.onRemovePoster } isLink isDestructive>
-									{ __( 'Remove Poster Image' ) }
-								</Button>
-							}
-						</BaseControl>
+								}
+							</BaseControl>
+						</MediaUploadCheck>
 					</PanelBody>
 				</InspectorControls>
 				<figure className={ className }>

diff --git a/packages/editor/src/components/block-drop-zone/index.js b/packages/editor/src/components/block-drop-zone/index.js
@@ -19,6 +19,11 @@ import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import MediaUploadCheck from '../media-upload/check';
+
 const parseDropEvent = ( event ) => {
 	let result = {
 		srcRootClientId: null,
@@ -111,14 +116,16 @@ class BlockDropZone extends Component {
 		const isAppender = index === undefined;
 
 		return (
-			<DropZone
-				className={ classnames( 'editor-block-drop-zone', {
-					'is-appender': isAppender,
-				} ) }
-				onFilesDrop={ this.onFilesDrop }
-				onHTMLDrop={ this.onHTMLDrop }
-				onDrop={ this.onDrop }
-			/>
+			<MediaUploadCheck>
+				<DropZone
+					className={ classnames( 'editor-block-drop-zone', {
+						'is-appender': isAppender,
+					} ) }
+					onFilesDrop={ this.onFilesDrop }
+					onHTMLDrop={ this.onHTMLDrop }
+					onDrop={ this.onDrop }
+				/>
+			</MediaUploadCheck>
 		);
 	}
 }

diff --git a/packages/editor/src/components/media-upload/README.md b/packages/editor/src/components/media-upload/README.md
@@ -24,25 +24,28 @@ You can check how this component is implemented for the edit post page using `wp
 
 ## Usage
 
+To make sure the current user has Upload permissions, you need to wrap the MediaUpload component into the MediaUploadCheck one.
 
 ```jsx
 import { Button } from '@wordpress/components';
-import { MediaUpload } from '@wordpress/editor';
+import { MediaUpload, MediaUploadCheck } from '@wordpress/editor';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 function MyMediaUploader() {
 	return (
-		<MediaUpload
-			onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			value={ mediaId }
-			render={ ( { open } ) => (
-				<Button onClick={ open }>
-					Open Media Library
-				</Button>
-			) }
-		/>
+		<MediaUploadCheck>
+			<MediaUpload
+				onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				value={ mediaId }
+				render={ ( { open } ) => (
+					<Button onClick={ open }>
+						Open Media Library
+					</Button>
+				) }
+			/>
+		</MediaUploadCheck>
 	);
 }
 ```