fix: Audio block iOS file picker compatibility (#137)

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

Author: dcalhoun

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", {

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.