diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
index d437a8b12d28b..79e7f76363b40 100644
--- a/packages/block-library/src/button/edit.native.js
+++ b/packages/block-library/src/button/edit.native.js
@@ -248,6 +248,7 @@ class ButtonEdit extends Component {
onClose={ this.dismissSheet }
setAttributes={ setAttributes }
withBottomSheet={ ! isCompatibleWithSettings }
+ hasPicker
actions={ actions }
options={ options }
showIcon={ ! isCompatibleWithSettings }
diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
index e10db29379399..45b77916ad7a5 100644
--- a/packages/components/src/mobile/link-settings/index.native.js
+++ b/packages/components/src/mobile/link-settings/index.native.js
@@ -1,23 +1,21 @@
/**
* External dependencies
*/
-import { Clipboard } from 'react-native';
+import { Clipboard, Platform } from 'react-native';
/**
* WordPress dependencies
*/
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import { isURL, prependHTTP } from '@wordpress/url';
-import { useEffect, useState, useRef } from '@wordpress/element';
-import { external } from '@wordpress/icons';
+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';
@@ -89,6 +87,13 @@ function LinkSettings( {
const [ linkRelInputValue, setLinkRelInputValue ] = useState( '' );
const prevEditorSidebarOpenedRef = useRef();
+ const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
+ useEffect( () => {
+ if ( ! onLinkCellPressed ) {
+ onHandleClosingBottomSheet( onCloseSettingsSheet );
+ }
+ }, [ urlInputValue, labelInputValue, linkRelInputValue ] );
+
useEffect( () => {
prevEditorSidebarOpenedRef.current = editorSidebarOpened;
} );
@@ -163,6 +168,13 @@ function LinkSettings( {
setLinkRelInputValue( value );
}
+ function onChangeURL( value ) {
+ if ( ! value && onEmptyURL ) {
+ onEmptyURL();
+ }
+ setUrlInputValue( value );
+ }
+
async function getURLFromClipboard() {
const clipboardText = await Clipboard.getString();
@@ -180,13 +192,30 @@ function LinkSettings( {
function getSettings() {
return (
<>
- { options.url && (
-
- ) }
+ { options.url &&
+ ( onLinkCellPressed ? (
+
+ ) : (
+
+ ) ) }
{ options.linkLabel && (
{
return useMemo( () => {
return (