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

…; Media Upload: Allow galleries to open in the library frame.
WordPress · Mar 15, 2019 · 75d9271 · 75d9271
1 parent 9a93e6a
commit 75d9271
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 141 deletions.
diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/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,
@@ -124,39 +151,42 @@ export class MediaPlaceholder extends Component {
 	render() {
 		const {
 			accept,
-			icon,
+			addToGallery,
+			allowedTypes = [],
 			className,
+			dropZoneUIOnly,
+			hasUploadPermissions,
+			icon,
+			isAppender,
 			labels = {},
-			onSelect,
-			value = {},
-			onSelectURL,
-			onHTMLDrop = noop,
+			mediaUpload,
 			multiple = false,
 			notices,
-			allowedTypes = [],
-			hasUploadPermissions,
-			mediaUpload,
+			onHTMLDrop = noop,
+			onSelect,
+			onSelectURL,
+			value = {},
 		} = 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 +210,7 @@ export class MediaPlaceholder extends Component {
 				}
 			}
 
-			if ( ! title ) {
+			if ( title === undefined ) {
 				title = __( 'Media' );
 
 				if ( isAudio ) {
@@ -193,24 +223,47 @@ export class MediaPlaceholder extends Component {
 			}
 		}
 
+		const dropZone = (
+			<DropZone
+				onFilesDrop={ this.onFilesUpload }
+				onHTMLDrop={ onHTMLDrop }
+			/>
+		);
+
+		if ( dropZoneUIOnly ) {
+			return (
+				<MediaUploadCheck>
+					{ dropZone }
+				</MediaUploadCheck>
+			);
+		}
+
 		return (
 			<Placeholder
 				icon={ icon }
 				label={ title }
 				instructions={ instructions }
-				className={ classnames( 'editor-media-placeholder block-editor-media-placeholder', className ) }
+				className={
+					classnames(
+						'block-editor-media-placeholder',
+						'editor-media-placeholder',
+						className,
+						{ 'is-appender': isAppender }
+					)
+				}
 				notices={ notices }
 			>
 				<MediaUploadCheck>
 					{ !! mediaUpload && (
 						<Fragment>
-							<DropZone
-								onFilesDrop={ this.onFilesUpload }
-								onHTMLDrop={ onHTMLDrop }
-							/>
+							{ dropZone }
 							<FormFileUpload
 								isLarge
-								className="editor-media-placeholder__button block-editor-media-placeholder__button"
+								className={ classnames(
+									'block-editor-media-placeholder__button',
+									'editor-media-placeholder__button',
+									'block-editor-media-placeholder__upload-button'
+								) }
 								onChange={ this.onUpload }
 								accept={ accept }
 								multiple={ multiple }
@@ -220,20 +273,30 @@ export class MediaPlaceholder extends Component {
 						</Fragment>
 					) }
 					<MediaUpload
+						addToGallery={ addToGallery }
 						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>
-						) }
+						value={
+							isArray( value ) ?
+								value.map( ( { id } ) => id ) :
+								value.id
+						}
+						render={ ( { open } ) => {
+							return (
+								<Button
+									isLarge
+									className={ classnames(
+										'editor-media-placeholder__button',
+										'editor-media-placeholder__media-library-button'
+									) }
+									onClick={ open }
+								>
+									{ __( 'Media Library' ) }
+								</Button>
+							);
+						} }
 					/>
 				</MediaUploadCheck>
 				{ onSelectURL && (

diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -45,3 +45,23 @@
 .components-form-file-upload .block-editor-media-placeholder__button {
 	margin-right: $grid-size-small;
 }
+
+.block-editor-media-placeholder.is-appender {
+	min-height: 100px;
+	background-color: unset;
+	outline: $border-width dashed $dark-gray-150;
+
+	&:hover {
+		outline: $border-width dashed $dark-gray-500;
+	}
+
+	.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;
+		}
+	}
+
+}
diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
@@ -101,6 +101,25 @@ CSS class added to the media modal frame.
 - Type: `String`
 - Required: No
 
+
+### addToGallery
+
+If true, the gallery media modal opens directly in the media library where the user can add additional images.
+If false the gallery media modal opens in the edit mode where the user can edit existing images, by reordering them, remove them, or change their attributes.
+Only applies if `gallery === true`.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
+### gallery
+
+If true, the component will initiate all the states required to represent a gallery. By default, the media modal opens in the gallery edit frame, but that can be changed using the `addToGallery`flag.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 ## render
 
 A callback invoked to render the Button opening the media library.