From e40089e8cb5430755b8a551bdf9fee14d7c22b29 Mon Sep 17 00:00:00 2001
From: Kevin Bazira <kvnbzr@gmail.com>
Date: Fri, 7 Sep 2018 11:53:16 +0300
Subject: [PATCH] Update on Gallery Block. Replaced FormFileUpload with
 MediaPlaceholder.

---
 packages/block-library/src/gallery/edit.js    | 45 ++++++++++++-------
 .../block-library/src/gallery/editor.scss     | 25 -----------
 .../src/components/media-upload/README.md     |  2 +-
 3 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 5190799474f112..35f1395f13353f 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	IconButton,
 	DropZone,
-	FormFileUpload,
 	PanelBody,
 	RangeControl,
 	SelectControl,
@@ -55,7 +54,8 @@ class GalleryEdit extends Component {
 		this.onRemoveImage = this.onRemoveImage.bind( this );
 		this.setImageAttributes = this.setImageAttributes.bind( this );
 		this.addFiles = this.addFiles.bind( this );
-		this.uploadFromFiles = this.uploadFromFiles.bind( this );
+		this.onAddMoreImages = this.onAddMoreImages.bind( this );
+		this.updateImagesAttribute = this.updateImagesAttribute.bind( this );
 
 		this.state = {
 			selectedImage: null,
@@ -123,10 +123,6 @@ class GalleryEdit extends Component {
 		} );
 	}
 
-	uploadFromFiles( event ) {
-		this.addFiles( event.target.files );
-	}
-
 	addFiles( files ) {
 		const currentImages = this.props.attributes.images || [];
 		const { noticeOperations, setAttributes } = this.props;
@@ -142,6 +138,21 @@ class GalleryEdit extends Component {
 		} );
 	}
 
+	onAddMoreImages( newImages ) {
+		if ( ! window.event ) { // from "Upload" option after newImages absolute paths have been generated
+			this.updateImagesAttribute( newImages );
+		} else if ( window.event.type === 'click' ) { // from "Media Library" option
+			this.updateImagesAttribute( newImages );
+		}
+	}
+
+	updateImagesAttribute( newImages ) {
+		const currentImages = this.props.attributes.images || [];
+		this.props.setAttributes( {
+			images: currentImages.concat( newImages.map( ( image ) => pick( image, [ 'url', 'link', 'alt', 'id', 'caption' ] ) ) ),
+		} );
+	}
+
 	componentDidUpdate( prevProps ) {
 		// Deselect images when deselecting the block
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
@@ -253,16 +264,20 @@ class GalleryEdit extends Component {
 					) ) }
 					{ isSelected &&
 						<li className="blocks-gallery-item has-add-item-button">
-							<FormFileUpload
-								multiple
-								isLarge
-								className="block-library-gallery-add-item-button"
-								onChange={ this.uploadFromFiles }
+							<MediaPlaceholder
+								icon="format-gallery"
+								className={ className }
+								labels={ {
+									title: __( 'Gallery' ),
+									name: __( 'images' ),
+								} }
+								onSelect={ this.onAddMoreImages }
 								accept="image/*"
-								icon="insert"
-							>
-								{ __( 'Upload an image' ) }
-							</FormFileUpload>
+								type="*"
+								multiple
+								notices={ noticeUI }
+								onError={ noticeOperations.createErrorNotice }
+							/>
 						</li>
 					}
 				</ul>
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 27edd97607cef5..4d3375c3849654 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -53,31 +53,6 @@
 		}
 	}
 
-	.components-form-file-upload,
-	.components-button.block-library-gallery-add-item-button {
-		width: 100%;
-		height: 100%;
-	}
-
-	.components-button.block-library-gallery-add-item-button {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		box-shadow: none;
-		border: none;
-		border-radius: 0;
-		min-height: 100px;
-
-		& .dashicon {
-			margin-top: 10px;
-		}
-
-		&:hover,
-		&:focus {
-			border: $border-width solid $dark-gray-500;
-		}
-	}
-
 	.editor-rich-text .editor-rich-text__tinymce {
 		a {
 			color: $white;
diff --git a/packages/editor/src/components/media-upload/README.md b/packages/editor/src/components/media-upload/README.md
index d54dccb4d699d0..809ffad90a7210 100644
--- a/packages/editor/src/components/media-upload/README.md
+++ b/packages/editor/src/components/media-upload/README.md
@@ -1,7 +1,7 @@
 MediaUpload
 ===========
 
-MediaUpload is a React component used to render a button that opens a the WordPress media modal.
+MediaUpload is a React component used to render a button that opens the WordPress media modal.
 
 ## Setup