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 71e3cd464ada14..1cf5c4a7b17115 100644 --- a/packages/block-editor/src/components/link-control/link-preview.js +++ b/packages/block-editor/src/components/link-control/link-preview.js @@ -42,11 +42,13 @@ export default function LinkPreview( { ( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) || ''; - const displayTitle = richData?.title || value?.title || displayURL; - // url can be undefined if the href attribute is unset const isEmptyURL = ! value?.url?.length; + const displayTitle = + ! isEmptyURL && + stripHTML( richData?.title || value?.title || displayURL ); + let icon; if ( richData?.icon ) { @@ -87,10 +89,10 @@ export default function LinkPreview( { className="block-editor-link-control__search-item-title" href={ value.url } > - { stripHTML( displayTitle ) } + { displayTitle } - { value?.url && ( + { value?.url && displayTitle !== displayURL && ( { displayURL } diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 8c398cb4fcdb07..5fd24e5e810d6d 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -215,9 +215,9 @@ $preview-image-height: 140px; .block-editor-link-control__search-item-title { display: block; - margin-bottom: 0.2em; font-weight: 500; position: relative; + line-height: $grid-unit-30; mark { font-weight: 600; @@ -291,6 +291,7 @@ $preview-image-height: 140px; display: flex; flex-direction: row; width: 100%; // clip. + align-items: center; } .block-editor-link-control__search-item-bottom {