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.
WordPress · Nov 17, 2018 · e933573 · e933573
1 parent 1b6cf07
commit e933573
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 75 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>
 		);
 	}
 }