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 ] );