From 8661bf096e055f82b0e8aaf348ed13de83af0ae9 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 31 Mar 2021 12:02:02 +1300 Subject: [PATCH 1/3] Make warnings about invalid file types more consistent --- packages/block-library/src/gallery/edit.js | 12 ++++++++++++ packages/block-library/src/image/transforms.js | 10 +++------- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 7d51e64d22e349..ed077e39fc8164 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -217,6 +217,18 @@ function GalleryEdit( props ) { } ) : selectedImages; + if ( + imageArray.some( + ( image ) => image.type?.indexOf( 'image/' ) !== 0 + ) + ) { + noticeOperations.createErrorNotice( + __( + 'If uploading to a gallery all files need to be image formats' + ) + ); + } + const processedImages = imageArray .filter( ( file ) => file.url || file.type?.indexOf( 'image/' ) === 0 diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js index 94a5dc5caee57c..920c3fec814b4a 100644 --- a/packages/block-library/src/image/transforms.js +++ b/packages/block-library/src/image/transforms.js @@ -141,15 +141,11 @@ 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', - } + ) ); } return every( From 89be84cb918ceeec588e134807fe86abe72c2aad Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 31 Mar 2021 16:03:04 +1300 Subject: [PATCH 2/3] Use ALLOWED_MEDIA_TYPES constant to check valid types --- packages/block-library/src/gallery/edit.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ed077e39fc8164..01cbab2d37cead 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,11 +223,7 @@ function GalleryEdit( props ) { } ) : selectedImages; - if ( - imageArray.some( - ( image ) => image.type?.indexOf( 'image/' ) !== 0 - ) - ) { + if ( ! imageArray.every( isValidFileType ) ) { noticeOperations.createErrorNotice( __( 'If uploading to a gallery all files need to be image formats' @@ -230,9 +232,7 @@ function GalleryEdit( props ) { } 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( { From 96c8fd15ad6cabbf6ce3b446fd33b52667e60a7a Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 31 Mar 2021 15:31:19 +1000 Subject: [PATCH 3/3] Prevent some of the duplicate notices These changes prevent duplicate notices within both the gallery component itself and the general notices at the top of the editor. Given the gallery component's notices are via the withNotices HoC, we can't access that notice list to remove the notice via the notice store's `removeNotice`. --- packages/block-library/src/gallery/edit.js | 6 ++++-- packages/block-library/src/image/transforms.js | 5 +++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index 01cbab2d37cead..2d8d867dfd184a 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -224,10 +224,12 @@ 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' } ); } @@ -244,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 920c3fec814b4a..91c86305f17c0a 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', @@ -145,7 +145,8 @@ const transforms = { createErrorNotice( __( 'If uploading to a gallery all files need to be image formats' - ) + ), + { id: 'gallery-transform-invalid-file' } ); } return every(