Update for MediaPlaceholder component: don't stack error messages whe…

…n re-uploading (#14721) * Used removeAllNotices in onUploadError. * Updated GalleryEdit. * Updated MediaTextEdit. * Updated VideoEdit. * Updated CoverEdit. * Updated FileEdit. * Fixed tab spaces.
WordPress · Jun 10, 2019 · f46d6f4 · f46d6f4
1 parent 40797c6
commit f46d6f4
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 13 deletions.
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -45,6 +45,7 @@ class AudioEdit extends Component {
 
 		this.toggleAttribute = this.toggleAttribute.bind( this );
 		this.onSelectURL = this.onSelectURL.bind( this );
+		this.onUploadError = this.onUploadError.bind( this );
 	}
 
 	componentDidMount() {
@@ -98,13 +99,19 @@ class AudioEdit extends Component {
 		this.setState( { editing: false } );
 	}
 
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	getAutoplayHelp( checked ) {
 		return checked ? __( 'Note: Autoplaying audio may cause usability issues for some visitors.' ) : null;
 	}
 
 	render() {
 		const { autoplay, caption, loop, preload, src } = this.props.attributes;
-		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
+		const { setAttributes, isSelected, className, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
 			this.setState( { editing: true } );
@@ -133,7 +140,7 @@ class AudioEdit extends Component {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ this.props.attributes }
 					notices={ noticeUI }
-					onError={ noticeOperations.createErrorNotice }
+					onError={ this.onUploadError }
 				/>
 			);
 		}

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -72,6 +72,7 @@ class CoverEdit extends Component {
 		this.imageRef = createRef();
 		this.videoRef = createRef();
 		this.changeIsDarkIfRequired = this.changeIsDarkIfRequired.bind( this );
+		this.onUploadError = this.onUploadError.bind( this );
 	}
 
 	componentDidMount() {
@@ -82,12 +83,17 @@ class CoverEdit extends Component {
 		this.handleBackgroundMode( prevProps );
 	}
 
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	render() {
 		const {
 			attributes,
 			setAttributes,
 			className,
-			noticeOperations,
 			noticeUI,
 			overlayColor,
 			setOverlayColor,
@@ -243,7 +249,7 @@ class CoverEdit extends Component {
 						accept="image/*,video/*"
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						notices={ noticeUI }
-						onError={ noticeOperations.createErrorNotice }
+						onError={ this.onUploadError }
 					/>
 				</>
 			);

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -47,6 +47,7 @@ class FileEdit extends Component {
 		this.changeLinkDestinationOption = this.changeLinkDestinationOption.bind( this );
 		this.changeOpenInNewWindow = this.changeOpenInNewWindow.bind( this );
 		this.changeShowDownloadButton = this.changeShowDownloadButton.bind( this );
+		this.onUploadError = this.onUploadError.bind( this );
 
 		this.state = {
 			hasError: false,
@@ -100,6 +101,12 @@ class FileEdit extends Component {
 		}
 	}
 
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	confirmCopyURL() {
 		this.setState( { showCopyConfirmation: true } );
 	}
@@ -130,7 +137,6 @@ class FileEdit extends Component {
 			attributes,
 			setAttributes,
 			noticeUI,
-			noticeOperations,
 			media,
 		} = this.props;
 		const {
@@ -155,7 +161,7 @@ class FileEdit extends Component {
 					} }
 					onSelect={ this.onSelectFile }
 					notices={ noticeUI }
-					onError={ noticeOperations.createErrorNotice }
+					onError={ this.onUploadError }
 					accept="*"
 				/>
 			);

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -54,6 +54,7 @@ class GalleryEdit extends Component {
 		this.onMoveForward = this.onMoveForward.bind( this );
 		this.onMoveBackward = this.onMoveBackward.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
+		this.onUploadError = this.onUploadError.bind( this );
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 
@@ -133,6 +134,12 @@ class GalleryEdit extends Component {
 		} );
 	}
 
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	setLinkTo( value ) {
 		this.setAttributes( { linkTo: value } );
 	}
@@ -178,7 +185,7 @@ class GalleryEdit extends Component {
 	}
 
 	render() {
-		const { attributes, isSelected, className, noticeOperations, noticeUI } = this.props;
+		const { attributes, isSelected, className, noticeUI } = this.props;
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
 
 		const hasImages = !! images.length;
@@ -223,7 +230,7 @@ class GalleryEdit extends Component {
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				multiple
 				value={ hasImages ? images : undefined }
-				onError={ noticeOperations.createErrorNotice }
+				onError={ this.onUploadError }
 				notices={ hasImages ? undefined : noticeUI }
 			/>
 		);

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -165,6 +165,7 @@ class ImageEdit extends Component {
 
 	onUploadError( message ) {
 		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
 		noticeOperations.createErrorNotice( message );
 		this.setState( {
 			isEditing: true,

diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { IconButton, ResizableBox, Toolbar } from '@wordpress/components';
+import { IconButton, ResizableBox, Toolbar, withNotices } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
@@ -31,6 +31,17 @@ export function imageFillStyles( url, focalPoint ) {
 }
 
 class MediaContainer extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onUploadError = this.onUploadError.bind( this );
+	}
+
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	renderToolbarEditButton() {
 		const { mediaId, onSelectMedia } = this.props;
 		return (
@@ -80,7 +91,7 @@ class MediaContainer extends Component {
 	}
 
 	renderPlaceholder() {
-		const { onSelectMedia, className } = this.props;
+		const { onSelectMedia, className, noticeUI } = this.props;
 		return (
 			<MediaPlaceholder
 				icon={ <BlockIcon icon={ icon } /> }
@@ -91,6 +102,8 @@ class MediaContainer extends Component {
 				onSelect={ onSelectMedia }
 				accept="image/*,video/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				notices={ noticeUI }
+				onError={ this.onUploadError }
 			/>
 		);
 	}
@@ -137,4 +150,4 @@ class MediaContainer extends Component {
 	}
 }
 
-export default MediaContainer;
+export default withNotices( MediaContainer );
diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js
@@ -57,6 +57,7 @@ class VideoEdit extends Component {
 		this.onSelectURL = this.onSelectURL.bind( this );
 		this.onSelectPoster = this.onSelectPoster.bind( this );
 		this.onRemovePoster = this.onRemovePoster.bind( this );
+		this.onUploadError = this.onUploadError.bind( this );
 	}
 
 	componentDidMount() {
@@ -126,6 +127,12 @@ class VideoEdit extends Component {
 		this.posterImageButton.current.focus();
 	}
 
+	onUploadError( message ) {
+		const { noticeOperations } = this.props;
+		noticeOperations.removeAllNotices();
+		noticeOperations.createErrorNotice( message );
+	}
+
 	getAutoplayHelp( checked ) {
 		return checked ? __( 'Note: Autoplaying videos may cause usability issues for some visitors.' ) : null;
 	}
@@ -146,7 +153,6 @@ class VideoEdit extends Component {
 			className,
 			instanceId,
 			isSelected,
-			noticeOperations,
 			noticeUI,
 			setAttributes,
 		} = this.props;
@@ -179,7 +185,7 @@ class VideoEdit extends Component {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ this.props.attributes }
 					notices={ noticeUI }
-					onError={ noticeOperations.createErrorNotice }
+					onError={ this.onUploadError }
 				/>
 			);
 		}