Skip to content

Commit 2585fc7

Browse files
committed
fix: Audio block iOS file picker compatibility
iOS Safari's `accept` attribute lacks wildcard `audio/*` support. This patch can be removed once [the issue](WordPress/gutenberg#70119) is addressed in a future release. See: https://stackoverflow.com/a/66859581
1 parent 1b19fef commit 2585fc7

File tree

2 files changed

+30
-0
lines changed

2 files changed

+30
-0
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
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
2+
index 9f1440e..c263822 100644
3+
--- a/node_modules/@wordpress/components/build-module/form-file-upload/index.js
4+
+++ b/node_modules/@wordpress/components/build-module/form-file-upload/index.js
5+
@@ -59,8 +59,19 @@ export function FormFileUpload({
6+
// from the file upload. See https://core.trac.wordpress.org/ticket/62268#comment:4.
7+
// This can be removed once the Chromium fix is in the stable channel.
8+
// Prevent Safari from adding "image/heic" and "image/heif" to the accept attribute.
9+
- const isSafari = globalThis.window?.navigator.userAgent.includes('Safari') && !globalThis.window?.navigator.userAgent.includes('Chrome') && !globalThis.window?.navigator.userAgent.includes('Chromium');
10+
- const compatAccept = !isSafari && !!accept?.includes('image/*') ? `${accept}, image/heic, image/heif` : accept;
11+
+ const isSafari = typeof window !== "undefined" &&
12+
+ !!window.document?.createElement &&
13+
+ /mac|iphone|ipad|ipod/i.test( window?.navigator?.platform ) &&
14+
+ /apple/i.test(window?.navigator?.vendor);
15+
+ let compatAccept = accept;
16+
+ if (!isSafari && !!accept?.includes('image/*')) {
17+
+ compatAccept = `${accept}, image/heic, image/heif`;
18+
+ }
19+
+ // iOS Safari's `accept` attribute lacks wildcard `audio/*` support.
20+
+ // https://stackoverflow.com/a/66859581
21+
+ if (isSafari && !!accept?.includes('audio/*')) {
22+
+ compatAccept = `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm`;
23+
+ }
24+
return /*#__PURE__*/_jsxs("div", {
25+
className: "components-form-file-upload",
26+
children: [ui, /*#__PURE__*/_jsx("input", {

patches/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,7 @@ Existing patches should be described and justified here.
1010

1111
- Expose an `open` prop on the `Inserter` component, allowing toggling the inserter visibility via the quick inserter's "Browse all" button.
1212
- Disable `stripExperimentalSettings` in the `BlockEditorProvider` component so that the Patterns and Media inserter tabs function.
13+
14+
### `@wordpress/components`
15+
16+
- 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.

0 commit comments

Comments
 (0)