Gallery Block: Add Media Library buttons to the upload new image area; Media Upload: Allow galleries to open in the library frame.

Author: jorgefilipecosta

packages/block-library/src/gallery/edit.js

@@ -298,17 +298,38 @@ class GalleryEdit extends Component {
 						);
 					} ) }
 					{ isSelected &&
-						<li className="blocks-gallery-item has-add-item-button">
+						<li className={ classnames(
+							'blocks-gallery-item',
+							'block-library-gallery-add-item'
+						) }>
 							<FormFileUpload
 								multiple
 								isLarge
-								className="block-library-gallery-add-item-button"
 								onChange={ this.uploadFromFiles }
 								accept="image/*"
 								icon="insert"
+								className="block-library-gallery-add-item__upload-button"
 							>
 								{ __( 'Upload an image' ) }
 							</FormFileUpload>
+							<MediaUpload
+								onSelect={ this.onSelectImages }
+								allowedTypes={ ALLOWED_MEDIA_TYPES }
+								addToGallery
+								multiple
+								gallery
+								value={ images.map( ( img ) => img.id ) }
+								render={ ( { open } ) => (
+									<IconButton
+										icon="admin-media"
+										isTertiary
+										onClick={ open }
+										className="block-library-gallery-add-item__media-library-button"
+									>
+										{ __( 'Media Library' ) }
+									</IconButton>
+								) }
+							/>
 						</li>
 					}
 				</ul>

packages/block-library/src/gallery/editor.scss

@@ -53,28 +53,45 @@ ul.wp-block-gallery li {
 		}
 	}
 
-	.components-form-file-upload,
-	.components-button.block-library-gallery-add-item-button {
+	&.block-library-gallery-add-item.block-library-gallery-add-item {
 		width: 100%;
-		height: 100%;
+		min-height: 100px;
+		border: dotted;
+		border-color: $light-gray-800;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+
+		.dashicon {
+			margin-right: 6px;
+		}
 	}
 
-	.components-button.block-library-gallery-add-item-button {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
+	.block-library-gallery-add-item__upload-button,
+	.block-library-gallery-add-item__media-library-button {
 		box-shadow: none;
+		&.components-button:hover,
+		&.components-button:focus {
+			box-shadow: none;
+			border: $border-width solid $dark-gray-500;
+		}
+	}
+
+	.block-library-gallery-add-item__upload-button {
 		border: none;
-		border-radius: 0;
-		min-height: 100px;
+		background: none;
+		box-shadow: none;
+		margin-right: 25px;
+		border: $border-width solid transparent;
+	}
 
-		& .dashicon {
-			margin-top: 10px;
-		}
+	.block-library-gallery-add-item__media-library-button {
+		background-color: $light-gray-100;
+		border: $border-width solid $light-gray-500;
 
-		&:hover,
-		&:focus {
-			border: $border-width solid $dark-gray-500;
+
+		.dashicon {
+			color: $light-gray-900;
 		}
 	}
 

packages/block-library/src/gallery/style.scss

@@ -126,14 +126,6 @@
 		margin-right: 0;
 	}
 
-	// Make the "Add new Gallery item" button full-width (so it always appears
-	// below other items).
-	.blocks-gallery-item {
-		&.has-add-item-button {
-			width: 100%;
-		}
-	}
-
 	// Apply max-width to floated items that have no intrinsic width.
 	&.alignleft,
 	&.alignright {

packages/edit-post/src/hooks/components/media-upload/index.js

@@ -80,6 +80,7 @@ class MediaUpload extends Component {
 		allowedTypes,
 		multiple = false,
 		gallery = false,
+		addToGallery = false,
 		title = __( 'Select or Upload Media' ),
 		modalClass,
 		value,
@@ -92,7 +93,12 @@ class MediaUpload extends Component {
 		this.onClose = this.onClose.bind( this );
 
 		if ( gallery ) {
-			const currentState = value ? 'gallery-edit' : 'gallery';
+			let currentState;
+			if ( addToGallery ) {
+				currentState = 'gallery-library';
+			} else {
+				currentState = value ? 'gallery-edit' : 'gallery';
+			}
 			const GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
 			const attachments = getAttachmentsCollection( value );
 			const selection = new wp.media.model.Selection( attachments.models, {

packages/editor/src/components/media-upload/README.md

@@ -101,6 +101,17 @@ CSS class added to the media modal frame.
 - Type: `String`
 - Required: No
 
+
+### addToGallery
+
+If true the gallery media modal will open in directly in the media library where additional images can be added.
+If false the gallery media modal will open in the edit mode where existing images can be edited.
+Only applies if gallery = true.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 ## render
 
 A callback invoked to render the Button opening the media library.