From a5ceee20ab3bee959b044687a1e0b02491f0419a Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 18 Jun 2018 19:01:37 +0200
Subject: [PATCH] Add error notices mechanism to media placeholder; Make upload
 error notices 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                  |  3 ++-
 core-blocks/image/edit.js                    |  7 +----
 editor/components/media-placeholder/index.js | 27 +++++++++++++++-----
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/core-blocks/gallery/edit.js b/core-blocks/gallery/edit.js
index 340ada695bc98b..0fe7402bbafd80 100644
--- a/core-blocks/gallery/edit.js
+++ b/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>
diff --git a/core-blocks/image/edit.js b/core-blocks/image/edit.js
index 691f3f7abb5330..a7f29db06264b7 100644
--- a/core-blocks/image/edit.js
+++ b/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 );
diff --git a/editor/components/media-placeholder/index.js b/editor/components/media-placeholder/index.js
index de4b76c93907b4..42ac87f42e7528 100644
--- a/editor/components/media-placeholder/index.js
+++ b/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 );