diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js index fb4b3658e2a4f..d06c9971c680b 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -27,6 +27,20 @@ import { ViewerSlot } from './viewer-slot'; import useRichUrlData from './use-rich-url-data'; +/** + * Filters the title for display. Removes the protocol and www prefix. + * + * @param {string} title The title to be filtered. + * + * @return {string} The filtered title. + */ +function filterTitleForDisplay( title ) { + // Derived from `filterURLForDisplay` in `@wordpress/url`. + return title + .replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' ) + .replace( /^www\./i, '' ); +} + export default function LinkPreview( { value, onEditClick, @@ -59,6 +73,9 @@ export default function LinkPreview( { ! isEmptyURL && stripHTML( richData?.title || value?.title || displayURL ); + const isUrlRedundant = + ! value?.url || filterTitleForDisplay( displayTitle ) === displayURL; + let icon; if ( richData?.icon ) { @@ -112,7 +129,7 @@ export default function LinkPreview( { { displayTitle } - { value?.url && displayTitle !== displayURL && ( + { ! isUrlRedundant && ( { displayURL } diff --git a/packages/url/src/filter-url-for-display.js b/packages/url/src/filter-url-for-display.js index eede264e8e801..436070b667a3e 100644 --- a/packages/url/src/filter-url-for-display.js +++ b/packages/url/src/filter-url-for-display.js @@ -13,8 +13,14 @@ * @return {string} Displayed URL. */ export function filterURLForDisplay( url, maxLength = null ) { + if ( ! url ) { + return ''; + } + // Remove protocol and www prefixes. - let filteredURL = url.replace( /^(?:https?:)\/\/(?:www\.)?/, '' ); + let filteredURL = url + .replace( /^[a-z\-.\+]+[0-9]*:(\/\/)?/i, '' ) + .replace( /^www\./i, '' ); // Ends with / and only has that single slash, strip it. if ( filteredURL.match( /^[^\/]+\/$/ ) ) { diff --git a/packages/url/src/test/index.js b/packages/url/src/test/index.js index 0051b9b89fc73..bd48105baed96 100644 --- a/packages/url/src/test/index.js +++ b/packages/url/src/test/index.js @@ -992,11 +992,23 @@ describe( 'safeDecodeURI', () => { } ); describe( 'filterURLForDisplay', () => { + it( 'should return an empty string if the url is empty or falsy', () => { + let url = filterURLForDisplay( '' ); + expect( url ).toBe( '' ); + url = filterURLForDisplay( null ); + expect( url ).toBe( '' ); + } ); it( 'should remove protocol', () => { let url = filterURLForDisplay( 'http://wordpress.org' ); expect( url ).toBe( 'wordpress.org' ); url = filterURLForDisplay( 'https://wordpress.org' ); expect( url ).toBe( 'wordpress.org' ); + url = filterURLForDisplay( 'file:///folder/file.txt' ); + expect( url ).toBe( '/folder/file.txt' ); + url = filterURLForDisplay( 'tel:0123456789' ); + expect( url ).toBe( '0123456789' ); + url = filterURLForDisplay( 'blob:data' ); + expect( url ).toBe( 'data' ); } ); it( 'should remove www subdomain', () => { const url = filterURLForDisplay( 'http://www.wordpress.org' );