LinkControl: refined the display of the link preview title and url when both are same

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

@@ -13,7 +13,11 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { useCopyToClipboard } from '@wordpress/compose';
-import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
+import {
+	filterURLForDisplay,
+	safeDecodeURI,
+	stripDomainPrefixes,
+} from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -59,6 +63,9 @@ export default function LinkPreview( {
 		! isEmptyURL &&
 		stripHTML( richData?.title || value?.title || displayURL );
 
+	const isTitleRedundant =
+		value?.url && stripDomainPrefixes( displayTitle ) === displayURL;
+
 	let icon;
 
 	if ( richData?.icon ) {
@@ -112,7 +119,7 @@ export default function LinkPreview( {
 										{ displayTitle }
 									</Truncate>
 								</ExternalLink>
-								{ value?.url && displayTitle !== displayURL && (
+								{ ! isTitleRedundant && (
 									<span className="block-editor-link-control__search-item-info">
 										<Truncate numberOfLines={ 1 }>
 											{ displayURL }

packages/url/README.md

@@ -543,6 +543,18 @@ _Returns_
 
 -   `string`: Decoded URI component if possible.
 
+### stripDomainPrefixes
+
+Removes domain prefixes from a URL.
+
+_Parameters_
+
+-   _url_ `string`: The URL to strip domain prefixes from.
+
+_Returns_
+
+-   `string`: The URL without domain prefixes.
+
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ## Contributing to this package

packages/url/src/filter-url-for-display.js

@@ -14,7 +14,7 @@
  */
 export function filterURLForDisplay( url, maxLength = null ) {
 	// Remove protocol and www prefixes.
-	let filteredURL = url.replace( /^(?:https?:)\/\/(?:www\.)?/, '' );
+	let filteredURL = stripDomainPrefixes( url );
 
 	// Ends with / and only has that single slash, strip it.
 	if ( filteredURL.match( /^[^\/]+\/$/ ) ) {
@@ -53,3 +53,19 @@ export function filterURLForDisplay( url, maxLength = null ) {
 		truncatedFile
 	);
 }
+
+/**
+ * Removes domain prefixes from a URL.
+ *
+ * @param {string} url The URL to strip domain prefixes from.
+ *
+ * @return {string} The URL without domain prefixes.
+ */
+export function stripDomainPrefixes( url ) {
+	if ( ! url ) {
+		return '';
+	}
+	return url
+		.replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' )
+		.replace( /^www\./i, '' );
+}

packages/url/src/index.js

@@ -25,3 +25,4 @@ export { cleanForSlug } from './clean-for-slug';
 export { getFilename } from './get-filename';
 export { normalizePath } from './normalize-path';
 export { prependHTTPS } from './prepend-https';
+export { stripDomainPrefixes } from './filter-url-for-display';

packages/url/src/test/index.js

@@ -27,6 +27,7 @@ import {
 	prependHTTPS,
 	removeQueryArgs,
 	safeDecodeURI,
+	stripDomainPrefixes,
 } from '../';
 import wptData from './fixtures/wpt-data';
 
@@ -127,6 +128,68 @@ describe( 'isValidProtocol', () => {
 	} );
 } );
 
+describe( 'stripDomainPrefixes', () => {
+	it( 'should remove the protocol (http, https, file, tel, etc.) from the URL', () => {
+		expect( stripDomainPrefixes( 'http://wordpress.org' ) ).toBe(
+			'wordpress.org'
+		);
+		expect( stripDomainPrefixes( 'https://wordpress.org' ) ).toBe(
+			'wordpress.org'
+		);
+		expect( stripDomainPrefixes( 'https://localhost:8080' ) ).toBe(
+			'localhost:8080'
+		);
+		expect( stripDomainPrefixes( 'file:///folder/file.txt' ) ).toBe(
+			'/folder/file.txt'
+		);
+		expect( stripDomainPrefixes( 'ftp://wordpress.org' ) ).toBe(
+			'wordpress.org'
+		);
+		expect( stripDomainPrefixes( 'tel:0123456789' ) ).toBe( '0123456789' );
+		expect( stripDomainPrefixes( 'blob:data' ) ).toBe( 'data' );
+	} );
+
+	it( 'should remove both the protocol and www prefix if both are present', () => {
+		expect( stripDomainPrefixes( 'http://www.google.com' ) ).toBe(
+			'google.com'
+		);
+		expect( stripDomainPrefixes( 'https://www.google.com' ) ).toBe(
+			'google.com'
+		);
+		expect( stripDomainPrefixes( 'ftp://www.google.com' ) ).toBe(
+			'google.com'
+		);
+	} );
+
+	it( 'should handle URLs without a protocol', () => {
+		expect( stripDomainPrefixes( 'www.example.com' ) ).toBe(
+			'example.com'
+		);
+		expect( stripDomainPrefixes( 'example.com' ) ).toBe( 'example.com' );
+		expect( stripDomainPrefixes( 'example.com/path' ) ).toBe(
+			'example.com/path'
+		);
+	} );
+
+	it( 'should handle URLs with both parameters and fragments correctly', () => {
+		expect(
+			stripDomainPrefixes(
+				'https://user:[email protected]:1020/test-path/file.extension#anchor?query=params&more'
+			)
+		).toBe(
+			'user:[email protected]:1020/test-path/file.extension#anchor?query=params&more'
+		);
+		expect( stripDomainPrefixes( 'https://www.example.com#section' ) ).toBe(
+			'example.com#section'
+		);
+		expect(
+			stripDomainPrefixes(
+				'https://www.example.com?param1=value1&param2=value2'
+			)
+		).toBe( 'example.com?param1=value1&param2=value2' );
+	} );
+} );
+
 describe( 'getAuthority', () => {
 	it( 'returns the authority part of a URL', () => {
 		expect(