Add error notices mechanism to media placeholder; Make upload error n…

…otices available in all blocks. (#6957)

Making error notices available directly in media placeholder makes all blocks even the ones created by the community take advantage of our upload error notices system.
Blocks can opt-out of this behavior and manage the notices themselves like the gallery is doing.
Gallery manages the upload error notices, because in the media placeholder for a gallery we may select many files, some may have been uploaded correctly and in some, we may have errors. When some file is uploaded correctly we stop displaying the placeholder, so if a file upload went wrong we would not display the notice. Given that the notices for the gallery are managed at the block level that problem does not happen.

core-blocks/gallery/edit.js

@@ -211,8 +211,9 @@ class GalleryEdit extends Component {
 						onSelect={ this.onSelectImages }
 						accept="image/*"
 						type="image"
+						disableMaxUploadErrorMessages
 						multiple
-						notices={ noticeUI }
+						additionalNotices={ noticeUI }
 						onError={ noticeOperations.createErrorNotice }
 					/>
 				</Fragment>

core-blocks/image/edit.js

@@ -26,7 +26,6 @@ import {
 	TextControl,
 	TextareaControl,
 	Toolbar,
-	withNotices,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import {
@@ -178,7 +177,7 @@ class ImageEdit extends Component {
 	}
 
 	render() {
-		const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection } = this.props;
+		const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, toggleSelection } = this.props;
 		const { url, alt, caption, align, id, href, width, height } = attributes;
 
 		const controls = (
@@ -221,8 +220,6 @@ class ImageEdit extends Component {
 						} }
 						className={ className }
 						onSelect={ this.onSelectImage }
-						notices={ noticeUI }
-						onError={ noticeOperations.createErrorNotice }
 						accept="image/*"
 						type="image"
 					/>
@@ -318,7 +315,6 @@ class ImageEdit extends Component {
 		return (
 			<Fragment>
 				{ controls }
-				{ noticeUI }
 				<figure className={ classes }>
 					<ImageSize src={ url } dirtynessTrigger={ align }>
 						{ ( sizes ) => {
@@ -419,5 +415,4 @@ export default compose( [
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
-	withNotices,
 ] )( ImageEdit );

editor/components/media-placeholder/index.js

@@ -12,9 +12,10 @@ import {
 	FormFileUpload,
 	Placeholder,
 	DropZone,
+	withNotices,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -63,13 +64,26 @@ class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		const { onSelect, type, multiple, onError } = this.props;
+		/**
+		 * 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 setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
 		editorMediaUpload( {
 			allowedType: type,
 			filesList: files,
 			onFileChange: setMedia,
-			onError,
+			onError: ( errorMessage ) => {
+				onError( errorMessage );
+				if ( disableMaxUploadErrorMessages === false ) {
+					noticeOperations.createErrorNotice( errorMessage );
+				}
+			},
 		} );
 	}
 
@@ -85,7 +99,8 @@ class MediaPlaceholder extends Component {
 			onSelectUrl,
 			onHTMLDrop = noop,
 			multiple = false,
-			notices,
+			additionalNotices,
+			noticeUI,
 		} = this.props;
 
 		return (
@@ -94,7 +109,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={ notices }
+				notices={ <Fragment>{ additionalNotices }{ noticeUI }</Fragment> }
 			>
 				<DropZone
 					onFilesDrop={ this.onFilesUpload }
@@ -141,4 +156,4 @@ class MediaPlaceholder extends Component {
 	}
 }
 
-export default MediaPlaceholder;
+export default withNotices( MediaPlaceholder );