[RNMobile] Embed block - Link in Block Settings

packages/block-editor/src/components/block-settings/container.native.js

@@ -43,6 +43,7 @@ function BottomSheetSettings( {
 			hideHeader
 			contentStyle={ styles.content }
 			hasNavigation
+			testID="block-settings"
 			{ ...props }
 		>
 			<BottomSheet.NavigationContainer animate main>

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

@@ -13,7 +13,7 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-import EmbedBottomSheet from './embed-bottom-sheet';
+import EmbedLinkSettings from './embed-link-settings';
 
 /**
  * External dependencies
@@ -24,7 +24,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
-import { useState, useEffect } from '@wordpress/element';
+import { useCallback, useState, useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useBlockProps,
@@ -196,6 +196,14 @@ const EmbedEdit = ( props ) => {
 		isEditingURL,
 	] );
 
+	const onEditURL = useCallback( ( value ) => {
+		// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
+		// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
+		// for creating the new block.
+		setAttributes( { url: value } );
+		setIsEditingURL( false );
+	}, [] );
+
 	const blockProps = useBlockProps();
 
 	if ( fetching ) {
@@ -230,16 +238,12 @@ const EmbedEdit = ( props ) => {
 		( WP_EMBED_TYPE === type &&
 			! NOT_PREVIEWABLE_WP_EMBED_PROVIDERS.includes( providerNameSlug ) );
 
-	const bottomSheetLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
+	const linkLabel = WP_EMBED_TYPE === type ? 'WordPress' : title;
 
 	return (
 		<>
 			{ showEmbedPlaceholder ? (
 				<>
-					<EmbedControls
-						showEditButton={ cannotEmbed }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
-					/>
 					<View { ...blockProps }>
 						<EmbedPlaceholder
 							icon={ icon }
@@ -256,18 +260,22 @@ const EmbedEdit = ( props ) => {
 									url,
 								] );
 							} }
+							openEmbedLinkSettings={ () =>
+								setShowEmbedBottomSheet( true )
+							}
 						/>
 					</View>
 				</>
 			) : (
 				<>
 					<EmbedControls
-						showEditButton={ preview && ! cannotEmbed }
 						themeSupportsResponsive={ themeSupportsResponsive }
 						blockSupportsResponsive={ responsive }
 						allowResponsive={ allowResponsive }
 						toggleResponsive={ toggleResponsive }
-						switchBackToURLInput={ () => setIsEditingURL( true ) }
+						url={ url }
+						linkLabel={ linkLabel }
+						onEditURL={ onEditURL }
 					/>
 					<View { ...blockProps }>
 						<EmbedPreview
@@ -289,18 +297,15 @@ const EmbedEdit = ( props ) => {
 					</View>
 				</>
 			) }
-			<EmbedBottomSheet
+			<EmbedLinkSettings
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus
 				value={ url }
-				label={ bottomSheetLabel }
+				label={ linkLabel }
 				isVisible={ showEmbedBottomSheet }
 				onClose={ () => setShowEmbedBottomSheet( false ) }
-				onSubmit={ ( value ) => {
-					// The order of the following calls is important, we need to update the URL attribute before changing `isEditingURL`,
-					// otherwise the side-effect that potentially replaces the block when updating the local state won't use the new URL
-					// for creating the new block.
-					setAttributes( { url: value } );
-					setIsEditingURL( false );
-				} }
+				onSubmit={ onEditURL }
+				withBottomSheet
 			/>
 		</>
 	);

packages/block-library/src/embed/embed-controls.native.js

@@ -0,0 +1,65 @@
+/**
+ * Internal dependencies
+ */
+import EmbedLinkSettings from './embed-link-settings';
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { store as editPostStore } from '@wordpress/edit-post';
+
+function getResponsiveHelp( checked ) {
+	return checked
+		? __(
+				'This embed will preserve its aspect ratio when the browser is resized.'
+		  )
+		: __(
+				'This embed may not preserve its aspect ratio when the browser is resized.'
+		  );
+}
+
+const EmbedControls = ( {
+	blockSupportsResponsive,
+	themeSupportsResponsive,
+	allowResponsive,
+	toggleResponsive,
+	url,
+	linkLabel,
+	onEditURL,
+} ) => {
+	const { closeGeneralSidebar: closeSettingsBottomSheet } = useDispatch(
+		editPostStore
+	);
+
+	return (
+		<>
+			<InspectorControls>
+				{ themeSupportsResponsive && blockSupportsResponsive && (
+					<PanelBody title={ __( 'Media settings' ) }>
+						<ToggleControl
+							label={ __( 'Resize for smaller devices' ) }
+							checked={ allowResponsive }
+							help={ getResponsiveHelp }
+							onChange={ toggleResponsive }
+						/>
+					</PanelBody>
+				) }
+				<PanelBody title={ __( 'Link settings' ) }>
+					<EmbedLinkSettings
+						value={ url }
+						label={ linkLabel }
+						onSubmit={ ( value ) => {
+							closeSettingsBottomSheet();
+							onEditURL( value );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</>
+	);
+};
+
+export default EmbedControls;

packages/block-library/src/embed/embed-link-settings.native.js

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	LinkSettingsNavigation,
+	FooterMessageLink,
+} from '@wordpress/components';
+import { isURL } from '@wordpress/url';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
+
+const EmbedLinkSettings = ( {
+	autoFocus,
+	value,
+	label,
+	isVisible,
+	onClose,
+	onSubmit,
+	withBottomSheet,
+} ) => {
+	const url = useRef( value );
+	const [ inputURL, setInputURL ] = useState( value );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const linkSettingsOptions = {
+		url: {
+			label: sprintf(
+				// translators: %s: embed block variant's label e.g: "Twitter".
+				__( '%s link' ),
+				label
+			),
+			placeholder: __( 'Add link' ),
+			autoFocus,
+			autoFill: true,
+		},
+		footer: {
+			label: (
+				<FooterMessageLink
+					href={ __(
+						'https://wordpress.org/support/article/embeds/'
+					) }
+					value={ __( 'Learn more about embeds' ) }
+				/>
+			),
+			separatorType: 'topFullWidth',
+		},
+	};
+
+	const onDismiss = useCallback( () => {
+		if ( ! isURL( url.current ) && url.current !== '' ) {
+			createErrorNotice( __( 'Invalid URL. Please enter a valid URL.' ) );
+			// If the URL was already defined, we submit it to stop showing the embed placeholder.
+			onSubmit( value );
+			return;
+		}
+		onSubmit( url.current );
+	}, [ onSubmit, value ] );
+
+	useEffect( () => {
+		url.current = value;
+		setInputURL( value );
+	}, [ value ] );
+
+	/**
+	 * If the Embed Bottom Sheet component does not utilize a bottom sheet then the onDismiss action is not
+	 * called. Here we are wiring the onDismiss to the onClose callback that gets triggered when input is submitted.
+	 */
+	const performOnCloseOperations = useCallback( () => {
+		if ( onClose ) {
+			onClose();
+		}
+
+		if ( ! withBottomSheet ) {
+			onDismiss();
+		}
+	}, [ onClose ] );
+
+	const onSetAttributes = useCallback( ( attributes ) => {
+		url.current = attributes.url;
+		setInputURL( attributes.url );
+	}, [] );
+
+	return (
+		<LinkSettingsNavigation
+			isVisible={ isVisible }
+			url={ inputURL }
+			onClose={ performOnCloseOperations }
+			onDismiss={ onDismiss }
+			setAttributes={ onSetAttributes }
+			options={ linkSettingsOptions }
+			testID="embed-edit-url-modal"
+			withBottomSheet={ withBottomSheet }
+			showIcon
+		/>
+	);
+};
+
+export default EmbedLinkSettings;

packages/block-library/src/embed/embed-placeholder.native.js

@@ -27,6 +27,7 @@ const EmbedPlaceholder = ( {
 	cannotEmbed,
 	fallback,
 	tryAgain,
+	openEmbedLinkSettings,
 } ) => {
 	const containerStyle = usePreferredColorSchemeStyle(
 		styles.embed__container,
@@ -59,11 +60,18 @@ const EmbedPlaceholder = ( {
 			value: 'convertToLinkOption',
 			onSelect: fallback,
 		},
+		editLink: {
+			id: 'editLinkOption',
+			label: __( 'Edit link' ),
+			value: 'editLinkOption',
+			onSelect: openEmbedLinkSettings,
+		},
 	};
 
 	const options = compact( [
 		cannotEmbed && errorPickerOptions.retry,
 		cannotEmbed && errorPickerOptions.convertToLink,
+		cannotEmbed && errorPickerOptions.editLink,
 	] );
 
 	function onPickerSelect( value ) {