Reduce LinkControl preview (#57775)

* Add offset to LinkControl Popover * Remove additionalControls from preview * Simplify preview * Remove unused test * Revert "Remove unused test" This reverts commit 33491f0. * Add back the new tab control * Tweak offset * fix unit test --------- Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
WordPress · Jan 23, 2024 · 614e035 · 614e035
1 parent 27fc84e
commit 614e035
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 133 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
@@ -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,62 +119,19 @@ export default function LinkPreview( {
 					label={ __( 'Edit' ) }
 					className="block-editor-link-control__search-item-action"
 					onClick={ onEditClick }
-					iconSize={ 24 }
+					size="compact"
 				/>
 				{ hasUnlinkControl && (
 					<Button
 						icon={ linkOff }
 						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
@@ -1,5 +1,4 @@
 $block-editor-link-control-number-of-actions: 1;
-$preview-image-height: 140px;
 
 @keyframes loadingpulse {
 	0% {
@@ -180,6 +179,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.
@@ -188,6 +188,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;
 		}
 	}
@@ -206,17 +209,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
 		}
 	}
 
@@ -227,10 +242,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;
@@ -246,58 +264,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 {
@@ -307,24 +273,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,

diff --git 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'
 		);
 	} );

diff --git 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={ 10 }
 			shift
 		>
 			<LinkControl