[RNMobile] Add navigation to link settings and add link picker screen to block settings

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

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { InspectorControls } from '@wordpress/block-editor';
-import { BottomSheet, ColorSettings } from '@wordpress/components';
+import {
+	BottomSheet,
+	ColorSettings,
+	LinkPickerScreen,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 /**
@@ -13,6 +17,7 @@ import styles from './container.native.scss';
 export const blockSettingsScreens = {
 	settings: 'Settings',
 	color: 'Color',
+	linkPicker: 'linkPicker',
 };
 
 function BottomSheetSettings( {
@@ -41,6 +46,15 @@ function BottomSheetSettings( {
 				>
 					<ColorSettings defaultSettings={ settings } />
 				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.linkPicker }
+					fullScreen
+					isScrollable
+				>
+					<LinkPickerScreen
+						returnScreenName={ blockSettingsScreens.settings }
+					/>
+				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);

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

@@ -19,7 +19,7 @@ import {
 	RangeControl,
 	ToolbarGroup,
 	ToolbarButton,
-	LinkSettings,
+	LinkSettingsNavigation,
 } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -242,12 +242,13 @@ class ButtonEdit extends Component {
 		};
 
 		return (
-			<LinkSettings
+			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
 				attributes={ attributes }
 				onClose={ this.dismissSheet }
 				setAttributes={ setAttributes }
 				withBottomSheet={ ! isCompatibleWithSettings }
+				hasPicker
 				actions={ actions }
 				options={ options }
 				showIcon={ ! isCompatibleWithSettings }

packages/block-library/src/social-link/edit.native.js

@@ -11,7 +11,7 @@ import { useEffect, useState, useRef } from '@wordpress/element';
 import {
 	ToolbarGroup,
 	ToolbarButton,
-	LinkSettings,
+	LinkSettingsNavigation,
 } from '@wordpress/components';
 import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
@@ -162,7 +162,7 @@ const SocialLinkEdit = ( {
 					</ToolbarGroup>
 				</BlockControls>
 			) }
-			<LinkSettings
+			<LinkSettingsNavigation
 				isVisible={ isLinkSheetVisible }
 				attributes={ attributes }
 				onEmptyURL={ onEmptyURL }

packages/components/src/index.native.js

@@ -74,7 +74,10 @@ export { default as CycleSelectControl } from './mobile/cycle-select-control';
 export { default as Gradient } from './mobile/gradient';
 export { default as ColorSettings } from './mobile/color-settings';
 export { LinkPicker } from './mobile/link-picker';
+export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
 export { default as LinkSettings } from './mobile/link-settings';
+export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen';
+export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation';
 export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image';
 export { default as ImageEditingButton } from './mobile/image/image-editing-button';
 export { default as InserterButton } from './mobile/inserter-button';

packages/components/src/mobile/bottom-sheet/link-cell.native.js

@@ -12,10 +12,10 @@ import styles from './styles.scss';
 
 const { placeholderColor } = styles;
 
-export default function LinkCell( { value, onPress } ) {
+export default function LinkCell( { value, onPress, showIcon = true } ) {
 	return (
 		<Cell
-			icon={ link }
+			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
 			// since this is not actually editable, we treat value as a placeholder
 			value={ value || __( 'Search or type URL' ) }

packages/components/src/mobile/link-picker/link-picker-screen.native.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { useNavigation, useRoute } from '@react-navigation/native';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { LinkPicker } from './';
+
+const LinkPickerScreen = ( { returnScreenName } ) => {
+	const navigation = useNavigation();
+	const route = useRoute();
+
+	const onLinkPicked = ( { url, title } ) => {
+		navigation.navigate( returnScreenName, {
+			inputValue: url,
+			text: title,
+		} );
+	};
+
+	const onCancel = () => {
+		navigation.goBack();
+	};
+
+	const { inputValue } = route.params;
+	return useMemo( () => {
+		return (
+			<LinkPicker
+				value={ inputValue }
+				onLinkPicked={ onLinkPicked }
+				onCancel={ onCancel }
+			/>
+		);
+	}, [ inputValue ] );
+};
+
+export default LinkPickerScreen;

packages/components/src/mobile/link-settings/index.native.js

@@ -8,16 +8,14 @@ import { Platform, Clipboard } from 'react-native';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef, useContext } from '@wordpress/element';
 import { link, external } from '@wordpress/icons';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */
 import BottomSheet from '../bottom-sheet';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 import PanelBody from '../../panel/body';
 import TextControl from '../../text-control';
 import ToggleControl from '../../toggle-control';
@@ -80,13 +78,22 @@ function LinkSettings( {
 	editorSidebarOpened,
 	// Specifies whether icon should be displayed next to the label
 	showIcon,
+	onLinkCellPressed,
+	urlValue,
 } ) {
 	const { url, label, linkTarget, rel } = attributes;
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
 	const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' );
 	const prevEditorSidebarOpenedRef = useRef();
 
+	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
+	useEffect( () => {
+		if ( ! onLinkCellPressed ) {
+			onHandleClosingBottomSheet( onCloseSettingsSheet );
+		}
+	}, [ urlInputValue, labelInputValue, linkRelInputValue ] );
+
 	useEffect( () => {
 		prevEditorSidebarOpenedRef.current = editorSidebarOpened;
 	} );
@@ -115,6 +122,15 @@ function LinkSettings( {
 		}
 	}, [ editorSidebarOpened, isVisible ] );
 
+	useEffect( () => {
+		if ( ! urlValue && onEmptyURL ) {
+			onEmptyURL();
+		}
+		setAttributes( {
+			url: prependHTTP( urlValue ),
+		} );
+	}, [ urlValue ] );
+
 	function onChangeURL( value ) {
 		if ( ! value && onEmptyURL ) {
 			onEmptyURL();
@@ -176,23 +192,30 @@ function LinkSettings( {
 	function getSettings() {
 		return (
 			<>
-				{ options.url && (
-					<TextControl
-						icon={ showIcon && link }
-						label={ options.url.label }
-						value={ urlInputValue }
-						valuePlaceholder={ options.url.placeholder }
-						onChange={ onChangeURL }
-						onSubmit={ onCloseSettingsSheet }
-						autoCapitalize="none"
-						autoCorrect={ false }
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus={
-							Platform.OS === 'ios' && options.url.autoFocus
-						}
-						keyboardType="url"
-					/>
-				) }
+				{ options.url &&
+					( onLinkCellPressed ? (
+						<BottomSheet.LinkCell
+							showIcon={ showIcon }
+							value={ url }
+							onPress={ onLinkCellPressed }
+						/>
+					) : (
+						<TextControl
+							icon={ showIcon && link }
+							label={ options.url.label }
+							value={ urlInputValue }
+							valuePlaceholder={ options.url.placeholder }
+							onChange={ onChangeURL }
+							onSubmit={ onCloseSettingsSheet }
+							autoCapitalize="none"
+							autoCorrect={ false }
+							// eslint-disable-next-line jsx-a11y/no-autofocus
+							autoFocus={
+								Platform.OS === 'ios' && options.url.autoFocus
+							}
+							keyboardType="url"
+						/>
+					) ) }
 				{ options.linkLabel && (
 					<TextControl
 						label={ options.linkLabel.label }
@@ -231,11 +254,7 @@ function LinkSettings( {
 	}
 
 	return (
-		<BottomSheet
-			isVisible={ isVisible }
-			onClose={ onCloseSettingsSheet }
-			hideHeader
-		>
+		<>
 			<PanelBody style={ styles.linkSettingsPanel }>
 				{ getSettings() }
 			</PanelBody>
@@ -248,7 +267,7 @@ function LinkSettings( {
 				</PanelBody>
 			) }
 			{ actions && <PanelActions actions={ actions } /> }
-		</BottomSheet>
+		</>
 	);
 }
 

packages/components/src/mobile/link-settings/link-settings-navigation.native.js

@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../bottom-sheet';
+import LinkSettingsScreen from './link-settings-screen';
+import LinkPickerScreen from '../link-picker/link-picker-screen';
+
+const linkSettingsScreens = {
+	settings: 'LinkSettingsScreen',
+	linkPicker: 'linkPicker',
+};
+
+function LinkSettingsNavigation( props ) {
+	if ( ! props.withBottomSheet ) {
+		return <LinkSettingsScreen { ...props } />;
+	}
+	return (
+		<BottomSheet
+			isVisible={ props.isVisible }
+			onClose={ props.onClose }
+			hideHeader
+			hasNavigation
+		>
+			<BottomSheet.NavigationContainer animate main>
+				<BottomSheet.NavigationScreen
+					name={ linkSettingsScreens.settings }
+				>
+					<LinkSettingsScreen { ...props } withBottomSheet />
+				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ linkSettingsScreens.linkPicker }
+					isScrollable
+					fullScreen
+				>
+					<LinkPickerScreen
+						returnScreenName={ linkSettingsScreens.settings }
+					/>
+				</BottomSheet.NavigationScreen>
+			</BottomSheet.NavigationContainer>
+		</BottomSheet>
+	);
+}
+
+export default LinkSettingsNavigation;

packages/components/src/mobile/link-settings/link-settings-screen.native.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { useNavigation, useRoute } from '@react-navigation/native';
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import LinkSettings from './';
+
+const LinkSettingsScreen = ( props ) => {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props.attributes || {};
+	const { inputValue = url } = route.params || {};
+
+	const onLinkCellPressed = () => {
+		navigation.navigate( 'linkPicker', { inputValue } );
+	};
+
+	return useMemo( () => {
+		return (
+			<LinkSettings
+				onLinkCellPressed={
+					props.hasPicker ? onLinkCellPressed : undefined
+				}
+				urlValue={ inputValue }
+				{ ...props }
+			/>
+		);
+	}, [ props, inputValue, navigation, route ] );
+};
+
+export default LinkSettingsScreen;

packages/react-native-editor/CHANGELOG.md

@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 
 * [***] Adding support for selecting different unit of value in Cover and Columns blocks
+* [**] Button block - Add link picker to the block settings
 
 ## 1.41.0