Fix max upload size error message

components/higher-order/with-notices/index.js

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import uuid from 'uuid/v4';
+
+/**
+ * WordPress dependencies
+ */
+import { Component, createHigherOrderComponent } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import NoticeList from '../../notice/list';
+
+/**
+ * Override the default edit UI to include notices if supported.
+ *
+ * @param  {function|Component} OriginalComponent Original component.
+ * @return {Component}                            Wrapped component.
+ */
+export default createHigherOrderComponent( ( OriginalComponent ) => {
+	return class WrappedBlockEdit extends Component {
+		constructor() {
+			super( ...arguments );
+
+			this.createNotice = this.createNotice.bind( this );
+			this.createErrorNotice = this.createErrorNotice.bind( this );
+			this.removeNotice = this.removeNotice.bind( this );
+			this.removeAllNotices = this.removeAllNotices.bind( this );
+
+			this.state = {
+				noticeList: [],
+			};
+
+			this.noticeOperations = {
+				createNotice: this.createNotice,
+				createErrorNotice: this.createErrorNotice,
+				removeAllNotices: this.removeAllNotices,
+				removeNotice: this.removeNotice,
+			};
+		}
+
+		/**
+		* Function passed down as a prop that adds a new notice.
+		*
+		* @param {Object} notice  Notice to add.
+		*/
+		createNotice( notice ) {
+			const noticeToAdd = notice.id ? notice : { ...notice, id: uuid() };
+			this.setState( ( state ) => ( {
+				noticeList: [ ...state.noticeList, noticeToAdd ],
+			} ) );
+		}
+
+		/**
+		* Function passed as a prop that adds a new error notice.
+		*
+		* @param {string} msg  Error message of the notice.
+		*/
+		createErrorNotice( msg ) {
+			this.createNotice( { status: 'error', content: msg } );
+		}
+
+		/**
+		* Removes a notice by id.
+		*
+		* @param {string} id  Id of the notice to remove.
+		*/
+		removeNotice( id ) {
+			this.setState( ( state ) => ( {
+				noticeList: state.noticeList.filter( ( notice ) => notice.id !== id ),
+			} ) );
+		}
+
+		/**
+		* Removes all notices
+		*/
+		removeAllNotices() {
+			this.setState( {
+				noticeList: [],
+			} );
+		}
+
+		render() {
+			return (
+				<OriginalComponent
+					noticeList={ this.state.noticeList }
+					noticeOperations={ this.noticeOperations }
+					noticeUI={
+						this.state.noticeList.length > 0 && <NoticeList
+							className="components-with-notices-ui"
+							notices={ this.state.noticeList }
+							onRemove={ this.removeNotice }
+						/>
+					}
+					{ ...this.props }
+				/>
+			);
+		}
+	};
+} );

components/index.js

@@ -66,6 +66,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withGlobalEvents } from './higher-order/with-global-events';
 export { default as withInstanceId } from './higher-order/with-instance-id';
+export { default as withNotices } from './higher-order/with-notices';
 export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as withState } from './higher-order/with-state';

components/notice/list.js

@@ -8,11 +8,21 @@ import { noop, omit } from 'lodash';
  */
 import Notice from './';
 
-function NoticeList( { notices, onRemove = noop, children } ) {
+/**
+* Renders a list of notices.
+*
+* @param  {Object}   $0           Props passed to the component.
+* @param  {Array}    $0.notices   Array of notices to render.
+* @param  {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
+* @param  {Object}   $0.className Name of the class used by the component.
+* @param  {Object}   $0.children  Array of childs to be rendered inside the notice list.
+* @return {Object}                The rendered notices list.
+*/
+function NoticeList( { notices, onRemove = noop, className = 'components-notice-list', children } ) {
 	const removeNotice = ( id ) => () => onRemove( id );
 
 	return (
-		<div className="components-notice-list">
+		<div className={ className }>
 			{ children }
 			{ [ ...notices ].reverse().map( ( notice ) => (
 				<Notice { ...omit( notice, 'content' ) } key={ notice.id } onRemove={ removeNotice( notice.id ) }>

components/placeholder/index.js

@@ -10,11 +10,18 @@ import { isString } from 'lodash';
 import './style.scss';
 import Dashicon from '../dashicon';
 
-function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
+/**
+* Renders a placeholder. Normally used by blocks to render their empty state.
+*
+* @param  {Object} props The component props.
+* @return {Object}       The rendered placeholder.
+*/
+function Placeholder( { icon, children, label, instructions, className, notices, ...additionalProps } ) {
 	const classes = classnames( 'components-placeholder', className );
 
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ notices }
 			<div className="components-placeholder__label">
 				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
 				{ label }

core-blocks/gallery/edit.js

@@ -17,6 +17,7 @@ import {
 	SelectControl,
 	ToggleControl,
 	Toolbar,
+	withNotices,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -44,7 +45,7 @@ export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
 
-export default class GalleryEdit extends Component {
+class GalleryEdit extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -135,16 +136,17 @@ export default class GalleryEdit extends Component {
 
 	addFiles( files ) {
 		const currentImages = this.props.attributes.images || [];
-		const { setAttributes } = this.props;
-		editorMediaUpload(
-			files,
-			( images ) => {
+		const { noticeOperations, setAttributes } = this.props;
+		editorMediaUpload( {
+			allowedType: 'image',
+			filesList: files,
+			onFileChange: ( images ) => {
 				setAttributes( {
 					images: currentImages.concat( images ),
 				} );
 			},
-			'image',
-		);
+			onError: noticeOperations.createErrorNotice,
+		} );
 	}
 
 	componentWillReceiveProps( nextProps ) {
@@ -158,7 +160,7 @@ export default class GalleryEdit extends Component {
 	}
 
 	render() {
-		const { attributes, isSelected, className } = this.props;
+		const { attributes, isSelected, className, noticeOperations, noticeUI } = this.props;
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
 
 		const dropZone = (
@@ -210,6 +212,8 @@ export default class GalleryEdit extends Component {
 						accept="image/*"
 						type="image"
 						multiple
+						notices={ noticeUI }
+						onError={ noticeOperations.createErrorNotice }
 					/>
 				</Fragment>
 			);
@@ -241,6 +245,7 @@ export default class GalleryEdit extends Component {
 						/>
 					</PanelBody>
 				</InspectorControls>
+				{ noticeUI }
 				<ul className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>
 					{ dropZone }
 					{ images.map( ( img, index ) => (
@@ -276,3 +281,5 @@ export default class GalleryEdit extends Component {
 		);
 	}
 }
+
+export default withNotices( GalleryEdit );

core-blocks/gallery/index.js

@@ -131,11 +131,11 @@ export const settings = {
 				},
 				transform( files, onChange ) {
 					const block = createBlock( 'core/gallery' );
-					editorMediaUpload(
-						files,
-						( images ) => onChange( block.uid, { images } ),
-						'image'
-					);
+					editorMediaUpload( {
+						filesList: files,
+						onFileChange: ( images ) => onChange( block.uid, { images } ),
+						allowedType: 'image',
+					} );
 					return block;
 				},
 			},

core-blocks/image/edit.js

@@ -26,6 +26,7 @@ import {
 	TextControl,
 	TextareaControl,
 	Toolbar,
+	withNotices,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import {
@@ -78,13 +79,13 @@ class ImageEdit extends Component {
 			getBlobByURL( url )
 				.then(
 					( file ) =>
-						editorMediaUpload(
-							[ file ],
-							( [ image ] ) => {
+						editorMediaUpload( {
+							filesList: [ file ],
+							onFileChange: ( [ image ] ) => {
 								setAttributes( { ...image } );
 							},
-							'image'
-						)
+							allowedType: 'image',
+						} )
 				);
 		}
 	}
@@ -107,6 +108,15 @@ class ImageEdit extends Component {
 	}
 
 	onSelectImage( media ) {
+		if ( ! media ) {
+			this.props.setAttributes( {
+				url: undefined,
+				alt: undefined,
+				id: undefined,
+				caption: undefined,
+			} );
+			return;
+		}
 		this.props.setAttributes( {
 			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
 			width: undefined,
@@ -168,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 = (
@@ -211,6 +221,8 @@ class ImageEdit extends Component {
 						} }
 						className={ className }
 						onSelect={ this.onSelectImage }
+						notices={ noticeUI }
+						onError={ noticeOperations.createErrorNotice }
 						accept="image/*"
 						type="image"
 					/>
@@ -306,6 +318,7 @@ class ImageEdit extends Component {
 		return (
 			<Fragment>
 				{ controls }
+				{ noticeUI }
 				<figure className={ classes }>
 					<ImageSize src={ url } dirtynessTrigger={ align }>
 						{ ( sizes ) => {
@@ -406,4 +419,5 @@ export default compose( [
 		};
 	} ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
+	withNotices,
 ] )( ImageEdit );

editor/components/block-list/style.scss

@@ -132,6 +132,26 @@
 
 	margin-bottom: $block-spacing;
 
+	/**
+	 * Notices
+	 */
+	 .components-placeholder .components-with-notices-ui {
+		margin: -10px 20px 12px 20px;
+		width: calc( 100% - 40px );
+	 }
+	 .components-with-notices-ui {
+		margin: 0 0 12px 0;
+		width: 100%;
+
+		.notice {
+			margin-left: 0px;
+			margin-right: 0px;
+
+			p {
+				font-size: $default-font-size;
+			}
+		}
+	 }
 
 	/**
 	 * Warnings

editor/components/media-placeholder/index.js

@@ -63,9 +63,14 @@ class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		const { onSelect, type, multiple } = this.props;
+		const { onSelect, type, multiple, onError } = this.props;
 		const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
-		editorMediaUpload( files, setMedia, type );
+		editorMediaUpload( {
+			allowedType: type,
+			filesList: files,
+			onFileChange: setMedia,
+			onError,
+		} );
 	}
 
 	render() {
@@ -80,6 +85,7 @@ class MediaPlaceholder extends Component {
 			onSelectUrl,
 			onHTMLDrop = noop,
 			multiple = false,
+			notices,
 		} = this.props;
 
 		return (
@@ -88,6 +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={ notices }
 			>
 				<DropZone
 					onFilesDrop={ this.onFilesUpload }