diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index e48e0bb401544..263bd1d2d263f 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -20,11 +20,11 @@ import {
Icon,
PanelBody,
TextControl,
- ToggleControl,
ToolbarButton,
ToolbarGroup,
Image,
WIDE_ALIGNMENTS,
+ LinkSettingsNavigation,
} from '@wordpress/components';
import {
BlockCaption,
@@ -43,8 +43,6 @@ import { doAction, hasAction } from '@wordpress/hooks';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
import {
- external,
- link,
image as placeholderIcon,
textColor,
replace,
@@ -338,6 +336,49 @@ export class ImageEdit extends React.Component {
: width;
}
+ getLinkSettings() {
+ const { isLinkSheetVisible } = this.state;
+ const {
+ attributes: { href: url, ...unMappedAttributes },
+ setAttributes,
+ } = this.props;
+
+ const mappedAttributes = { ...unMappedAttributes, url };
+ const setMappedAttributes = ( { url: href, ...restAttributes } ) =>
+ href === undefined
+ ? setAttributes( restAttributes )
+ : setAttributes( { ...restAttributes, href } );
+
+ const options = {
+ url: {
+ label: __( 'Image Link URL' ),
+ placeholder: __( 'Add URL' ),
+ autoFocus: false,
+ autoFill: true,
+ },
+ openInNewTab: {
+ label: __( 'Open in new tab' ),
+ },
+ linkRel: {
+ label: __( 'Link Rel' ),
+ placeholder: __( 'None' ),
+ },
+ };
+
+ return (
+
+ );
+ }
+
render() {
const { isCaptionSelected } = this.state;
const {
@@ -347,16 +388,7 @@ export class ImageEdit extends React.Component {
imageSizes,
clientId,
} = this.props;
- const {
- align,
- url,
- alt,
- href,
- id,
- linkTarget,
- sizeSlug,
- className,
- } = attributes;
+ const { align, url, alt, id, sizeSlug, className } = attributes;
const sizeOptions = map( imageSizes, ( { name, slug } ) => ( {
value: slug,
@@ -392,22 +424,6 @@ export class ImageEdit extends React.Component {
) }
-
-
{ image && sizeOptionsValid && (
+
+ { this.getLinkSettings( true ) }
+
);
diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
index ddd7b9e4ce58a..4d5b2a496a299 100644
--- a/packages/components/src/mobile/link-settings/index.native.js
+++ b/packages/components/src/mobile/link-settings/index.native.js
@@ -224,26 +224,30 @@ function LinkSettings( {
onChange={ onChangeLabel }
/>
) }
- { options.openInNewTab && (
-
- ) }
- { options.linkRel && (
-
+ { !! urlInputValue && (
+ <>
+ { options.openInNewTab && (
+
+ ) }
+ { options.linkRel && (
+
+ ) }
+ >
) }
>
);
diff --git a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
index b69d347e065c1..b4bba800d69fe 100644
--- a/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
+++ b/packages/format-library/src/link/modal-screens/link-settings-screen.native.js
@@ -137,6 +137,8 @@ const LinkSettingsScreen = ( {
}, [ navigation, route.params?.text, text ] );
return useMemo( () => {
+ const shouldShowLinkOptions = !! inputValue;
+
return (
<>
-
-
+ { shouldShowLinkOptions && (
+ <>
+
+
+ >
+ ) }
>
);
}, [ inputValue, text, opensInNewWindow, listProps.safeAreaBottomInset ] );