@wordpress/components 17.0.0 → 19.0.2

package/src/mobile/bottom-sheet/nav-bar/README.md

@@ -1,6 +1,6 @@
-# BottomSheet Header
+# BottomSheet NavBar
 
-BottomSheet Header components provide styled elements for composing header UI within a `BottomSheet`.
+BottomSheet NavBar components provide styled elements for composing a NavBar UI within a `BottomSheet`. It makes several other components available, which can then be used to compose the NavBar's content.
 
 ## Usage
 
@@ -11,7 +11,7 @@ export default = () => (
 	<BottomSheet>
 		<BottomSheet.NavBar>
 			<BottomSheet.NavBar.BackButton onPress={ () => {} } />
-			<BottomSheet.NavBar.Title>A Sheet Title</BottomSheet.NavBar.Title>
+			<BottomSheet.NavBar.Heading>A Sheet Title</BottomSheet.NavBar.Heading>
 			<BottomSheet.NavBar.ApplyButton onPress={ () => {} } />
 		</BottomSheet.NavBar>
 	</BottomSheet>
@@ -22,7 +22,7 @@ export default = () => (
 
 Provides structural styles for left-center-right layout for header UI.
 
-## BottomSheet.NavBar.Title
+## BottomSheet.NavBar.Heading
 
 Displays a styled title for a bottom sheet.
 
@@ -39,6 +39,7 @@ Callback invoked once the button is pressed.
 ## BottomSheet.NavBar.BackButton
 
 Displays a styled button to navigate backwards from a bottom sheet.
+Note that the backwards navigation needs to be implemented in the callback that is passed in onPress.
 
 ### Props
 
@@ -48,7 +49,8 @@ Callback invoked once the button is pressed.
 
 ## BottomSheet.NavBar.DismissButton
 
-Displays a styled button to dismiss a full screen bottom sheet.
+Displays a styled button to dismiss the bottom sheet screen.
+Note that the bottomSheet dismissal needs to be implemented in the callback that is passed in onPress.
 
 ### Props
 
@@ -58,4 +60,4 @@ Callback invoked once the button is pressed.
 
 #### iosText 
 
-Used to display iOS text if different from "Cancel". 
+Used to display iOS text if different from "Cancel".

package/src/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -50,7 +50,7 @@ function BackButton( { onPress } ) {
 	);
 	const arrowLeftStyle = usePreferredColorSchemeStyle(
 		styles[ 'arrow-left-icon' ],
-		styles[ 'arrow-right-icon-dark' ]
+		styles[ 'arrow-left-icon-dark' ]
 	);
 
 	let backIcon;
@@ -73,7 +73,7 @@ function BackButton( { onPress } ) {
 function DismissButton( { onPress, iosText } ) {
 	const arrowLeftStyle = usePreferredColorSchemeStyle(
 		styles[ 'arrow-left-icon' ],
-		styles[ 'arrow-right-icon-dark' ]
+		styles[ 'arrow-left-icon-dark' ]
 	);
 
 	let backIcon;

package/src/mobile/bottom-sheet/range-cell.native.js

@@ -25,6 +25,7 @@ class BottomSheetRangeCell extends Component {
 	constructor( props ) {
 		super( props );
 		this.onSliderChange = this.onSliderChange.bind( this );
+		this.onCompleteSliderChange = this.onCompleteSliderChange.bind( this );
 		this.onTextInputChange = this.onTextInputChange.bind( this );
 		this.a11yIncrementValue = this.a11yIncrementValue.bind( this );
 		this.a11yDecrementValue = this.a11yDecrementValue.bind( this );
@@ -61,6 +62,14 @@ class BottomSheetRangeCell extends Component {
 		}
 	}
 
+	onCompleteSliderChange( nextValue ) {
+		const { decimalNum, onComplete } = this.props;
+		nextValue = toFixed( nextValue, decimalNum );
+		if ( onComplete ) {
+			onComplete( nextValue );
+		}
+	}
+
 	/*
 	 * Only used with screenreaders like VoiceOver and TalkBack. Increments the
 	 * value of this setting programmatically.
@@ -138,7 +147,6 @@ class BottomSheetRangeCell extends Component {
 			thumbTintColor = ! isIOS && '#00669b',
 			preview,
 			cellContainerStyle,
-			onComplete,
 			shouldDisplayTextInput = true,
 			unitLabel = '',
 			settingLabel = 'Value',
@@ -225,7 +233,9 @@ class BottomSheetRangeCell extends Component {
 								maximumTrackTintColor={ maximumTrackTintColor }
 								thumbTintColor={ thumbTintColor }
 								onValueChange={ this.onSliderChange }
-								onSlidingComplete={ onComplete }
+								onSlidingComplete={
+									this.onCompleteSliderChange
+								}
 								ref={ ( slider ) => {
 									this.sliderRef = slider;
 								} }

package/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js

@@ -7,7 +7,7 @@ import { Text, TouchableOpacity, View } from 'react-native';
  * WordPress dependencies
  */
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { Icon, minus, plus } from '@wordpress/icons';
+import { Icon, plus, reset } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -46,7 +46,7 @@ function Stepper( {
 				onPressOut={ onPressOut }
 				style={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }
 			>
-				<Icon icon={ minus } size={ 24 } color={ buttonStyle.color } />
+				<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
 				testID={ 'Increment' }

package/src/mobile/color-settings/picker-screen.native.js

@@ -12,7 +12,7 @@ import { BottomSheetContext } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import ColorPicker from '../../color-picker';
+import { ColorPicker } from '../../color-picker';
 
 const PickerScreen = () => {
 	const route = useRoute();

package/src/mobile/dashicons/index.native.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const fromPathData24x24 = ( pathData ) => (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d={ pathData } />
+	</SVG>
+);
+
+export const facebook = fromPathData24x24(
+	'M20 3H4c-.6 0-1 .4-1 1v16c0 .5.4 1 1 1h8.6v-7h-2.3v-2.7h2.3v-2c0-2.3 1.4-3.6 3.5-3.6 1 0 1.8.1 2.1.1v2.4h-1.4c-1.1 0-1.3.5-1.3 1.3v1.7h2.7l-.4 2.8h-2.3v7H20c.5 0 1-.4 1-1V4c0-.6-.4-1-1-1z'
+);
+
+export const instagram = fromPathData24x24(
+	'M12 4.622c2.403 0 2.688.01 3.637.052.877.04 1.354.187 1.67.31.42.163.72.358 1.036.673.315.315.51.615.673 1.035.123.317.27.794.31 1.67.043.95.052 1.235.052 3.638s-.01 2.688-.052 3.637c-.04.877-.187 1.354-.31 1.67-.163.42-.358.72-.673 1.036-.315.315-.615.51-1.035.673-.317.123-.794.27-1.67.31-.95.043-1.234.052-3.638.052s-2.688-.01-3.637-.052c-.877-.04-1.354-.187-1.67-.31-.42-.163-.72-.358-1.036-.673-.315-.315-.51-.615-.673-1.035-.123-.317-.27-.794-.31-1.67-.043-.95-.052-1.235-.052-3.638s.01-2.688.052-3.637c.04-.877.187-1.354.31-1.67.163-.42.358-.72.673-1.036.315-.315.615-.51 1.035-.673.317-.123.794-.27 1.67-.31.95-.043 1.235-.052 3.638-.052M12 3c-2.444 0-2.75.01-3.71.054s-1.613.196-2.185.418c-.592.23-1.094.538-1.594 1.04-.5.5-.807 1-1.037 1.593-.223.572-.375 1.226-.42 2.184C3.01 9.25 3 9.555 3 12s.01 2.75.054 3.71.196 1.613.418 2.186c.23.592.538 1.094 1.038 1.594s1.002.808 1.594 1.038c.572.222 1.227.375 2.185.418.96.044 1.266.054 3.71.054s2.75-.01 3.71-.054 1.613-.196 2.186-.418c.592-.23 1.094-.538 1.594-1.038s.808-1.002 1.038-1.594c.222-.572.375-1.227.418-2.185.044-.96.054-1.266.054-3.71s-.01-2.75-.054-3.71-.196-1.613-.418-2.186c-.23-.592-.538-1.094-1.038-1.594s-1.002-.808-1.594-1.038c-.572-.222-1.227-.375-2.185-.418C14.75 3.01 14.445 3 12 3zm0 4.378c-2.552 0-4.622 2.07-4.622 4.622s2.07 4.622 4.622 4.622 4.622-2.07 4.622-4.622S14.552 7.378 12 7.378zM12 15c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3zm4.804-8.884c-.596 0-1.08.484-1.08 1.08s.484 1.08 1.08 1.08c.596 0 1.08-.484 1.08-1.08s-.483-1.08-1.08-1.08z'
+);
+
+export const empty = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" />
+);

package/src/mobile/global-styles-context/index.native.js

@@ -15,6 +15,7 @@ import {
 	BLOCK_STYLE_ATTRIBUTES,
 	getBlockPaddings,
 	getBlockColors,
+	getBlockTypography,
 } from './utils';
 
 const GlobalStylesContext = createContext( { style: {} } );
@@ -27,7 +28,8 @@ export const getMergedGlobalStyles = (
 	wrapperPropsStyle,
 	blockAttributes,
 	defaultColors,
-	blockName
+	blockName,
+	fontSizes
 ) => {
 	const baseGlobalColors = {
 		baseColors: baseGlobalStyles || {},
@@ -60,8 +62,19 @@ export const getMergedGlobalStyles = (
 		blockStyleAttributes,
 		blockColors
 	);
+	const blockTypography = getBlockTypography(
+		blockStyleAttributes,
+		fontSizes,
+		blockName,
+		baseGlobalStyles
+	);
 
-	return { ...mergedStyle, ...blockPaddings, ...blockColors };
+	return {
+		...mergedStyle,
+		...blockPaddings,
+		...blockColors,
+		...blockTypography,
+	};
 };
 
 export const useGlobalStyles = () => {

package/src/mobile/global-styles-context/test/fixtures/theme.native.js

@@ -209,16 +209,19 @@ export const RAW_FEATURES = {
 					name: 'Small',
 					slug: 'small',
 					size: '13px',
+					sizePx: '13px',
 				},
 				{
 					name: 'Normal',
 					slug: 'normal',
 					size: '16px',
+					sizePx: '16px',
 				},
 				{
 					name: 'Huge',
 					slug: 'huge',
 					size: '42px',
+					sizePx: '42px',
 				},
 			],
 			theme: [
@@ -226,15 +229,18 @@ export const RAW_FEATURES = {
 					name: 'Normal',
 					slug: 'normal',
 					size: '18px',
+					sizePx: '18px',
 				},
 				{
 					slug: 'extra-large',
 					size: '40px',
+					sizePx: '40px',
 					name: 'Extra large',
 				},
 				{
 					slug: 'gigantic',
 					size: '144px',
+					sizePx: '144px',
 					name: 'Gigantic',
 				},
 			],

package/src/mobile/global-styles-context/test/utils.native.js

@@ -131,6 +131,8 @@ describe( 'getGlobalStyles', () => {
 					color: {
 						palette: RAW_FEATURES.color.palette,
 						gradients,
+						text: true,
+						background: true,
 					},
 					typography: {
 						fontSizes: RAW_FEATURES.typography.fontSizes,

package/src/mobile/global-styles-context/utils.native.js

@@ -1,13 +1,20 @@
 /**
  * External dependencies
  */
-import { find, startsWith, get } from 'lodash';
+import { find, startsWith, get, camelCase, has } from 'lodash';
+import { Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
 	'backgroundColor',
 	'style',
 	'color',
+	'fontSize',
 ];
 
 // Mapping style properties name to native
@@ -121,6 +128,62 @@ export function getBlockColors(
 	return blockStyles;
 }
 
+export function getBlockTypography(
+	blockStyleAttributes,
+	fontSizes,
+	blockName,
+	baseGlobalStyles
+) {
+	const typographyStyles = {};
+	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+
+	// Global styles
+	if ( blockGlobalStyles?.typography ) {
+		const fontSize = blockGlobalStyles?.typography?.fontSize;
+		const lineHeight = blockGlobalStyles?.typography?.lineHeight;
+
+		if ( fontSize ) {
+			if ( parseInt( fontSize, 10 ) ) {
+				typographyStyles.fontSize = fontSize;
+			} else {
+				const mappedFontSize = find( fontSizes, {
+					slug: fontSize,
+				} );
+
+				if ( mappedFontSize ) {
+					typographyStyles.fontSize = mappedFontSize?.size;
+				}
+			}
+		}
+
+		if ( lineHeight ) {
+			typographyStyles.lineHeight = lineHeight;
+		}
+	}
+
+	if ( blockStyleAttributes?.fontSize ) {
+		const mappedFontSize = find( fontSizes, {
+			slug: blockStyleAttributes?.fontSize,
+		} );
+
+		if ( mappedFontSize ) {
+			typographyStyles.fontSize = mappedFontSize?.size;
+		}
+	}
+
+	// Custom styles
+	if ( customBlockStyles?.fontSize ) {
+		typographyStyles.fontSize = customBlockStyles?.fontSize;
+	}
+
+	if ( customBlockStyles?.lineHeight ) {
+		typographyStyles.lineHeight = customBlockStyles?.lineHeight;
+	}
+
+	return typographyStyles;
+}
+
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
 	const variables = [ 'preset', 'custom' ];
@@ -152,7 +215,15 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 			const customValuesData = customValues ?? JSON.parse( stylesBase );
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
 				const path = $2.split( '--' );
-				return get( customValuesData, path );
+				if ( has( customValuesData, path ) ) {
+					return get( customValuesData, path );
+				}
+
+				// Check for camelcase properties
+				return get( customValuesData, [
+					...path.slice( 0, path.length - 1 ),
+					camelCase( path[ path.length - 1 ] ),
+				] );
 			} );
 		}
 	} );
@@ -161,20 +232,60 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 }
 
 export function getMappedValues( features, palette ) {
+	const typography = features?.typography;
 	const colors = { ...palette?.theme, ...palette?.user };
+	const fontSizes = {
+		...typography?.fontSizes?.theme,
+		...typography?.fontSizes?.user,
+	};
 	const mappedValues = {
 		color: {
 			values: colors,
 			slug: 'color',
 		},
 		'font-size': {
-			values: features?.typography?.fontSizes?.theme,
+			values: fontSizes,
 			slug: 'size',
 		},
 	};
 	return mappedValues;
 }
 
+/**
+ * Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
+ *
+ * @param {Object} fontSizes found in global styles.
+ * @return {Object} normalized sizes.
+ */
+function normalizeFontSizes( fontSizes ) {
+	// Adds normalized PX values for each of the different keys
+	if ( ! fontSizes ) {
+		return fontSizes;
+	}
+	const normalizedFontSizes = {};
+	const dimensions = Dimensions.get( 'window' );
+
+	[ 'core', 'theme', 'user' ].forEach( ( key ) => {
+		if ( fontSizes[ key ] ) {
+			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
+				( fontSizeObject ) => {
+					fontSizeObject.sizePx = getPxFromCssUnit(
+						fontSizeObject.size,
+						{
+							width: dimensions.width,
+							height: dimensions.height,
+							fontSize: 16,
+						}
+					);
+					return fontSizeObject;
+				}
+			);
+		}
+	} );
+
+	return normalizedFontSizes;
+}
+
 export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
 	const mappedValues = getMappedValues( features, features?.color?.palette );
@@ -196,6 +307,8 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 		customValues
 	);
 
+	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
+
 	return {
 		colors,
 		gradients,
@@ -203,9 +316,11 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 			color: {
 				palette: colors?.palette,
 				gradients,
+				text: features?.color?.text ?? true,
+				background: features?.color?.background ?? true,
 			},
 			typography: {
-				fontSizes: features?.typography?.fontSizes,
+				fontSizes,
 				customLineHeight: features?.custom?.[ 'line-height' ],
 			},
 		},

package/src/mobile/html-text-input/index.native.js

@@ -73,15 +73,22 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme } = this.props;
-		const htmlStyle = getStylesFromColorScheme(
-			styles.htmlView,
-			styles.htmlViewDark
-		);
-		const placeholderStyle = getStylesFromColorScheme(
-			styles.placeholder,
-			styles.placeholderDark
-		);
+		const { getStylesFromColorScheme, style } = this.props;
+		const titleStyle = [
+			styles.htmlViewTitle,
+			style?.text && { color: style.text },
+		];
+		const htmlStyle = [
+			getStylesFromColorScheme( styles.htmlView, styles.htmlViewDark ),
+			style?.text && { color: style.text },
+		];
+		const placeholderStyle = {
+			...getStylesFromColorScheme(
+				styles.placeholder,
+				styles.placeholderDark
+			),
+			...( style?.text && { color: style.text } ),
+		};
 		return (
 			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
 				<TextInput
@@ -89,7 +96,7 @@ export class HTMLTextInput extends Component {
 					accessibilityLabel="html-view-title"
 					textAlignVertical="center"
 					numberOfLines={ 1 }
-					style={ styles.htmlViewTitle }
+					style={ titleStyle }
 					value={ this.props.title }
 					placeholder={ __( 'Add title' ) }
 					placeholderTextColor={ placeholderStyle.color }

package/src/mobile/inserter-button/index.native.js

@@ -11,6 +11,7 @@ import { Icon } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { sparkles } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -41,10 +42,7 @@ class MenuItem extends Component {
 			styles.modalIconWrapper,
 			styles.modalIconWrapperDark
 		);
-		const modalIconStyle = getStylesFromColorScheme(
-			styles.modalIcon,
-			styles.modalIconDark
-		);
+		const modalIconStyle = styles.modalIcon;
 		const modalItemLabelStyle = getStylesFromColorScheme(
 			styles.modalItemLabel,
 			styles.modalItemLabelDark
@@ -98,9 +96,8 @@ class MenuItem extends Component {
 							/>
 						) }
 						<View style={ modalIconStyle }>
-							<Icon
-								icon={ item.icon.src || item.icon }
-								fill={ modalIconStyle.fill }
+							<BlockIcon
+								icon={ item.icon }
 								size={ modalIconStyle.width }
 							/>
 						</View>

package/src/mobile/inserter-button/style.native.scss

@@ -33,11 +33,6 @@
 	height: 32px;
 	justify-content: center;
 	align-items: center;
-	fill: $gray-dark;
-}
-
-.modalIconDark {
-	fill: $white;
 }
 
 .modalItemLabel {

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { blockSettingsScreens } from '@wordpress/block-editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import PanelBody from '../../panel/body';
+import BottomSheet from '../bottom-sheet';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } =
+		route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

package/src/mobile/link-settings/index.native.js

@@ -86,9 +86,9 @@ function LinkSettings( {
 	urlValue,
 	// Attributes properties
 	url,
-	label,
+	label = '',
 	linkTarget,
-	rel,
+	rel = '',
 } ) {
 	const [ urlInputValue, setUrlInputValue ] = useState( '' );
 	const [ labelInputValue, setLabelInputValue ] = useState( '' );
@@ -226,6 +226,7 @@ function LinkSettings( {
 						<BottomSheet.LinkCell
 							showIcon={ showIcon }
 							value={ url }
+							valueMask={ options.url.valueMask }
 							onPress={ onLinkCellPressed }
 						/>
 					) : (