Gallery block refactor: make invalid file type errors consistent (#30396

)


Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Aaron Robertshaw <[email protected]>

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

@@ -200,6 +200,12 @@ function GalleryEdit( props ) {
 		};
 	}
 
+	function isValidFileType( file ) {
+		return ALLOWED_MEDIA_TYPES.some(
+			( mediaType ) => file.type?.indexOf( mediaType ) === 0
+		);
+	}
+
 	function updateImages( selectedImages ) {
 		const newFileUploads =
 			Object.prototype.toString.call( selectedImages ) ===
@@ -217,10 +223,18 @@ function GalleryEdit( props ) {
 			  } )
 			: selectedImages;
 
+		if ( ! imageArray.every( isValidFileType ) ) {
+			noticeOperations.removeAllNotices();
+			noticeOperations.createErrorNotice(
+				__(
+					'If uploading to a gallery all files need to be image formats'
+				),
+				{ id: 'gallery-upload-invalid-file' }
+			);
+		}
+
 		const processedImages = imageArray
-			.filter(
-				( file ) => file.url || file.type?.indexOf( 'image/' ) === 0
-			)
+			.filter( ( file ) => file.url || isValidFileType( file ) )
 			.map( ( file ) => {
 				if ( ! file.url ) {
 					return pickRelevantMediaFiles( {
@@ -232,7 +246,7 @@ function GalleryEdit( props ) {
 			} );
 
 		// Because we are reusing existing innerImage blocks any reordering
-		// done in the media libary will be lost so we need to reapply that ordering
+		// done in the media library will be lost so we need to reapply that ordering
 		// once the new image blocks are merged in with existing.
 		const newOrderMap = processedImages.reduce(
 			( result, image, index ) => (

packages/block-library/src/image/transforms.js

@@ -131,7 +131,7 @@ const transforms = {
 			},
 		},
 		{
-			// Note: when dragging and dropping multiple files onto a gallery this overrrides the
+			// Note: when dragging and dropping multiple files onto a gallery this overrides the
 			// gallery transform in order to add new images to the gallery instead of
 			// creating a new gallery.
 			type: 'files',
@@ -141,15 +141,12 @@ const transforms = {
 						( file ) => file.type.indexOf( 'image/' ) !== 0
 					)
 				) {
-					const { createWarningNotice } = dispatch( noticesStore );
-					createWarningNotice(
+					const { createErrorNotice } = dispatch( noticesStore );
+					createErrorNotice(
 						__(
 							'If uploading to a gallery all files need to be image formats'
 						),
-						{
-							id: 'image-upload-format-warning',
-							type: 'snackbar',
-						}
+						{ id: 'gallery-transform-invalid-file' }
 					);
 				}
 				return every(