task: Disable problematic media providers for GutenbergKit

projects/packages/external-media/changelog/task-disable-problematic-media-providers-for-gutenberg-kit

@@ -0,0 +1,4 @@
+Significance: patch
+Type: removed
+
+GutenbergKit: disable problematic media providers.

projects/packages/external-media/src/shared/media-button/media-menu.js

@@ -1,6 +1,7 @@
 import { Button, MenuItem, MenuGroup, Dropdown, NavigableMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon, media } from '@wordpress/icons';
+import { isGutenbergKit } from '../utils/is-gutenberg-kit';
 import { isSupportNext40pxDefaultSize } from '../utils/is-support-next-40px-default-size';
 import MediaSources from './media-sources';
 
@@ -13,6 +14,13 @@ function MediaButtonMenu( props ) {
 	const { mediaProps, open, setSelectedSource, isFeatured, isReplace, hasImage } = props;
 	const originalComponent = mediaProps.render;
 
+	// Disable the media button menu for GutenbergKit (mobile app) as the APIs for
+	// the external media sources do not currently support GutenbergKit's token
+	// authentication and CORS requests.
+	if ( isGutenbergKit() ) {
+		return originalComponent( { open } );
+	}
+
 	if ( isReplace ) {
 		return (
 			<MediaSources

projects/packages/external-media/src/shared/sources/index.js

@@ -16,6 +16,7 @@ import {
 	SOURCE_JETPACK_AI_GENERAL_PURPOSE_IMAGE_FOR_MEDIA_SOURCE,
 	SOURCE_JETPACK_AI_GENERAL_PURPOSE_IMAGE_FOR_BLOCK,
 } from '../constants';
+import { isGutenbergKit } from '../utils/is-gutenberg-kit';
 import GooglePhotosMedia from './google-photos';
 import JetpackAIFeaturedImage from './jetpack-ai-featured-image';
 import JetpackAIGeneralPurposeImageForBlock from './jetpack-ai-general-purpose-image-for-block';
@@ -24,7 +25,7 @@ import JetpackAppMedia from './jetpack-app-media';
 import OpenverseMedia from './openverse';
 import PexelsMedia from './pexels';
 
-export const internalMediaSources = [
+const allInternalMediaSources = [
 	{
 		id: SOURCE_JETPACK_APP_MEDIA,
 		label: __( 'Your Phone', 'jetpack-external-media' ),
@@ -33,6 +34,11 @@ export const internalMediaSources = [
 	},
 ];
 
+// Disable SOURCE_JETPACK_APP_MEDIA for GutenbergKit (mobile app) as sourcing
+// media from "Your phone" while on a phone is less useful and possibly
+// confusing.
+export const internalMediaSources = isGutenbergKit() ? [] : allInternalMediaSources;
+
 /**
  * Used when the context is for a featured image.
  */

projects/packages/external-media/src/shared/utils/is-gutenberg-kit.js

@@ -0,0 +1,8 @@
+/**
+ * Check if the editor is running in a GutenbergKit (mobile app) environment.
+ *
+ * @return {boolean} True if running in GutenbergKit, false otherwise.
+ */
+export const isGutenbergKit = () => {
+	return !! window?.GBKit;
+};