From 6d288f1b9e65bd7502c32e8a165c5a5040c5e6fc Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 19 Nov 2024 21:44:32 +0100 Subject: [PATCH 1/8] =?UTF-8?q?Revert=20"Ensure=20HEIC=20files=20selectabl?= =?UTF-8?q?e=20from=20=E2=80=9CUpload=E2=80=9D=20button=20(#66292)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit c5921d766c143ef6774c827c8c2f6322b2b26b6b. --- packages/components/src/form-file-upload/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 66f0b2ea6d6480..0600e47d7324c3 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -47,12 +47,6 @@ 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, image/heif` - : accept; return (
@@ -62,7 +56,7 @@ export function FormFileUpload( { ref={ ref } multiple={ multiple } style={ { display: 'none' } } - accept={ compatAccept } + accept={ accept } onChange={ onChange } onClick={ onClick } data-testid="form-file-upload-input" From 97b802f801e760c2bb17febe3bb69f7a688578a2 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 19 Nov 2024 21:59:31 +0100 Subject: [PATCH 2/8] Update changelog --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 93b191bff269d6..32d7a342280432 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- `FormFileUpload`: Revert "Ensure HEIC files selectable from “Upload” button" ([67139](https://github.com/WordPress/gutenberg/pull/67139)). + ### Deprecations - `Radio`: Deprecate 36px default size ([#66572](https://github.com/WordPress/gutenberg/pull/66572)). From 13d6ec4dcfe62a4b805a154e373f596c26af02a6 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 19 Nov 2024 22:22:15 +0100 Subject: [PATCH 3/8] Make it Safari conditional --- .../components/src/form-file-upload/index.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 0600e47d7324c3..1a84afd777f31c 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useRef, useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -26,6 +26,7 @@ import type { FormFileUploadProps } from './types'; * ); * ``` */ + export function FormFileUpload( { accept, children, @@ -48,6 +49,20 @@ export function FormFileUpload( { ); + // @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 [ isSafari, setIsSafari ] = useState( false ); + useEffect( () => { + setIsSafari( + /^((?!chrome|android).)*safari/i.test( navigator.userAgent ) + ); + }, [] ); + const compatAccept = + ! isSafari && !! accept?.includes( 'image/*' ) + ? `${ accept }, image/heic, image/heif` + : accept; + return (
{ ui } @@ -56,7 +71,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 544b2ec0cf4c9e35e9385e068816e351d79b2ef2 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 19 Nov 2024 22:23:56 +0100 Subject: [PATCH 4/8] Remove extra whitespaces --- packages/components/src/form-file-upload/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 1a84afd777f31c..c9cea3999cc10b 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -26,7 +26,6 @@ import type { FormFileUploadProps } from './types'; * ); * ``` */ - export function FormFileUpload( { accept, children, @@ -48,7 +47,6 @@ 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. From 2b71be4a60cc4bea9698bbddf0542a88b2b781c7 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Tue, 19 Nov 2024 22:30:52 +0100 Subject: [PATCH 5/8] Update changelog --- packages/components/CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 32d7a342280432..901de349bd777b 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -2,7 +2,9 @@ ## Unreleased -- `FormFileUpload`: Revert "Ensure HEIC files selectable from “Upload” button" ([67139](https://github.com/WordPress/gutenberg/pull/67139)). +### Bug Fixes + +- `FormFileUpload`: Image Block: Fix transparent pngs not being uploaded correctly on Safari browser. ([67139](https://github.com/WordPress/gutenberg/pull/67139)). ### Deprecations From 21a1cb05850ca2c052f59a659fc339848aa9a27b Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:57:01 +0100 Subject: [PATCH 6/8] Use globalthis --- packages/components/CHANGELOG.md | 2 +- packages/components/src/form-file-upload/index.tsx | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 901de349bd777b..fc1b1e7a6348dc 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,7 +4,7 @@ ### Bug Fixes -- `FormFileUpload`: Image Block: Fix transparent pngs not being uploaded correctly on Safari browser. ([67139](https://github.com/WordPress/gutenberg/pull/67139)). +- `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([67139](https://github.com/WordPress/gutenberg/pull/67139)). ### Deprecations diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index c9cea3999cc10b..5d3274dd5b3622 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useRef, useState, useEffect } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; /** * Internal dependencies @@ -50,12 +50,11 @@ export function FormFileUpload( { // @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 [ isSafari, setIsSafari ] = useState( false ); - useEffect( () => { - setIsSafari( - /^((?!chrome|android).)*safari/i.test( navigator.userAgent ) - ); - }, [] ); + // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute. + const isSafari = + globalThis.navigator?.userAgent.includes( 'Safari' ) && + ! globalThis.navigator?.userAgent.includes( 'Chrome' ) && + ! globalThis.navigator?.userAgent.includes( 'Chromium' ); const compatAccept = ! isSafari && !! accept?.includes( 'image/*' ) ? `${ accept }, image/heic, image/heif` From aa2c911a393d6787c36b3892845d1cc1ce0928f0 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:05:16 +0100 Subject: [PATCH 7/8] Forgot a # --- packages/components/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index fc1b1e7a6348dc..30767e17b16caa 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -4,7 +4,7 @@ ### Bug Fixes -- `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([67139](https://github.com/WordPress/gutenberg/pull/67139)). +- `FormFileUpload`: Prevent HEIC and HEIF files from being uploaded on Safari ([#67139](https://github.com/WordPress/gutenberg/pull/67139)). ### Deprecations From 460ece427aaa41c0649b657c6e661e58ca0fb267 Mon Sep 17 00:00:00 2001 From: Carlos Bravo <37012961+cbravobernal@users.noreply.github.com> Date: Wed, 20 Nov 2024 13:32:47 +0100 Subject: [PATCH 8/8] Make it safer --- packages/components/src/form-file-upload/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/form-file-upload/index.tsx b/packages/components/src/form-file-upload/index.tsx index 5d3274dd5b3622..83d563f2074764 100644 --- a/packages/components/src/form-file-upload/index.tsx +++ b/packages/components/src/form-file-upload/index.tsx @@ -52,9 +52,9 @@ export function FormFileUpload( { // This can be removed once the Chromium fix is in the stable channel. // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute. const isSafari = - globalThis.navigator?.userAgent.includes( 'Safari' ) && - ! globalThis.navigator?.userAgent.includes( 'Chrome' ) && - ! globalThis.navigator?.userAgent.includes( 'Chromium' ); + globalThis.window?.navigator.userAgent.includes( 'Safari' ) && + ! globalThis.window?.navigator.userAgent.includes( 'Chrome' ) && + ! globalThis.window?.navigator.userAgent.includes( 'Chromium' ); const compatAccept = ! isSafari && !! accept?.includes( 'image/*' ) ? `${ accept }, image/heic, image/heif`