From ffb12164a092942a368f88ff42836b685dfcd8dc Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Mon, 21 Oct 2024 17:04:31 -0600 Subject: [PATCH 1/4] =?UTF-8?q?Ensure=20HEIC=20files=20selectable=20from?= =?UTF-8?q?=20=E2=80=9CUpload=E2=80=9D=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/background-image-control/index.js | 2 +- packages/block-library/src/image/edit.js | 2 +- packages/block-library/src/image/image.js | 2 +- packages/block-library/src/post-featured-image/edit.js | 4 ++-- packages/components/src/form-file-upload/README.md | 2 +- packages/components/src/form-file-upload/index.tsx | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js index 2703aa3988d64..5b00100d64557 100644 --- a/packages/block-editor/src/components/background-image-control/index.js +++ b/packages/block-editor/src/components/background-image-control/index.js @@ -361,7 +361,7 @@ function BackgroundImageControls( { mediaId={ id } mediaURL={ url } allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] } - accept="image/*" + accept="image/*, image/heic" onSelect={ onSelectMedia } popoverProps={ { className: clsx( { diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 360c4b8e6127b..b451b2de95df4 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -461,7 +461,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onError={ onUploadError } placeholder={ placeholder } - accept="image/*" + accept="image/*, image/heic" allowedTypes={ ALLOWED_MEDIA_TYPES } handleUpload={ ( files ) => files.length === 1 } value={ { id, src } } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 89bf31f92664b..9a644331b1e53 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -564,7 +564,7 @@ export default function Image( { mediaId={ id } mediaURL={ url } allowedTypes={ ALLOWED_MEDIA_TYPES } - accept="image/*" + accept="image/*, image/heic" onSelect={ onSelectImage } onSelectURL={ onSelectURL } onError={ onUploadError } diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index dff34379e4f3b..c4bb8a7444f4a 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -301,7 +301,7 @@ export default function PostFeaturedImageEdit( { image = ( setFeaturedImage( 0 ) } diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md index 4dd8affc5f54a..37fb984bd2e78 100644 --- a/packages/components/src/form-file-upload/README.md +++ b/packages/components/src/form-file-upload/README.md @@ -9,7 +9,7 @@ import { FormFileUpload } from '@wordpress/components'; const MyFormFileUpload = () => ( console.log( event.currentTarget.files ) } > Upload diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 0600e47d7324c..02bbd7724de5f 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -18,7 +18,7 @@ import type { FormFileUploadProps } from './types'; * * const MyFormFileUpload = () => ( * console.log( event.currentTarget.files ) } * > * Upload From 5b706e7f88f32adecacaf6082def353d53d4f50d Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Tue, 22 Oct 2024 09:25:52 -0600 Subject: [PATCH 2/4] Update packages/components/src/form-file-upload/index.tsx Co-authored-by: George Mamadashvili --- packages/components/src/form-file-upload/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 02bbd7724de5f..a1dfba4dbf3c9 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -18,7 +18,7 @@ import type { FormFileUploadProps } from './types'; * * const MyFormFileUpload = () => ( * console.log( event.currentTarget.files ) } * > * Upload From 1a139f6ed24449dcd2ae087212c018bd55ad4c24 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 23 Oct 2024 09:43:42 -0600 Subject: [PATCH 3/4] =?UTF-8?q?move=20=E2=80=9Cimage/heic=E2=80=9D=20addit?= =?UTF-8?q?ion=20to=20FormFileUpload=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/background-image-control/index.js | 2 +- packages/block-library/src/image/edit.js | 2 +- packages/block-library/src/image/image.js | 2 +- packages/block-library/src/post-featured-image/edit.js | 4 ++-- packages/components/src/form-file-upload/README.md | 2 +- packages/components/src/form-file-upload/index.tsx | 10 ++++++++-- 6 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/background-image-control/index.js b/packages/block-editor/src/components/background-image-control/index.js index 5b00100d64557..2703aa3988d64 100644 --- a/packages/block-editor/src/components/background-image-control/index.js +++ b/packages/block-editor/src/components/background-image-control/index.js @@ -361,7 +361,7 @@ function BackgroundImageControls( { mediaId={ id } mediaURL={ url } allowedTypes={ [ IMAGE_BACKGROUND_TYPE ] } - accept="image/*, image/heic" + accept="image/*" onSelect={ onSelectMedia } popoverProps={ { className: clsx( { diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index b451b2de95df4..360c4b8e6127b 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -461,7 +461,7 @@ export function ImageEdit( { onSelectURL={ onSelectURL } onError={ onUploadError } placeholder={ placeholder } - accept="image/*, image/heic" + accept="image/*" allowedTypes={ ALLOWED_MEDIA_TYPES } handleUpload={ ( files ) => files.length === 1 } value={ { id, src } } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 9a644331b1e53..89bf31f92664b 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -564,7 +564,7 @@ export default function Image( { mediaId={ id } mediaURL={ url } allowedTypes={ ALLOWED_MEDIA_TYPES } - accept="image/*, image/heic" + accept="image/*" onSelect={ onSelectImage } onSelectURL={ onSelectURL } onError={ onUploadError } diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index c4bb8a7444f4a..dff34379e4f3b 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -301,7 +301,7 @@ export default function PostFeaturedImageEdit( { image = ( setFeaturedImage( 0 ) } diff --git a/packages/components/src/form-file-upload/README.md b/packages/components/src/form-file-upload/README.md index 37fb984bd2e78..4dd8affc5f54a 100644 --- a/packages/components/src/form-file-upload/README.md +++ b/packages/components/src/form-file-upload/README.md @@ -9,7 +9,7 @@ import { FormFileUpload } from '@wordpress/components'; const MyFormFileUpload = () => ( console.log( event.currentTarget.files ) } > Upload diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index a1dfba4dbf3c9..39b14bce75540 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -18,7 +18,7 @@ import type { FormFileUploadProps } from './types'; * * const MyFormFileUpload = () => ( * console.log( event.currentTarget.files ) } * > * Upload @@ -47,6 +47,12 @@ export function FormFileUpload( { { children } ); + // @todo: Temporary fix a bug that prevents Chromium browsers from selecting ".heic" files + // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4. + // This can be removed once the Chromium fix is in the stable channel. + const compatAccept = !! accept?.includes( 'image/*' ) + ? `${ accept }, image/heic` + : accept; return (
@@ -56,7 +62,7 @@ export function FormFileUpload( { ref={ ref } multiple={ multiple } style={ { display: 'none' } } - accept={ accept } + accept={ compatAccept } onChange={ onChange } onClick={ onClick } data-testid="form-file-upload-input" From cd0e248acc37aae02f2e3473f78c95116be801ba Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Tue, 29 Oct 2024 15:29:44 -0600 Subject: [PATCH 4/4] add image/heif --- packages/components/src/form-file-upload/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 39b14bce75540..66f0b2ea6d648 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -51,7 +51,7 @@ export function FormFileUpload( { // from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4. // This can be removed once the Chromium fix is in the stable channel. const compatAccept = !! accept?.includes( 'image/*' ) - ? `${ accept }, image/heic` + ? `${ accept }, image/heic, image/heif` : accept; return (