diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 284712101e72d..66a86ee6ab5b2 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/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 ) => ( diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js index 94a5dc5caee57..91c86305f17c0 100644 --- a/packages/block-library/src/image/transforms.js +++ b/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(