From 026179d9aab86fee74e36c6f6c1053d076387060 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 11 Jan 2024 13:47:37 -0500
Subject: [PATCH 1/8] Add offset to LinkControl Popover

---
 packages/format-library/src/link/inline.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 58da13eb51ab6b..0486bb36f97781 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -257,6 +257,7 @@ function InlineLinkUI( {
 			onClose={ stopAddingLink }
 			onFocusOutside={ () => stopAddingLink( false ) }
 			placement="bottom"
+			offset={ 8 }
 			shift
 		>
 			<LinkControl

From a367b5e47a307c98c7628c5426efd4f92175ade7 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 11 Jan 2024 13:48:03 -0500
Subject: [PATCH 2/8] Remove additionalControls from preview

---
 .../src/components/link-control/index.js      | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index a208fa20d242ff..824bf4aaced465 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -427,25 +427,6 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
-					additionalControls={ () => {
-						// Expose the "Opens in new tab" settings in the preview
-						// as it is the most common setting to change.
-						if (
-							settings?.find(
-								( setting ) => setting.id === 'opensInNewTab'
-							)
-						) {
-							return (
-								<LinkSettings
-									value={ internalControlValue }
-									settings={ settings?.filter(
-										( { id } ) => id === 'opensInNewTab'
-									) }
-									onChange={ onChange }
-								/>
-							);
-						}
-					} }
 					onRemove={ () => {
 						onRemove();
 						setIsEditingLink( true );

From 41cd291d6856841879502dfafbeaca54fffd34db Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 11 Jan 2024 13:55:43 -0500
Subject: [PATCH 3/8] Simplify preview

---
 .../components/link-control/link-preview.js   |  65 ++---------
 .../src/components/link-control/style.scss    | 105 +++++-------------
 2 files changed, 38 insertions(+), 132 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 04a67d44789948..5a5a30969d013c 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	Button,
 	ExternalLink,
-	__experimentalText as Text,
+	__experimentalTruncate as Truncate,
 	Tooltip,
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
@@ -41,7 +41,7 @@ export default function LinkPreview( {
 	const hasRichData = richData && Object.keys( richData ).length;
 
 	const displayURL =
-		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
+		( value && filterURLForDisplay( safeDecodeURI( value.url ), 24 ) ) ||
 		'';
 
 	// url can be undefined if the href attribute is unset
@@ -88,21 +88,21 @@ export default function LinkPreview( {
 					<span className="block-editor-link-control__search-item-details">
 						{ ! isEmptyURL ? (
 							<>
-								<Tooltip
-									text={ value.url }
-									placement="bottom-start"
-								>
+								<Tooltip text={ value.url }>
 									<ExternalLink
 										className="block-editor-link-control__search-item-title"
 										href={ value.url }
 									>
-										{ displayTitle }
+										<Truncate numberOfLines={ 1 }>
+											{ displayTitle }
+										</Truncate>
 									</ExternalLink>
 								</Tooltip>
-
 								{ value?.url && displayTitle !== displayURL && (
 									<span className="block-editor-link-control__search-item-info">
-										{ displayURL }
+										<Truncate numberOfLines={ 1 }>
+											{ displayURL }
+										</Truncate>
 									</span>
 								) }
 							</>
@@ -119,7 +119,7 @@ export default function LinkPreview( {
 					label={ __( 'Edit' ) }
 					className="block-editor-link-control__search-item-action"
 					onClick={ onEditClick }
-					iconSize={ 24 }
+					size="compact"
 				/>
 				{ hasUnlinkControl && (
 					<Button
@@ -127,54 +127,11 @@ export default function LinkPreview( {
 						label={ __( 'Unlink' ) }
 						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
 						onClick={ onRemove }
-						iconSize={ 24 }
+						size="compact"
 					/>
 				) }
 				<ViewerSlot fillProps={ value } />
 			</div>
-
-			{ !! (
-				( hasRichData &&
-					( richData?.image || richData?.description ) ) ||
-				isFetching
-			) && (
-				<div className="block-editor-link-control__search-item-bottom">
-					{ ( richData?.image || isFetching ) && (
-						<div
-							aria-hidden={ ! richData?.image }
-							className={ classnames(
-								'block-editor-link-control__search-item-image',
-								{
-									'is-placeholder': ! richData?.image,
-								}
-							) }
-						>
-							{ richData?.image && (
-								<img src={ richData?.image } alt="" />
-							) }
-						</div>
-					) }
-
-					{ ( richData?.description || isFetching ) && (
-						<div
-							aria-hidden={ ! richData?.description }
-							className={ classnames(
-								'block-editor-link-control__search-item-description',
-								{
-									'is-placeholder': ! richData?.description,
-								}
-							) }
-						>
-							{ richData?.description && (
-								<Text truncate numberOfLines="2">
-									{ richData.description }
-								</Text>
-							) }
-						</div>
-					) }
-				</div>
-			) }
-
 			{ additionalControls && additionalControls() }
 		</div>
 	);
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 4821359cab8fc0..acc493776a6972 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -1,5 +1,4 @@
 $block-editor-link-control-number-of-actions: 1;
-$preview-image-height: 140px;
 
 @keyframes loadingpulse {
 	0% {
@@ -183,6 +182,7 @@ $preview-image-height: 140px;
 		flex-direction: row;
 		align-items: flex-start;
 		margin-right: $grid-unit-10;
+		gap: $grid-unit-10;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -191,6 +191,9 @@ $preview-image-height: 140px;
 		overflow-wrap: break-word;
 
 		.block-editor-link-control__search-item-info {
+			color: $gray-700;
+			line-height: 1.1;
+			font-size: $helptext-font-size;
 			word-break: break-all;
 		}
 	}
@@ -209,17 +212,29 @@ $preview-image-height: 140px;
 		word-break: break-all;
 	}
 
+	.block-editor-link-control__search-item-details {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: $grid-unit-05;
+	}
+
+	.block-editor-link-control__search-item-header .block-editor-link-control__search-item-icon {
+		background-color: $gray-100;
+		width: $grid-unit-40;
+		height: $grid-unit-40;
+		border-radius: $radius-block-ui;
+	}
+
 	.block-editor-link-control__search-item-icon {
 		position: relative;
-		margin-right: $grid-unit-10;
-		max-height: 24px;
 		flex-shrink: 0;
-		width: 24px;
 		display: flex;
 		justify-content: center;
+		align-items: center;
 
 		img {
-			width: 16px; // favicons often have a source of 32px
+			width: $grid-unit-20; // favicons often have a source of 32px
 		}
 	}
 
@@ -230,10 +245,13 @@ $preview-image-height: 140px;
 	}
 
 	.block-editor-link-control__search-item-title {
-		display: block;
-		font-weight: 500;
-		position: relative;
-		line-height: $grid-unit-30;
+		border-radius: $radius-block-ui;
+		line-height: 1.1;
+
+		&:focus-visible {
+			@include block-toolbar-button-style__focus();
+			text-decoration: none;
+		}
 
 		mark {
 			font-weight: 600;
@@ -249,58 +267,6 @@ $preview-image-height: 140px;
 			display: none; // specifically requested to be removed visually as well.
 		}
 	}
-
-	.block-editor-link-control__search-item-description {
-		padding-top: 12px;
-		margin: 0;
-
-		&.is-placeholder {
-			margin-top: 12px;
-			padding-top: 0;
-			height: 28px;
-			display: flex;
-			flex-direction: column;
-			justify-content: space-around;
-
-			&::before,
-			&::after {
-				display: block;
-				content: "";
-				height: 0.7em;
-				width: 100%;
-				background-color: $gray-100;
-				border-radius: 3px;
-			}
-		}
-
-		.components-text {
-			font-size: 0.9em;
-		}
-	}
-
-	.block-editor-link-control__search-item-image {
-		display: flex;
-		width: 100%;
-		background-color: $gray-100;
-		justify-content: center;
-		height: $preview-image-height; // limit height
-		max-height: $preview-image-height; // limit height
-		overflow: hidden;
-		border-radius: 2px;
-		margin-top: 12px;
-
-		&.is-placeholder {
-			background-color: $gray-100;
-			border-radius: 3px;
-		}
-
-		img {
-			display: block; // remove unwanted space below image
-			width: 100%;
-			height: 100%;
-			object-fit: contain;
-		}
-	}
 }
 
 .block-editor-link-control__search-item-top {
@@ -310,24 +276,7 @@ $preview-image-height: 140px;
 	align-items: center;
 }
 
-.block-editor-link-control__search-item-bottom {
-	transition: opacity 1.5s;
-	width: 100%;
-}
-
 .block-editor-link-control__search-item.is-fetching {
-	.block-editor-link-control__search-item-description {
-		&::before,
-		&::after {
-			animation: loadingpulse 1s linear infinite;
-			animation-delay: 0.5s; // avoid animating for fast network responses
-		}
-	}
-
-	.block-editor-link-control__search-item-image {
-		animation: loadingpulse 1s linear infinite;
-		animation-delay: 0.5s; // avoid animating for fast network responses
-	}
 
 	.block-editor-link-control__search-item-icon {
 		svg,

From 33491f0ea7a575f8a288b6872c4682dc8be1c4f1 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 11 Jan 2024 14:26:04 -0500
Subject: [PATCH 4/8] Remove unused test

---
 .../src/components/link-control/test/index.js | 60 -------------------
 1 file changed, 60 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 32db57a55d76ed..b8b7e1afa2d805 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -1816,66 +1816,6 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
-	it( 'should allow toggling the "Opens in new tab" setting control (only) on the link preview', async () => {
-		const user = userEvent.setup();
-		const selectedLink = fauxEntitySuggestions[ 0 ];
-		const mockOnChange = jest.fn();
-
-		const customSettings = [
-			{
-				id: 'opensInNewTab',
-				title: 'Open in new tab',
-			},
-			{
-				id: 'noFollow',
-				title: 'No follow',
-			},
-		];
-
-		const LinkControlConsumer = () => {
-			const [ link, setLink ] = useState( selectedLink );
-
-			return (
-				<LinkControl
-					value={ link }
-					settings={ customSettings }
-					onChange={ ( newVal ) => {
-						mockOnChange( newVal );
-						setLink( newVal );
-					} }
-				/>
-			);
-		};
-
-		render( <LinkControlConsumer /> );
-
-		const opensInNewTabField = screen.queryByRole( 'checkbox', {
-			name: 'Open in new tab',
-			checked: false,
-		} );
-
-		expect( opensInNewTabField ).toBeInTheDocument();
-
-		// No matter which settings are passed in only the `Opens in new tab`
-		// setting should be shown on the link preview (non-editing) state.
-		const noFollowField = screen.queryByRole( 'checkbox', {
-			name: 'No follow',
-		} );
-		expect( noFollowField ).not.toBeInTheDocument();
-
-		// Check that the link value is updated immediately upon checking
-		// the checkbox.
-		await user.click( opensInNewTabField );
-
-		expect( opensInNewTabField ).toBeChecked();
-
-		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-		expect( mockOnChange ).toHaveBeenCalledWith( {
-			...selectedLink,
-			opensInNewTab: true,
-		} );
-	} );
-
 	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 

From 416dcabb99da5b53d9206262128df69cc32ff607 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 16 Jan 2024 08:17:53 -0500
Subject: [PATCH 5/8] Revert "Remove unused test"

This reverts commit 33491f0ea7a575f8a288b6872c4682dc8be1c4f1.
---
 .../src/components/link-control/test/index.js | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index b8b7e1afa2d805..32db57a55d76ed 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -1816,6 +1816,66 @@ describe( 'Selecting links', () => {
 } );
 
 describe( 'Addition Settings UI', () => {
+	it( 'should allow toggling the "Opens in new tab" setting control (only) on the link preview', async () => {
+		const user = userEvent.setup();
+		const selectedLink = fauxEntitySuggestions[ 0 ];
+		const mockOnChange = jest.fn();
+
+		const customSettings = [
+			{
+				id: 'opensInNewTab',
+				title: 'Open in new tab',
+			},
+			{
+				id: 'noFollow',
+				title: 'No follow',
+			},
+		];
+
+		const LinkControlConsumer = () => {
+			const [ link, setLink ] = useState( selectedLink );
+
+			return (
+				<LinkControl
+					value={ link }
+					settings={ customSettings }
+					onChange={ ( newVal ) => {
+						mockOnChange( newVal );
+						setLink( newVal );
+					} }
+				/>
+			);
+		};
+
+		render( <LinkControlConsumer /> );
+
+		const opensInNewTabField = screen.queryByRole( 'checkbox', {
+			name: 'Open in new tab',
+			checked: false,
+		} );
+
+		expect( opensInNewTabField ).toBeInTheDocument();
+
+		// No matter which settings are passed in only the `Opens in new tab`
+		// setting should be shown on the link preview (non-editing) state.
+		const noFollowField = screen.queryByRole( 'checkbox', {
+			name: 'No follow',
+		} );
+		expect( noFollowField ).not.toBeInTheDocument();
+
+		// Check that the link value is updated immediately upon checking
+		// the checkbox.
+		await user.click( opensInNewTabField );
+
+		expect( opensInNewTabField ).toBeChecked();
+
+		expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+		expect( mockOnChange ).toHaveBeenCalledWith( {
+			...selectedLink,
+			opensInNewTab: true,
+		} );
+	} );
+
 	it( 'should hide advanced link settings and toggle when not editing a link', async () => {
 		const selectedLink = fauxEntitySuggestions[ 0 ];
 

From cd5bba4e31f821099904f8dd0d70026b21086277 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 18 Jan 2024 10:15:32 -0500
Subject: [PATCH 6/8] Add back the new tab control

---
 .../src/components/link-control/index.js      | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 824bf4aaced465..a208fa20d242ff 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -427,6 +427,25 @@ function LinkControl( {
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
+					additionalControls={ () => {
+						// Expose the "Opens in new tab" settings in the preview
+						// as it is the most common setting to change.
+						if (
+							settings?.find(
+								( setting ) => setting.id === 'opensInNewTab'
+							)
+						) {
+							return (
+								<LinkSettings
+									value={ internalControlValue }
+									settings={ settings?.filter(
+										( { id } ) => id === 'opensInNewTab'
+									) }
+									onChange={ onChange }
+								/>
+							);
+						}
+					} }
 					onRemove={ () => {
 						onRemove();
 						setIsEditingLink( true );

From 2f416a8f7273554bf6754f23b4aea8fd3035216e Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 23 Jan 2024 12:06:07 -0500
Subject: [PATCH 7/8] Tweak offset

---
 packages/format-library/src/link/inline.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index 0486bb36f97781..39fcc0f3b0734c 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -257,7 +257,7 @@ function InlineLinkUI( {
 			onClose={ stopAddingLink }
 			onFocusOutside={ () => stopAddingLink( false ) }
 			placement="bottom"
-			offset={ 8 }
+			offset={ 10 }
 			shift
 		>
 			<LinkControl

From 3b4380821d25a614b254ef7563e3ea685b20c953 Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Tue, 23 Jan 2024 18:15:31 +0100
Subject: [PATCH 8/8] fix unit test

---
 .../block-editor/src/components/link-control/test/index.js     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js
index 32db57a55d76ed..054f7a3ea87468 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -2244,7 +2244,8 @@ describe( 'Rich link previews', () => {
 
 		const titlePreview = screen.getByText( selectedLink.title );
 
-		expect( titlePreview ).toHaveClass(
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( titlePreview.parentElement ).toHaveClass(
 			'block-editor-link-control__search-item-title'
 		);
 	} );