From 586099323cf2ad5dc89bf22b85266fe6ffee9f48 Mon Sep 17 00:00:00 2001
From: Sunil Prajapati <61308756+sunil25393@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:13:27 +0530
Subject: [PATCH] Fix Navigation link control overlapping issue (#59065)

* Fix nagivation link control overlapping issue

* Addressed feedback

* use variable insted fixed number in spacing
---
 .../src/components/link-control/link-preview.js       | 11 +++++++++--
 .../src/components/link-control/style.scss            |  9 +++++++++
 2 files changed, 18 insertions(+), 2 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
index 88a19cc4c7af4..d922187ec3aa0 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -16,8 +16,9 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -139,7 +146,7 @@ export default function LinkPreview( {
 					label={ sprintf(
 						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
 						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL ? '' : ': ' + value.url
+						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
 					disabled={ isEmptyURL }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 425df96ab31fa..9531ad6f0c7a0 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -34,6 +34,15 @@ $block-editor-link-control-number-of-actions: 1;
 				content: attr(aria-label);
 			}
 		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-10;
+
+			.components-button.has-icon {
+				min-width: inherit;
+				width: min-content;
+			}
+		}
 	}
 }