Remove duplicated display URL in LinkControl (#53167)

* Remove duplicated display URL in LinkControl * update block-editor-link-control__search-item-title line-height * update styles
WordPress · Aug 2, 2023 · b340afd · b340afd
1 parent 5898968
commit b340afd
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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 }
 								</ExternalLink>
 
-								{ value?.url && (
+								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
 										{ displayURL }
 									</span>

diff --git 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 {