Gallery Block: Add Media Library button to the upload new image area

packages/block-editor/CHANGELOG.md

@@ -1,5 +1,12 @@
 ## 2.0.0 (Unreleased)
 
+### New Features
+
+- Added the `addToGallery` property to the `MediaUpload` interface. The property allows users to open the media modal in the `gallery-library`instead of `gallery-edit` state.
+- Added the `addToGallery` property to the `MediaPlaceholder` component. The component passes the property to the `MediaUpload` component used inside the placeholder.
+- Added the `isAppender` property to the `MediaPlaceholder` component. The property changes the look of the placeholder to be adequate to scenarios where new files are added to an already existing set of files, e.g., adding files to a gallery.
+- Added the `dropZoneUIOnly` property to the `MediaPlaceholder` component. The property makes the `MediaPlaceholder` only render a dropzone without any other additional UI.
+
 ### Breaking Changes
 
 - `CopyHandler` will now only catch cut/copy events coming from its `props.children`, instead of from anywhere in the `document`.

packages/block-editor/src/components/media-placeholder/index.js

@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { every, get, noop, startsWith, defaultTo } from 'lodash';
+import {
+	defaultTo,
+	every,
+	get,
+	isArray,
+	noop,
+	startsWith,
+} from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -103,8 +110,28 @@ export class MediaPlaceholder extends Component {
 	}
 
 	onFilesUpload( files ) {
-		const { onSelect, multiple, onError, allowedTypes, mediaUpload } = this.props;
-		const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
+		const {
+			addToGallery,
+			allowedTypes,
+			mediaUpload,
+			multiple,
+			onError,
+			onSelect,
+			value = [],
+		} = this.props;
+		let setMedia;
+		if ( multiple ) {
+			if ( addToGallery ) {
+				const currentValue = value;
+				setMedia = ( newMedia ) => {
+					onSelect( currentValue.concat( newMedia ) );
+				};
+			} else {
+				setMedia = onSelect;
+			}
+		} else {
+			setMedia = ( [ media ] ) => onSelect( media );
+		}
 		mediaUpload( {
 			allowedTypes,
 			filesList: files,
@@ -121,42 +148,32 @@ export class MediaPlaceholder extends Component {
 		this.setState( { isURLInputVisible: false } );
 	}
 
-	render() {
+	renderPlaceholder( content, onClick ) {
 		const {
-			accept,
-			icon,
+			allowedTypes = [],
 			className,
+			hasUploadPermissions,
+			icon,
+			isAppender,
 			labels = {},
-			onSelect,
-			value = {},
-			onSelectURL,
-			onHTMLDrop = noop,
-			multiple = false,
 			notices,
-			allowedTypes = [],
-			hasUploadPermissions,
-			mediaUpload,
+			onSelectURL,
 		} = this.props;
 
-		const {
-			isURLInputVisible,
-			src,
-		} = this.state;
-
-		let instructions = labels.instructions || '';
-		let title = labels.title || '';
+		let instructions = labels.instructions;
+		let title = labels.title;
 
 		if ( ! hasUploadPermissions && ! onSelectURL ) {
 			instructions = __( 'To edit this block, you need permission to upload media.' );
 		}
 
-		if ( ! instructions || ! title ) {
+		if ( instructions === undefined || title === undefined ) {
 			const isOneType = 1 === allowedTypes.length;
 			const isAudio = isOneType && 'audio' === allowedTypes[ 0 ];
 			const isImage = isOneType && 'image' === allowedTypes[ 0 ];
 			const isVideo = isOneType && 'video' === allowedTypes[ 0 ];
 
-			if ( ! instructions ) {
+			if ( instructions === undefined ) {
 				if ( hasUploadPermissions ) {
 					instructions = __( 'Drag a media file, upload a new one or select a file from your library.' );
 
@@ -180,7 +197,7 @@ export class MediaPlaceholder extends Component {
 				}
 			}
 
-			if ( ! title ) {
+			if ( title === undefined ) {
 				title = __( 'Media' );
 
 				if ( isAudio ) {
@@ -193,70 +210,191 @@ export class MediaPlaceholder extends Component {
 			}
 		}
 
+		const placeholderClassName = classnames(
+			'block-editor-media-placeholder',
+			'editor-media-placeholder',
+			className,
+			{ 'is-appender': isAppender }
+		);
+
 		return (
 			<Placeholder
 				icon={ icon }
 				label={ title }
 				instructions={ instructions }
-				className={ classnames( 'editor-media-placeholder block-editor-media-placeholder', className ) }
+				className={ placeholderClassName }
 				notices={ notices }
+				onClick={ onClick }
 			>
-				<MediaUploadCheck>
-					{ !! mediaUpload && (
-						<Fragment>
-							<DropZone
-								onFilesDrop={ this.onFilesUpload }
-								onHTMLDrop={ onHTMLDrop }
-							/>
-							<FormFileUpload
-								isLarge
-								className="editor-media-placeholder__button block-editor-media-placeholder__button"
-								onChange={ this.onUpload }
-								accept={ accept }
-								multiple={ multiple }
-							>
-								{ __( 'Upload' ) }
-							</FormFileUpload>
-						</Fragment>
-					) }
-					<MediaUpload
-						gallery={ multiple && this.onlyAllowsImages() }
-						multiple={ multiple }
-						onSelect={ onSelect }
-						allowedTypes={ allowedTypes }
-						value={ value.id }
-						render={ ( { open } ) => (
-							<Button
-								isLarge
-								className="editor-media-placeholder__button block-editor-media-placeholder__button"
-								onClick={ open }
-							>
-								{ __( 'Media Library' ) }
-							</Button>
-						) }
+				{ content }
+			</Placeholder>
+		);
+	}
+
+	renderDropZone() {
+		const { onHTMLDrop = noop } = this.props;
+		return (
+			<DropZone
+				onFilesDrop={ this.onFilesUpload }
+				onHTMLDrop={ onHTMLDrop }
+			/>
+		);
+	}
+
+	renderUrlSelectionUI() {
+		const {
+			onSelectURL,
+		} = this.props;
+		if ( ! onSelectURL ) {
+			return null;
+		}
+		const {
+			isURLInputVisible,
+			src,
+		} = this.state;
+		return (
+			<div className="editor-media-placeholder__url-input-container block-editor-media-placeholder__url-input-container">
+				<Button
+					className="editor-media-placeholder__button block-editor-media-placeholder__button"
+					onClick={ this.openURLInput }
+					isToggled={ isURLInputVisible }
+					isLarge
+				>
+					{ __( 'Insert from URL' ) }
+				</Button>
+				{ isURLInputVisible && (
+					<InsertFromURLPopover
+						src={ src }
+						onChange={ this.onChangeSrc }
+						onSubmit={ this.onSubmitSrc }
+						onClose={ this.closeURLInput }
 					/>
-				</MediaUploadCheck>
-				{ onSelectURL && (
-					<div className="editor-media-placeholder__url-input-container block-editor-media-placeholder__url-input-container">
+				) }
+			</div>
+		);
+	}
+
+	renderMediaUploadChecked() {
+		const {
+			accept,
+			addToGallery,
+			allowedTypes = [],
+			isAppender,
+			mediaUpload,
+			multiple = false,
+			onSelect,
+			value = {},
+		} = this.props;
+
+		const mediaLibraryButton = (
+			<MediaUpload
+				addToGallery={ addToGallery }
+				gallery={ multiple && this.onlyAllowsImages() }
+				multiple={ multiple }
+				onSelect={ onSelect }
+				allowedTypes={ allowedTypes }
+				value={
+					isArray( value ) ?
+						value.map( ( { id } ) => id ) :
+						value.id
+				}
+				render={ ( { open } ) => {
+					return (
 						<Button
-							className="editor-media-placeholder__button block-editor-media-placeholder__button"
-							onClick={ this.openURLInput }
-							isToggled={ isURLInputVisible }
 							isLarge
+							className={ classnames(
+								'editor-media-placeholder__button',
+								'editor-media-placeholder__media-library-button'
+							) }
+							onClick={ ( event ) => {
+								event.stopPropagation();
+								open();
+							} }
 						>
-							{ __( 'Insert from URL' ) }
+							{ __( 'Media Library' ) }
 						</Button>
-						{ isURLInputVisible && (
-							<InsertFromURLPopover
-								src={ src }
-								onChange={ this.onChangeSrc }
-								onSubmit={ this.onSubmitSrc }
-								onClose={ this.closeURLInput }
-							/>
+					);
+				} }
+			/>
+		);
+
+		if ( mediaUpload && isAppender ) {
+			return (
+				<Fragment>
+					{ this.renderDropZone() }
+					<FormFileUpload
+						onChange={ this.onUpload }
+						accept={ accept }
+						multiple={ multiple }
+						render={ ( { openFileDialog } ) => {
+							const content = (
+								<Fragment>
+									<IconButton
+										isLarge
+										className={ classnames(
+											'block-editor-media-placeholder__button',
+											'editor-media-placeholder__button',
+											'block-editor-media-placeholder__upload-button'
+										) }
+										icon="upload"
+									>
+										{ __( 'Upload' ) }
+									</IconButton>
+									{ mediaLibraryButton }
+									{ this.renderUrlSelectionUI() }
+								</Fragment>
+							);
+							return this.renderPlaceholder( content, openFileDialog );
+						} }
+					/>
+				</Fragment>
+			);
+		}
+		if ( mediaUpload ) {
+			const content = (
+				<Fragment>
+					{ this.renderDropZone() }
+					<FormFileUpload
+						isLarge
+						className={ classnames(
+							'block-editor-media-placeholder__button',
+							'editor-media-placeholder__button',
+							'block-editor-media-placeholder__upload-button'
 						) }
-					</div>
-				) }
-			</Placeholder>
+						onChange={ this.onUpload }
+						accept={ accept }
+						multiple={ multiple }
+					>
+						{ __( 'Upload' ) }
+					</FormFileUpload>
+					{ mediaLibraryButton }
+					{ this.renderUrlSelectionUI() }
+				</Fragment>
+			);
+			return this.renderPlaceholder( content );
+		}
+		return this.renderPlaceholder( mediaLibraryButton );
+	}
+
+	render() {
+		const {
+			dropZoneUIOnly,
+		} = this.props;
+
+		if ( dropZoneUIOnly ) {
+			return (
+				<MediaUploadCheck>
+					{ this.renderDropZone() }
+				</MediaUploadCheck>
+			);
+		}
+
+		return (
+			<MediaUploadCheck
+				fallback={ this.renderPlaceholder( this.renderUrlSelectionUI() ) }
+			>
+				{ this.renderMediaUploadChecked() }
+			</MediaUploadCheck>
 		);
 	}
 }

packages/block-editor/src/components/media-placeholder/style.scss

@@ -45,3 +45,30 @@
 .components-form-file-upload .block-editor-media-placeholder__button {
 	margin-right: $grid-size-small;
 }
+
+.block-editor-media-placeholder.is-appender {
+	min-height: 100px;
+	outline: $border-width dashed $dark-gray-150;
+
+	&:hover {
+		outline: $border-width dashed $dark-gray-500;
+		cursor: pointer;
+	}
+
+	.is-dark-theme & {
+
+		&:hover {
+			outline: $border-width dashed $white;
+		}
+	}
+
+	.block-editor-media-placeholder__upload-button {
+		margin-right: $grid-size-small;
+		&.components-button:hover,
+		&.components-button:focus {
+			box-shadow: none;
+			border: $border-width solid $dark-gray-500;
+		}
+	}
+
+}