feat: Insert from URL leverages a bottom sheet

packages/block-editor/src/components/index.native.js

@@ -38,13 +38,13 @@ export {
 } from './rich-text';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
+export { default as MediaUpload } from './media-upload';
 export {
-	default as MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 	MEDIA_TYPE_ANY,
-} from './media-upload';
+} from './media-upload/constants';
 export {
 	default as MediaUploadProgress,
 	MEDIA_UPLOAD_STATE_UPLOADING,

packages/block-editor/src/components/media-placeholder/index.native.js

@@ -8,12 +8,6 @@ import { sentenceCase } from 'change-case';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	MediaUpload,
-	MEDIA_TYPE_IMAGE,
-	MEDIA_TYPE_VIDEO,
-	MEDIA_TYPE_AUDIO,
-} from '@wordpress/block-editor';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { cloneElement, useCallback, useRef } from '@wordpress/element';
 import { Icon, plusCircleFilled } from '@wordpress/icons';
@@ -23,6 +17,12 @@ import { Icon, plusCircleFilled } from '@wordpress/icons';
  */
 import styles from './styles.scss';
 import { useBlockEditContext } from '../block-edit/context';
+import MediaUpload from '../media-upload';
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+} from '../media-upload/constants';
 
 const isMediaEqual = ( media1, media2 ) =>
 	media1.id === media2.id || media1.url === media2.url;

packages/block-editor/src/components/media-upload/constants.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const MEDIA_TYPE_IMAGE = 'image';
+export const MEDIA_TYPE_VIDEO = 'video';
+export const MEDIA_TYPE_AUDIO = 'audio';
+export const MEDIA_TYPE_ANY = 'any';
+
+export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
+export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
+export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
+export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
+export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );

packages/block-editor/src/components/media-upload/index.native.js

@@ -3,14 +3,17 @@
  */
 import { Platform } from 'react-native';
 
-import prompt from 'react-native-prompt-android';
-
 /**
  * WordPress dependencies
  */
 import { Component, React } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Picker } from '@wordpress/components';
+import {
+	BottomSheet,
+	PanelBody,
+	Picker,
+	TextControl,
+} from '@wordpress/components';
 import {
 	getOtherMediaOptions,
 	requestMediaPicker,
@@ -28,16 +31,16 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
-export const MEDIA_TYPE_IMAGE = 'image';
-export const MEDIA_TYPE_VIDEO = 'video';
-export const MEDIA_TYPE_AUDIO = 'audio';
-export const MEDIA_TYPE_ANY = 'any';
-
-export const OPTION_TAKE_VIDEO = __( 'Take a Video' );
-export const OPTION_TAKE_PHOTO = __( 'Take a Photo' );
-export const OPTION_TAKE_PHOTO_OR_VIDEO = __( 'Take a Photo or Video' );
-export const OPTION_INSERT_FROM_URL = __( 'Insert from URL' );
-export const OPTION_WORDPRESS_MEDIA_LIBRARY = __( 'WordPress Media Library' );
+/**
+ * Internal dependencies
+ */
+import {
+	MEDIA_TYPE_IMAGE,
+	MEDIA_TYPE_VIDEO,
+	MEDIA_TYPE_AUDIO,
+	MEDIA_TYPE_ANY,
+} from './constants';
+import styles from './style.scss';
 
 const URL_MEDIA_SOURCE = 'URL';
 
@@ -52,6 +55,8 @@ export class MediaUpload extends Component {
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getAllSources = this.getAllSources.bind( this );
 		this.state = {
+			url: '',
+			showURLInput: false,
 			otherMediaOptions: [],
 		};
 	}
@@ -204,31 +209,10 @@ export class MediaUpload extends Component {
 	}
 
 	onPickerSelect( value ) {
-		const {
-			allowedTypes = [],
-			onSelect,
-			onSelectURL,
-			multiple = false,
-		} = this.props;
+		const { allowedTypes = [], onSelect, multiple = false } = this.props;
 
 		if ( value === URL_MEDIA_SOURCE ) {
-			prompt(
-				__( 'Type a URL' ), // title
-				undefined, // message
-				[
-					{
-						text: __( 'Cancel' ),
-						style: 'cancel',
-					},
-					{
-						text: __( 'Apply' ),
-						onPress: onSelectURL,
-					},
-				], // Buttons.
-				'plain-text', // type
-				undefined, // defaultValue
-				'url' // keyboardType
-			);
+			this.setState( { showURLInput: true } );
 			return;
 		}
 
@@ -306,13 +290,55 @@ export class MediaUpload extends Component {
 			/>
 		);
 
-		return this.props.render( {
-			open: this.onPickerPresent,
-			getMediaOptions,
-		} );
+		return (
+			<>
+				<URLInput
+					isVisible={ this.state.showURLInput }
+					onClose={ () => {
+						if ( this.state.url !== '' ) {
+							this.props.onSelectURL( this.state.url );
+						}
+						this.setState( { showURLInput: false, url: '' } );
+					} }
+					onChange={ ( url ) => {
+						this.setState( { url } );
+					} }
+					value={ this.state.url }
+				/>
+				{ this.props.render( {
+					open: this.onPickerPresent,
+					getMediaOptions,
+				} ) }
+			</>
+		);
 	}
 }
 
+function URLInput( props ) {
+	return (
+		<BottomSheet
+			hideHeader
+			isVisible={ props.isVisible }
+			onClose={ props.onClose }
+		>
+			<PanelBody style={ styles[ 'media-upload__link-input' ] }>
+				<TextControl
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					autoCapitalize="none"
+					autoCorrect={ false }
+					autoComplete={ Platform.isIOS ? 'url' : 'off' }
+					keyboardType="url"
+					label={ __( 'Insert from URL' ) }
+					onChange={ props.onChange }
+					placeholder={ __( 'Type a URL' ) }
+					value={ props.value }
+				/>
+			</PanelBody>
+		</BottomSheet>
+	);
+}
+
 export default compose( [
 	withSelect( ( select ) => {
 		const { capabilities } = select( blockEditorStore ).getSettings();

packages/block-editor/src/components/media-upload/style.native.scss

@@ -0,0 +1,4 @@
+.media-upload__link-input {
+	padding-left: 0;
+	padding-right: 0;
+}

packages/block-editor/src/components/media-upload/test/index.native.js

@@ -14,16 +14,16 @@ import { requestMediaPicker } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
+import { MediaUpload } from '../index';
 import {
-	MediaUpload,
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
 	MEDIA_TYPE_AUDIO,
 	OPTION_TAKE_VIDEO,
 	OPTION_TAKE_PHOTO,
 	OPTION_INSERT_FROM_URL,
 	OPTION_WORDPRESS_MEDIA_LIBRARY,
-} from '../index';
+} from '../constants';
 
 const MEDIA_URL = 'http://host.media.type';
 const MEDIA_ID = 123;

packages/components/src/mobile/bottom-sheet/index.native.js

@@ -527,6 +527,7 @@ class BottomSheet extends Component {
 					panResponder.panHandlers.onMoveShouldSetResponderCapture
 				}
 				onAccessibilityEscape={ this.onCloseBottomSheet }
+				testID="bottom-sheet"
 				{ ...rest }
 			>
 				<KeyboardAvoidingView

packages/react-native-bridge/android/react-native-bridge/build.gradle

@@ -90,7 +90,6 @@ dependencies {
     implementation "com.facebook.react:react-android:$rnVersion"
     implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-slider:${extractPackageVersion(packageJson, '@react-native-community/slider', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-prompt-android:${extractPackageVersion(packageJson, 'react-native-prompt-android', 'dependencies')}"
 
     // Published by `wordpress-mobile/react-native-libraries-publisher`
     // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`

packages/react-native-bridge/android/react-native-bridge/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -73,7 +73,6 @@
 import java.util.concurrent.CountDownLatch;
 import java.util.concurrent.TimeUnit;
 
-import im.shimo.react.prompt.RNPromptPackage;
 import okhttp3.OkHttpClient;
 
 
@@ -618,7 +617,6 @@ public ReactInstanceManager getReactInstanceManager(ReactApplicationContext reac
                         return mReactInstanceManager;
                     }
                 },
-                new RNPromptPackage(),
                 new RNCWebViewPackage(),
                 new ClipboardPackage(),
                 new FastImageViewPackage(),

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Fix the obscurred "Insert from URL" input for media blocks when using a device in landscape orientation. [#54096]
 
 ## 1.103.0
 -   [**] Replace third-party dependency react-native-hsv-color-picker with first-party code [#53329]

packages/react-native-editor/android/app/build.gradle

@@ -142,7 +142,6 @@ dependencies {
 
     implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}"
     implementation "com.github.wordpress-mobile:react-native-slider:${extractPackageVersion(packageJson, '@react-native-community/slider', 'dependencies')}"
-    implementation "com.github.wordpress-mobile:react-native-prompt-android:${extractPackageVersion(packageJson, 'react-native-prompt-android', 'dependencies')}"
 
     // Published by `wordpress-mobile/react-native-libraries-publisher`
     // See the documentation for this value in `build.gradle.kts` of `wordpress-mobile/react-native-libraries-publisher`

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -51,8 +51,6 @@
 import java.util.List;
 import java.util.ArrayList;
 
-import im.shimo.react.prompt.RNPromptPackage;
-
 public class MainApplication extends Application implements ReactApplication, GutenbergBridgeInterface {
 
     private static final String TAG = "MainApplication";
@@ -334,7 +332,6 @@ protected List<ReactPackage> getPackages() {
                         new ReanimatedPackage(),
                         new SafeAreaContextPackage(),
                         new RNScreensPackage(),
-                        new RNPromptPackage(),
                         new RNCWebViewPackage(),
                         new ClipboardPackage(),
                         new FastImageViewPackage(),

packages/react-native-editor/package.json

@@ -63,7 +63,6 @@
 		"react-native-get-random-values": "1.4.0",
 		"react-native-linear-gradient": "2.7.3",
 		"react-native-modal": "13.0.1",
-		"react-native-prompt-android": "https://raw.githubusercontent.com/wordpress-mobile/react-native-prompt-android/v1.0.0-wp-4/react-native-prompt-android-1.0.0-wp-4.tgz",
 		"react-native-reanimated": "2.17.0",
 		"react-native-safe-area": "^0.5.0",
 		"react-native-safe-area-context": "4.6.3",