From e08f1994aa5077ff2c300b2e3d0aaa1ec861d94f Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Mon, 19 May 2025 14:19:13 -0400
Subject: [PATCH] fix: Audio block iOS file picker compatibility
iOS Safari's `accept` attribute lacks wildcard `audio/*` support. This
patch can be removed once [the issue](https://github.com/WordPress/gutenberg/issues/70119)
is addressed in a future release.
See: https://stackoverflow.com/a/66859581
---
patches/@wordpress+components+29.8.0.patch | 30 ++++++++++++++++++++++
patches/README.md | 4 +++
2 files changed, 34 insertions(+)
create mode 100644 patches/@wordpress+components+29.8.0.patch
diff --git a/patches/@wordpress+components+29.8.0.patch b/patches/@wordpress+components+29.8.0.patch
new file mode 100644
index 00000000..f4372c42
--- /dev/null
+++ b/patches/@wordpress+components+29.8.0.patch
@@ -0,0 +1,30 @@
+diff --git a/node_modules/@wordpress/components/build-module/form-file-upload/index.js b/node_modules/@wordpress/components/build-module/form-file-upload/index.js
+index 9f1440e..e256971 100644
+--- a/node_modules/@wordpress/components/build-module/form-file-upload/index.js
++++ b/node_modules/@wordpress/components/build-module/form-file-upload/index.js
+@@ -55,12 +55,23 @@ export function FormFileUpload({
+ ...props,
+ children: children
+ });
++ const isSafari = typeof window !== "undefined" &&
++ !!window.document?.createElement &&
++ /mac|iphone|ipad|ipod/i.test( window?.navigator?.platform ) &&
++ /apple/i.test(window?.navigator?.vendor);
++ let compatAccept = accept;
+ // @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.
+ // Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
+- const isSafari = 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` : accept;
++ if (!isSafari && !!accept?.includes('image/*')) {
++ compatAccept = `${accept}, image/heic, image/heif`;
++ }
++ // iOS Safari's `accept` attribute lacks wildcard `audio/*` support.
++ // https://stackoverflow.com/a/66859581
++ if (isSafari && !!accept?.includes('audio/*')) {
++ compatAccept = `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm`;
++ }
+ return /*#__PURE__*/_jsxs("div", {
+ className: "components-form-file-upload",
+ children: [ui, /*#__PURE__*/_jsx("input", {
diff --git a/patches/README.md b/patches/README.md
index 39fde5f5..521fd07c 100644
--- a/patches/README.md
+++ b/patches/README.md
@@ -11,6 +11,10 @@ Existing patches should be described and justified here.
- Expose an `open` prop on the `Inserter` component, allowing toggling the inserter visibility via the quick inserter's "Browse all" button.
- Disable `stripExperimentalSettings` in the `BlockEditorProvider` component so that the Patterns and Media inserter tabs function.
+### `@wordpress/components`
+
+- Apply workaround to `FormFileUpload` to address iOS Safari's lack of support for a wildcard `audio/*` MIME type. Can be removed once [the issue](https://github.com/WordPress/gutenberg/issues/70119) is resolved in a future release.
+
### `@wordpress/rich-text`
- Fix `preventFocusCapture` causing uneditable text blocks on touch devices when scrolling by swiping outside of the block canvas--e.g., along the edge of the screen.