[RNMobile] Add 'Insert from URL' option to Video block (#41493)

* Add onSelectURL function to mobile Video block edit

* Add notices store to mobile Video block

* Display Insert from URL in Video block media options menu

* Allow native video block to use Embed block for embeddable URLs

* Update native Video block src onSelectURL attribute

* Update CHANGELOG

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

@@ -127,7 +127,7 @@ export class MediaUpload extends Component {
 			id: URL_MEDIA_SOURCE,
 			value: URL_MEDIA_SOURCE,
 			label: __( 'Insert from URL' ),
-			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE ],
+			types: [ MEDIA_TYPE_AUDIO, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO ],
 			icon: globe,
 		};
 

packages/block-library/src/video/edit.native.js

@@ -36,11 +36,13 @@ import { __, sprintf } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { video as SvgIcon, replace } from '@wordpress/icons';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
+import { createUpgradedEmbedBlock } from '../embed/util';
 import style from './style.scss';
 import SvgIconRetry from './icon-retry';
 import VideoCommonSettings from './edit-common-settings';
@@ -64,6 +66,7 @@ class VideoEdit extends Component {
 		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
 			this
 		);
+		this.onSelectURL = this.onSelectURL.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
 			this
 		);
@@ -160,6 +163,25 @@ class VideoEdit extends Component {
 		setAttributes( { id, src: url } );
 	}
 
+	onSelectURL( url ) {
+		const { createErrorNotice, onReplace, setAttributes } = this.props;
+
+		if ( isURL( url ) ) {
+			// Check if there's an embed block that handles this URL.
+			const embedBlock = createUpgradedEmbedBlock( {
+				attributes: { url },
+			} );
+			if ( undefined !== embedBlock ) {
+				onReplace( embedBlock );
+				return;
+			}
+
+			setAttributes( { id: url, src: url } );
+		} else {
+			createErrorNotice( __( 'Invalid URL.' ) );
+		}
+	}
+
 	onVideoContanerLayout( event ) {
 		const { width } = event.nativeEvent.layout;
 		const height = width / VIDEO_ASPECT_RATIO;
@@ -205,6 +227,7 @@ class VideoEdit extends Component {
 				allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 				isReplacingMedia={ true }
 				onSelect={ this.onSelectMediaUploadOption }
+				onSelectURL={ this.onSelectURL }
 				render={ ( { open, getMediaOptions } ) => {
 					return (
 						<ToolbarGroup>
@@ -226,6 +249,7 @@ class VideoEdit extends Component {
 					<MediaPlaceholder
 						allowedTypes={ [ MEDIA_TYPE_VIDEO ] }
 						onSelect={ this.onSelectMediaUploadOption }
+						onSelectURL={ this.onSelectURL }
 						icon={ this.getIcon( ICON_TYPE.PLACEHOLDER ) }
 						onFocus={ this.props.onFocus }
 						autoOpenMediaUpload={
@@ -378,5 +402,10 @@ export default compose( [
 			'inserter_menu'
 		),
 	} ) ),
+	withDispatch( ( dispatch ) => {
+		const { createErrorNotice } = dispatch( noticesStore );
+
+		return { createErrorNotice };
+	} ),
 	withPreferredColorScheme,
 ] )( VideoEdit );

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
+-   [*] Add 'Insert from URL' option to Video block [#41493]
 
 ## 1.77.1