LinkControl: Use @wordpress/ui Link for preview link

packages/block-editor/src/components/link-control/link-preview.tsx

@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	ExternalLink,
 	__experimentalTruncate as Truncate,
 	__experimentalHStack as HStack,
 	Flex,
@@ -21,7 +20,7 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { Badge } from '@wordpress/ui';
+import { Badge, Link } from '@wordpress/ui';
 import { ViewerSlot } from './viewer-slot';
 import useRichUrlData from './use-rich-url-data';
 import type { LinkPreviewProps } from './types';
@@ -132,14 +131,20 @@ export default function LinkPreview( {
 					>
 						{ ! isEmptyURL ? (
 							<>
-								<ExternalLink
+								<Link
 									className="block-editor-link-control__preview-title"
 									href={ value.url! }
+									openInNewTab
+									onClick={ ( event ) => {
+										if ( value.url?.startsWith( '#' ) ) {
+											event.preventDefault();
+										}
+									} }
 								>
 									<Truncate numberOfLines={ 1 }>
 										{ displayTitle }
 									</Truncate>
-								</ExternalLink>
+								</Link>
 								<span className="block-editor-link-control__preview-info">
 									<Truncate numberOfLines={ 1 }>
 										{ displayURL }

packages/block-editor/src/components/link-control/style.scss

@@ -215,6 +215,8 @@ $block-editor-link-control-number-of-actions: 1;
 	}
 
 	.block-editor-link-control__preview-title {
+		display: flex;
+		align-items: baseline;
 		line-height: var(--wpds-typography-line-height-sm);
 
 		mark {
@@ -226,17 +228,6 @@ $block-editor-link-control-number-of-actions: 1;
 		span {
 			font-weight: 400;
 		}
-
-		.components-external-link__icon {
-			position: absolute;
-			width: 1px;
-			height: 1px;
-			padding: 0;
-			margin: -1px;
-			overflow: hidden;
-			clip-path: inset(50%);
-			border: 0;
-		}
 	}
 }
 

test/e2e/specs/editor/various/pattern-overrides.spec.js

@@ -796,7 +796,7 @@ test.describe( 'Pattern Overrides', () => {
 		await button.focus();
 		await pageUtils.pressKeys( 'primary+k' );
 		await expect(
-			page.getByRole( 'link', { name: 'wp.org' } ).getByText( '↗' )
+			page.getByRole( 'link', { name: 'wp.org' } ).getByRole( 'img' )
 		).toHaveAttribute( 'aria-label', '(opens in a new tab)' );
 
 		// The link popup doesn't have a role which is a bit unfortunate.

tools/eslint/suppressions.json

@@ -1806,7 +1806,7 @@
 	},
 	"packages/block-editor/src/components/link-control/link-preview.tsx": {
 		"@wordpress/use-recommended-components": {
-			"count": 3
+			"count": 2
 		}
 	},
 	"packages/block-editor/src/components/link-control/settings.tsx": {