Implemented flow for adding in images in the gallery without going to…

… the media library.

blocks/library/gallery/block.js

@@ -12,6 +12,7 @@ import { mediaUpload } from '@wordpress/utils';
 import {
 	IconButton,
 	DropZone,
+	FormFileUpload,
 	RangeControl,
 	SelectControl,
 	ToggleControl,
@@ -51,7 +52,8 @@ class GalleryBlock extends Component {
 		this.toggleImageCrop = this.toggleImageCrop.bind( this );
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.setImageAttributes = this.setImageAttributes.bind( this );
-		this.dropFiles = this.dropFiles.bind( this );
+		this.addFiles = this.addFiles.bind( this );
+		this.uploadFromFiles = this.uploadFromFiles.bind( this );
 
 		this.state = {
 			selectedImage: null,
@@ -122,7 +124,11 @@ class GalleryBlock extends Component {
 		} );
 	}
 
-	dropFiles( files ) {
+	uploadFromFiles( event ) {
+		this.addFiles( event.target.files );
+	}
+
+	addFiles( files ) {
 		const currentImages = this.props.attributes.images || [];
 		const { setAttributes } = this.props;
 		mediaUpload(
@@ -151,7 +157,7 @@ class GalleryBlock extends Component {
 
 		const dropZone = (
 			<DropZone
-				onFilesDrop={ this.dropFiles }
+				onFilesDrop={ this.addFiles }
 			/>
 		);
 
@@ -239,6 +245,18 @@ class GalleryBlock extends Component {
 						/>
 					</li>
 				) ) }
+				{ isSelected &&
+					<li className="blocks-gallery-item">
+						<FormFileUpload
+							multiple={ true }
+							isLarge
+							className="blocks-gallery-add-item-button"
+							onChange={ this.uploadFromFiles }
+							accept="image/*"
+							icon="insert"
+						/>
+					</li>
+				}
 			</ul>,
 		];
 	}

blocks/library/gallery/editor.scss

@@ -28,6 +28,28 @@
 		margin-top: -4px;
 	}
 
+	.components-form-file-upload,
+	.button.blocks-gallery-add-item-button {
+		width: 100%;
+		height: 100%;
+	}
+
+	.button.blocks-gallery-add-item-button {
+		box-shadow: none;
+		border: none;
+    	border-radius: 0;
+		min-height: 100px;
+
+		& .dashicon {
+			margin-top: 10px;
+		}
+
+
+		&:hover,
+		&:focus {
+			border: 1px solid #999;
+		}
+	}
 }
 
 .blocks-gallery-item__inline-menu {

components/form-file-upload/index.js

@@ -25,12 +25,12 @@ class FormFileUpload extends Component {
 	}
 
 	render() {
-		const { children, multiple = false, accept, onChange, ...props } = this.props;
+		const { children, multiple = false, accept, onChange, icon = 'upload', ...props } = this.props;
 
 		return (
 			<div className="components-form-file-upload">
 				<IconButton
-					icon="upload"
+					icon={ icon }
 					onClick={ this.openFileDialog }
 					{ ...props }
 				>