Add Media File and Attachment Page options to the native Image block Link To menu

packages/block-editor/src/components/block-list/index.native.js

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
-import BlockListItem from './block-list-item.native';
+import BlockListItem from './block-list-item';
 import { store as blockEditorStore } from '../../store';
 
 const BlockListContext = createContext();

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

@@ -6,6 +6,7 @@ import {
 	BottomSheet,
 	ColorSettings,
 	FocalPointSettingsPanel,
+	ImageLinkDestinationsScreen,
 	LinkPickerScreen,
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
@@ -21,6 +22,7 @@ export const blockSettingsScreens = {
 	color: 'Color',
 	focalPoint: 'FocalPoint',
 	linkPicker: 'linkPicker',
+	imageLinkDestinations: 'imageLinkDestinations',
 };
 
 function BottomSheetSettings( {
@@ -75,6 +77,11 @@ function BottomSheetSettings( {
 						returnScreenName={ blockSettingsScreens.settings }
 					/>
 				</BottomSheet.NavigationScreen>
+				<BottomSheet.NavigationScreen
+					name={ blockSettingsScreens.imageLinkDestinations }
+				>
+					<ImageLinkDestinationsScreen { ...props } />
+				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>
 		</BottomSheet>
 	);

packages/block-editor/src/components/block-styles/preview.native.js

@@ -67,11 +67,11 @@ function StylePreview( { onPress, isActive, style, url } ) {
 	);
 
 	const getOutline = ( outlineStyles ) =>
-		outlineStyles.map( ( outlineStyle ) => {
+		outlineStyles.map( ( outlineStyle, index ) => {
 			return (
 				<Animated.View
 					style={ [ outlineStyle, { opacity }, styles[ name ] ] }
-					key={ JSON.stringify( outlineStyle ) }
+					key={ index }
 				/>
 			);
 		} );

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

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { View, TouchableWithoutFeedback } from 'react-native';
+import { useRoute } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, useEffect } from '@wordpress/element';
 import {
 	requestMediaImport,
 	mediaUploadSync,
@@ -41,6 +42,7 @@ import {
 	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
+	blockSettingsScreens,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg } from '@wordpress/url';
@@ -63,6 +65,7 @@ import styles from './styles.scss';
 import { getUpdatedLinkTargetSettings } from './utils';
 
 import {
+	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_CUSTOM,
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
@@ -76,6 +79,101 @@ const getUrlForSlug = ( image, sizeSlug ) => {
 	return image?.media_details?.sizes?.[ sizeSlug ]?.source_url;
 };
 
+function LinkSettings( {
+	attributes,
+	image,
+	isLinkSheetVisible,
+	setMappedAttributes,
+} ) {
+	const route = useRoute();
+	const { href: url, label, linkDestination, linkTarget, rel } = attributes;
+
+	// Persist attributes passed from child screen
+	useEffect( () => {
+		const { inputValue: newUrl } = route.params || {};
+
+		let newLinkDestination;
+		switch ( newUrl ) {
+			case attributes.url:
+				newLinkDestination = LINK_DESTINATION_MEDIA;
+				break;
+			case image?.link:
+				newLinkDestination = LINK_DESTINATION_ATTACHMENT;
+				break;
+			case '':
+				newLinkDestination = LINK_DESTINATION_NONE;
+				break;
+			default:
+				newLinkDestination = LINK_DESTINATION_CUSTOM;
+				break;
+		}
+
+		setMappedAttributes( {
+			url: newUrl,
+			linkDestination: newLinkDestination,
+		} );
+	}, [ route.params?.inputValue ] );
+
+	let valueMask;
+	switch ( linkDestination ) {
+		case LINK_DESTINATION_MEDIA:
+			valueMask = __( 'Media File' );
+			break;
+		case LINK_DESTINATION_ATTACHMENT:
+			valueMask = __( 'Attachment Page' );
+			break;
+		case LINK_DESTINATION_CUSTOM:
+			valueMask = __( 'Custom URL' );
+			break;
+		default:
+			valueMask = __( 'None' );
+			break;
+	}
+
+	const linkSettingsOptions = {
+		url: {
+			valueMask,
+			autoFocus: false,
+			autoFill: true,
+		},
+		openInNewTab: {
+			label: __( 'Open in new tab' ),
+		},
+		linkRel: {
+			label: __( 'Link Rel' ),
+			placeholder: _x( 'None', 'Link rel attribute value placeholder' ),
+		},
+	};
+
+	return (
+		<PanelBody title={ __( 'Link Settings' ) }>
+			<LinkSettingsNavigation
+				isVisible={ isLinkSheetVisible }
+				url={ url }
+				rel={ rel }
+				label={ label }
+				linkTarget={ linkTarget }
+				setAttributes={ setMappedAttributes }
+				withBottomSheet={ false }
+				hasPicker
+				options={ linkSettingsOptions }
+				showIcon={ false }
+				onLinkCellPressed={ ( { navigation } ) => {
+					navigation.navigate(
+						blockSettingsScreens.imageLinkDestinations,
+						{
+							inputValue: attributes.href,
+							linkDestination: attributes.linkDestination,
+							imageUrl: attributes.url,
+							attachmentPageUrl: image?.link,
+						}
+					);
+				} }
+			/>
+		</PanelBody>
+	);
+}
+
 export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
@@ -96,7 +194,6 @@ export class ImageEdit extends Component {
 		);
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
-		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
 		this.onSetSizeSlug = this.onSetSizeSlug.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
@@ -108,25 +205,6 @@ export class ImageEdit extends Component {
 		);
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
 		this.onSizeChangeValue = this.onSizeChangeValue.bind( this );
-
-		this.linkSettingsOptions = {
-			url: {
-				label: __( 'Image Link URL' ),
-				placeholder: __( 'Add URL' ),
-				autoFocus: false,
-				autoFill: true,
-			},
-			openInNewTab: {
-				label: __( 'Open in new tab' ),
-			},
-			linkRel: {
-				label: __( 'Link Rel' ),
-				placeholder: _x(
-					'None',
-					'Link rel attribute value placeholder'
-				),
-			},
-		};
 	}
 
 	componentDidMount() {
@@ -282,13 +360,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	onSetLinkDestination( href ) {
-		this.props.setAttributes( {
-			linkDestination: LINK_DESTINATION_CUSTOM,
-			href,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -383,45 +454,23 @@ export class ImageEdit extends Component {
 			: width;
 	}
 
-	setMappedAttributes( { url: href, ...restAttributes } ) {
+	setMappedAttributes( { url: href, linkDestination, ...restAttributes } ) {
 		const { setAttributes } = this.props;
+		if ( ! href && ! linkDestination ) {
+			linkDestination = LINK_DESTINATION_NONE;
+		} else if ( ! linkDestination ) {
+			linkDestination = LINK_DESTINATION_CUSTOM;
+		}
 
-		return href === undefined
-			? setAttributes( {
-					...restAttributes,
-					linkDestination: LINK_DESTINATION_CUSTOM,
-			  } )
+		return href === undefined || href === this.props.attributes.href
+			? setAttributes( restAttributes )
 			: setAttributes( {
 					...restAttributes,
+					linkDestination,
 					href,
-					linkDestination: LINK_DESTINATION_CUSTOM,
 			  } );
 	}
 
-	getLinkSettings() {
-		const { isLinkSheetVisible } = this.state;
-		const {
-			attributes: { href: url, ...unMappedAttributes },
-		} = this.props;
-		const mappedAttributes = { ...unMappedAttributes, url };
-
-		return (
-			<LinkSettingsNavigation
-				isVisible={ isLinkSheetVisible }
-				url={ mappedAttributes.url }
-				rel={ mappedAttributes.rel }
-				label={ mappedAttributes.label }
-				linkTarget={ mappedAttributes.linkTarget }
-				onClose={ this.dismissSheet }
-				setAttributes={ this.setMappedAttributes }
-				withBottomSheet={ false }
-				hasPicker
-				options={ this.linkSettingsOptions }
-				showIcon={ false }
-			/>
-		);
-	}
-
 	getAltTextSettings() {
 		const {
 			attributes: { alt },
@@ -583,9 +632,12 @@ export class ImageEdit extends Component {
 					) }
 					{ this.getAltTextSettings() }
 				</PanelBody>
-				<PanelBody title={ __( 'Link Settings' ) }>
-					{ this.getLinkSettings( true ) }
-				</PanelBody>
+				<LinkSettings
+					attributes={ this.props.attributes }
+					image={ this.props.image }
+					isLinkSheetVisible={ this.state.isLinkSheetVisible }
+					setMappedAttributes={ this.setMappedAttributes }
+				/>
 				<PanelBody
 					title={ __( 'Featured Image' ) }
 					titleStyle={ styles.featuredImagePanelTitle }