Gallery block: Move add/edit media to block toolbar (#38036)

Co-authored-by: Glen Davies <glen.davies@a8c.com>
WordPress · Jan 19, 2022 · ebbc7d8 · ebbc7d8
1 parent 3dcc403
commit ebbc7d8
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -34,6 +34,7 @@ import { store as blockEditorStore } from '../../store';
 const MediaReplaceFlow = ( {
 	mediaURL,
 	mediaId,
+	mediaIds,
 	allowedTypes,
 	accept,
 	onSelect,
@@ -44,6 +45,9 @@ const MediaReplaceFlow = ( {
 	createNotice,
 	removeNotice,
 	children,
+	multiple = false,
+	addToGallery,
+	handleUpload = true,
 } ) => {
 	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
@@ -78,7 +82,8 @@ const MediaReplaceFlow = ( {
 		}, 1000 );
 	};
 
-	const selectMedia = ( media ) => {
+	const selectMedia = ( media, closeMenu ) => {
+		closeMenu();
 		setMediaURLValue( media.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
@@ -90,11 +95,15 @@ const MediaReplaceFlow = ( {
 		onSelectURL( newURL );
 	};
 
-	const uploadFiles = ( event ) => {
+	const uploadFiles = ( event, closeMenu ) => {
 		const files = event.target.files;
+		if ( ! handleUpload ) {
+			closeMenu();
+			return onSelect( files );
+		}
 		onFilesUpload( files );
 		const setMedia = ( [ media ] ) => {
-			selectMedia( media );
+			selectMedia( media, closeMenu );
 		};
 		mediaUpload( {
 			allowedTypes,
@@ -111,6 +120,19 @@ const MediaReplaceFlow = ( {
 		}
 	};
 
+	const onlyAllowsImages = () => {
+		if ( ! allowedTypes || allowedTypes.length === 0 ) {
+			return false;
+		}
+
+		return allowedTypes.every(
+			( allowedType ) =>
+				allowedType === 'image' || allowedType.startsWith( 'image/' )
+		);
+	};
+
+	const gallery = multiple && onlyAllowsImages();
+
 	const POPOVER_PROPS = {
 		isAlternate: true,
 	};
@@ -134,8 +156,13 @@ const MediaReplaceFlow = ( {
 				<>
 					<NavigableMenu className="block-editor-media-replace-flow__media-upload-menu">
 						<MediaUpload
-							value={ mediaId }
-							onSelect={ ( media ) => selectMedia( media ) }
+							gallery={ gallery }
+							addToGallery={ addToGallery }
+							multiple={ multiple }
+							value={ multiple ? mediaIds : mediaId }
+							onSelect={ ( media ) =>
+								selectMedia( media, onClose )
+							}
 							allowedTypes={ allowedTypes }
 							onClose={ onCloseModal }
 							render={ ( { open } ) => (
@@ -150,6 +177,7 @@ const MediaReplaceFlow = ( {
 									uploadFiles( event, onClose );
 								} }
 								accept={ accept }
+								multiple={ multiple }
 								render={ ( { openFileDialog } ) => {
 									return (
 										<MenuItem

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -22,6 +22,8 @@ import {
 	MediaPlaceholder,
 	InspectorControls,
 	useBlockProps,
+	BlockControls,
+	MediaReplaceFlow,
 } from '@wordpress/block-editor';
 import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -97,6 +99,7 @@ function GalleryEdit( props ) {
 		__unstableMarkNextChangeAsNotPersistent,
 		replaceInnerBlocks,
 		updateBlockAttributes,
+		multiSelect,
 	} = useDispatch( blockEditorStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -293,6 +296,14 @@ function GalleryEdit( props ) {
 					newOrderMap[ b.attributes.id ]
 			)
 		);
+
+		// If new blocks added select the first of these so they scroll into view.
+		if ( newBlocks?.length && existingImageBlocks?.length ) {
+			multiSelect(
+				newBlocks[ 0 ].clientId,
+				newBlocks[ newBlocks.length - 1 ].clientId
+			);
+		}
 	}
 
 	function onUploadError( message ) {
@@ -420,27 +431,22 @@ function GalleryEdit( props ) {
 
 	const mediaPlaceholder = (
 		<MediaPlaceholder
-			addToGallery={ hasImageIds }
+			addToGallery={ false }
 			handleUpload={ false }
-			isAppender={ hasImages }
-			disableMediaButtons={
-				( hasImages && ! isSelected ) || imagesUploading
-			}
-			icon={ ! hasImages && sharedIcon }
+			disableMediaButtons={ imagesUploading }
+			icon={ sharedIcon }
 			labels={ {
-				title: ! hasImages && __( 'Gallery' ),
-				instructions: ! hasImages && PLACEHOLDER_TEXT,
+				title: __( 'Gallery' ),
+				instructions: PLACEHOLDER_TEXT,
 			} }
 			onSelect={ updateImages }
 			accept="image/*"
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			multiple
-			value={ hasImageIds ? images : {} }
+			value={ {} }
 			onError={ onUploadError }
-			notices={ hasImages ? undefined : noticeUI }
-			autoOpenMediaUpload={
-				! hasImages && isSelected && wasBlockJustInserted
-			}
+			notices={ noticeUI }
+			autoOpenMediaUpload={ isSelected && wasBlockJustInserted }
 		/>
 	);
 
@@ -515,11 +521,23 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<BlockControls group="other">
+				<MediaReplaceFlow
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					accept="image/*"
+					handleUpload={ false }
+					onSelect={ updateImages }
+					name={ __( 'Add' ) }
+					multiple={ true }
+					mediaIds={ images.map( ( image ) => image.id ) }
+					addToGallery={ hasImageIds }
+				/>
+			</BlockControls>
 			{ noticeUI }
 			<Gallery
 				{ ...props }
 				images={ images }
-				mediaPlaceholder={ mediaPlaceholder }
+				mediaPlaceholder={ ! hasImages ? mediaPlaceholder : undefined }
 				blockProps={ blockProps }
 				insertBlocksAfter={ insertBlocksAfter }
 			/>