Fix bug where server side upload errors may disapear automatically

WordPress · Jun 19, 2018 · 5950495 · 5950495
1 parent 5a65727
commit 5950495
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 34 deletions.
diff --git a/core-blocks/audio/edit.js b/core-blocks/audio/edit.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar } from '@wordpress/components';
+import { IconButton, Toolbar, withNotices } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import {
 	MediaPlaceholder,
@@ -15,7 +15,7 @@ import {
  */
 import './editor.scss';
 
-export default class AudioEdit extends Component {
+class AudioEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		// edit component has its own src in the state so it can be edited
@@ -27,7 +27,7 @@ export default class AudioEdit extends Component {
 
 	render() {
 		const { caption, src } = this.props.attributes;
-		const { setAttributes, isSelected, className } = this.props;
+		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
 			this.setState( { editing: true } );
@@ -38,7 +38,12 @@ export default class AudioEdit extends Component {
 				// selected media, then switches off the editing UI
 				setAttributes( { src: media.url, id: media.id } );
 				this.setState( { src: media.url, editing: false } );
+				return;
 			}
+			// in this case there was an error and we should continue in the editing state
+			// previous attributes should be removed because they may be temporary blob urls
+			setAttributes( { src: undefined, id: undefined } );
+			switchToEditing();
 		};
 		const onSelectUrl = ( newSrc ) => {
 			// set the block's src from the edit component's state, and switch off the editing UI
@@ -62,6 +67,8 @@ export default class AudioEdit extends Component {
 					accept="audio/*"
 					type="audio"
 					value={ this.props.attributes }
+					notices={ noticeUI }
+					onError={ noticeOperations.createErrorNotice }
 				/>
 			);
 		}
@@ -96,3 +103,5 @@ export default class AudioEdit extends Component {
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}
 }
+
+export default withNotices( AudioEdit );
diff --git a/core-blocks/cover-image/index.js b/core-blocks/cover-image/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
+import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar, withNotices } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
@@ -99,10 +99,16 @@ export const settings = {
 		}
 	},
 
-	edit( { attributes, setAttributes, isSelected, className } ) {
+	edit: withNotices( ( { attributes, setAttributes, isSelected, className, noticeOperations, noticeUI } ) => {
 		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
-		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
+		const onSelectImage = ( media ) => {
+			if ( media ) {
+				setAttributes( { url: media.url, id: media.id } );
+				return;
+			}
+			setAttributes( { url: undefined, id: undefined } );
+		};
 		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 
@@ -193,6 +199,8 @@ export const settings = {
 						onSelect={ onSelectImage }
 						accept="image/*"
 						type="image"
+						notices={ noticeUI }
+						onError={ noticeOperations.createErrorNotice }
 					/>
 				</Fragment>
 			);
@@ -219,7 +227,7 @@ export const settings = {
 				</div>
 			</Fragment>
 		);
-	},
+	} ),
 
 	save( { attributes, className } ) {
 		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;

diff --git a/core-blocks/gallery/edit.js b/core-blocks/gallery/edit.js
@@ -211,9 +211,8 @@ class GalleryEdit extends Component {
 						onSelect={ this.onSelectImages }
 						accept="image/*"
 						type="image"
-						disableMaxUploadErrorMessages
 						multiple
-						additionalNotices={ noticeUI }
+						notices={ noticeUI }
 						onError={ noticeOperations.createErrorNotice }
 					/>
 				</Fragment>

diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
@@ -26,6 +26,7 @@ import {
 	TextControl,
 	TextareaControl,
 	Toolbar,
+	withNotices,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import {
@@ -177,7 +178,7 @@ class ImageEdit extends Component {
 	}
 
 	render() {
-		const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, toggleSelection } = this.props;
+		const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection } = this.props;
 		const { url, alt, caption, align, id, href, width, height } = attributes;
 
 		const controls = (
@@ -220,6 +221,8 @@ class ImageEdit extends Component {
 						} }
 						className={ className }
 						onSelect={ this.onSelectImage }
+						notices={ noticeUI }
+						onError={ noticeOperations.createErrorNotice }
 						accept="image/*"
 						type="image"
 					/>
@@ -415,4 +418,5 @@ export default compose( [
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
+	withNotices,
 ] )( ImageEdit );
diff --git a/core-blocks/video/edit.js b/core-blocks/video/edit.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, Toolbar } from '@wordpress/components';
+import { IconButton, Toolbar, withNotices } from '@wordpress/components';
 import { Component, Fragment } from '@wordpress/element';
 import {
 	MediaPlaceholder,
@@ -15,7 +15,7 @@ import {
  */
 import './editor.scss';
 
-export default class VideoEdit extends Component {
+class VideoEdit extends Component {
 	constructor() {
 		super( ...arguments );
 		// edit component has its own src in the state so it can be edited
@@ -27,7 +27,7 @@ export default class VideoEdit extends Component {
 
 	render() {
 		const { caption, src } = this.props.attributes;
-		const { setAttributes, isSelected, className } = this.props;
+		const { setAttributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { editing } = this.state;
 		const switchToEditing = () => {
 			this.setState( { editing: true } );
@@ -38,7 +38,12 @@ export default class VideoEdit extends Component {
 				// selected media, then switches off the editing UI
 				setAttributes( { src: media.url, id: media.id } );
 				this.setState( { src: media.url, editing: false } );
+				return;
 			}
+			// in this case there was an error and we should continue in the editing state
+			// previous attributes should be removed because they may be temporary blob urls
+			setAttributes( { src: undefined, id: undefined } );
+			switchToEditing();
 		};
 		const onSelectUrl = ( newSrc ) => {
 			// set the block's src from the edit component's state, and switch off the editing UI
@@ -62,6 +67,8 @@ export default class VideoEdit extends Component {
 					accept="video/*"
 					type="video"
 					value={ this.props.attributes }
+					notices={ noticeUI }
+					onError={ noticeOperations.createErrorNotice }
 				/>
 			);
 		}
@@ -96,3 +103,5 @@ export default class VideoEdit extends Component {
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}
 }
+
+export default withNotices( VideoEdit );
diff --git a/editor/components/media-placeholder/index.js b/editor/components/media-placeholder/index.js
@@ -12,10 +12,9 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
-	withNotices,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -64,26 +63,13 @@ class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		/**
-		 * We use a prop named `disable`, set to `false` by default, because it makes for a nicer
-		 * component prop API. eg:
-		 *
-		 * <MediaPlaceholder disableMaxUploadErrorMessages />
-		 * instead of:
-		 * <MediaPlaceholder enableMaxUploadErrorMessages={ false } />
-		 */
-		const { onSelect, type, multiple, onError = noop, disableMaxUploadErrorMessages = false, noticeOperations } = this.props;
+		const { onSelect, type, multiple, onError } = this.props;
 		const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
 		editorMediaUpload( {
 			allowedType: type,
 			filesList: files,
 			onFileChange: setMedia,
-			onError: ( errorMessage ) => {
-				onError( errorMessage );
-				if ( disableMaxUploadErrorMessages === false ) {
-					noticeOperations.createErrorNotice( errorMessage );
-				}
-			},
+			onError,
 		} );
 	}
 
@@ -99,8 +85,7 @@ class MediaPlaceholder extends Component {
 			onSelectUrl,
 			onHTMLDrop = noop,
 			multiple = false,
-			additionalNotices,
-			noticeUI,
+			notices,
 		} = this.props;
 
 		return (
@@ -109,7 +94,7 @@ class MediaPlaceholder extends Component {
 				label={ labels.title }
 				instructions={ sprintf( __( 'Drag %s, upload a new one or select a file from your library.' ), labels.name ) }
 				className={ classnames( 'editor-media-placeholder', className ) }
-				notices={ <Fragment>{ additionalNotices }{ noticeUI }</Fragment> }
+				notices={ notices }
 			>
 				<DropZone
 					onFilesDrop={ this.onFilesUpload }
@@ -156,4 +141,4 @@ class MediaPlaceholder extends Component {
 	}
 }
 
-export default withNotices( MediaPlaceholder );
+export default MediaPlaceholder;