From fec385a312a771b09337964697e2d00fc5edd01d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Jan 2024 09:27:42 +0000
Subject: [PATCH 1/3] Show link preview on edit view

---
 .../src/components/link-control/index.js      | 137 ++++++++++--------
 1 file changed, 74 insertions(+), 63 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index a208fa20d242f..e4a029d0fb06c 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -330,8 +330,7 @@ function LinkControl( {
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
 
-	const shownUnlinkControl =
-		onRemove && value && ! isEditingLink && ! isCreatingPage;
+	const shownUnlinkControl = onRemove && value && ! isCreatingPage;
 
 	const showActions = isEditingLink && hasLinkValue;
 
@@ -356,6 +355,40 @@ function LinkControl( {
 				</div>
 			) }
 
+			{ hasLinkValue && ! isCreatingPage && (
+				<LinkPreview
+					key={ value?.url } // force remount when URL changes to avoid race conditions for rich previews
+					value={ value }
+					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 (
+							! isEditing &&
+							settings?.find(
+								( setting ) => setting.id === 'opensInNewTab'
+							)
+						) {
+							return (
+								<LinkSettings
+									value={ internalControlValue }
+									settings={ settings?.filter(
+										( { id } ) => id === 'opensInNewTab'
+									) }
+									onChange={ onChange }
+								/>
+							);
+						}
+					} }
+					onRemove={ () => {
+						onRemove();
+						setIsEditingLink( true );
+					} }
+				/>
+			) }
+
 			{ isEditing && (
 				<>
 					<div
@@ -377,35 +410,46 @@ function LinkControl( {
 								size="__unstable-large"
 							/>
 						) }
-						<LinkControlSearchInput
-							currentLink={ value }
-							className="block-editor-link-control__field block-editor-link-control__search-input"
-							placeholder={ searchInputPlaceholder }
-							value={ currentUrlInputValue }
-							withCreateSuggestion={ withCreateSuggestion }
-							onCreateSuggestion={ createPage }
-							onChange={ setInternalURLInputValue }
-							onSelect={ handleSelectSuggestion }
-							showInitialSuggestions={ showInitialSuggestions }
-							allowDirectEntry={ ! noDirectEntry }
-							showSuggestions={ showSuggestions }
-							suggestionsQuery={ suggestionsQuery }
-							withURLSuggestion={ ! noURLSuggestion }
-							createSuggestionButtonText={
-								createSuggestionButtonText
-							}
-							hideLabelFromVision={ ! showTextControl }
-						/>
-						{ ! showActions && (
-							<div className="block-editor-link-control__search-enter">
-								<Button
-									onClick={ isDisabled ? noop : handleSubmit }
-									label={ __( 'Submit' ) }
-									icon={ keyboardReturn }
-									className="block-editor-link-control__search-submit"
-									aria-disabled={ isDisabled }
+
+						{ ! hasLinkValue && (
+							<>
+								<LinkControlSearchInput
+									currentLink={ value }
+									className="block-editor-link-control__field block-editor-link-control__search-input"
+									placeholder={ searchInputPlaceholder }
+									value={ currentUrlInputValue }
+									withCreateSuggestion={
+										withCreateSuggestion
+									}
+									onCreateSuggestion={ createPage }
+									onChange={ setInternalURLInputValue }
+									onSelect={ handleSelectSuggestion }
+									showInitialSuggestions={
+										showInitialSuggestions
+									}
+									allowDirectEntry={ ! noDirectEntry }
+									showSuggestions={ showSuggestions }
+									suggestionsQuery={ suggestionsQuery }
+									withURLSuggestion={ ! noURLSuggestion }
+									createSuggestionButtonText={
+										createSuggestionButtonText
+									}
+									hideLabelFromVision={ ! showTextControl }
 								/>
-							</div>
+								{ ! showActions && (
+									<div className="block-editor-link-control__search-enter">
+										<Button
+											onClick={
+												isDisabled ? noop : handleSubmit
+											}
+											label={ __( 'Submit' ) }
+											icon={ keyboardReturn }
+											className="block-editor-link-control__search-submit"
+											aria-disabled={ isDisabled }
+										/>
+									</div>
+								) }
+							</>
 						) }
 					</div>
 					{ errorMessage && (
@@ -420,39 +464,6 @@ function LinkControl( {
 				</>
 			) }
 
-			{ value && ! isEditingLink && ! isCreatingPage && (
-				<LinkPreview
-					key={ value?.url } // force remount when URL changes to avoid race conditions for rich previews
-					value={ value }
-					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 );
-					} }
-				/>
-			) }
-
 			{ showSettings && (
 				<div className="block-editor-link-control__tools">
 					{ ! currentInputIsEmpty && (

From 0dab64deb05c46785a1a960745e15d79d217423c Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Jan 2024 09:37:08 +0000
Subject: [PATCH 2/3] Conditionally display Link field and Preview

---
 .../src/components/link-control/index.js          | 15 +++++++++++++++
 .../src/components/link-control/link-preview.js   |  3 +++
 .../src/components/link-control/style.scss        |  1 +
 3 files 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 e4a029d0fb06c..1476b47879a5a 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -334,6 +334,8 @@ function LinkControl( {
 
 	const showActions = isEditingLink && hasLinkValue;
 
+	const showURLInput = hasLinkValue && ! value?.id;
+
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
@@ -359,6 +361,7 @@ function LinkControl( {
 				<LinkPreview
 					key={ value?.url } // force remount when URL changes to avoid race conditions for rich previews
 					value={ value }
+					isEditing={ isEditing }
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
 					hasUnlinkControl={ shownUnlinkControl }
@@ -398,6 +401,18 @@ function LinkControl( {
 							'has-actions': showActions,
 						} ) }
 					>
+						{ showURLInput && (
+							<TextControl
+								__nextHasNoMarginBottom
+								className="block-editor-link-control__field block-editor-link-control__search-input"
+								label={ __( 'Link' ) }
+								value={ currentUrlInputValue }
+								onChange={ setInternalURLInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+								size="__unstable-large"
+							/>
+						) }
+
 						{ showTextControl && (
 							<TextControl
 								__nextHasNoMarginBottom
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 5a5a30969d013..09b8b48dbc013 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -31,6 +31,7 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 	additionalControls,
+	isEditing,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -120,7 +121,9 @@ export default function LinkPreview( {
 					className="block-editor-link-control__search-item-action"
 					onClick={ onEditClick }
 					size="compact"
+					disabled={ isEditing }
 				/>
+
 				{ hasUnlinkControl && (
 					<Button
 						icon={ linkOff }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index 7b6470df43543..4cc8cdf9b5d21 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -172,6 +172,7 @@ $block-editor-link-control-number-of-actions: 1;
 		width: 100%;
 		cursor: default;
 		padding: $grid-unit-20;
+		border-bottom: 1px solid $gray-200;
 	}
 
 	.block-editor-link-control__search-item-header {

From 9f0acdc59540775796d8c47324fe743100c00fc2 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Jan 2024 09:51:22 +0000
Subject: [PATCH 3/3] Rename the search field at all times

---
 .../src/components/link-control/index.js      | 80 +++++++------------
 1 file changed, 28 insertions(+), 52 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 1476b47879a5a..c02855d1e226a 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -334,8 +334,6 @@ function LinkControl( {
 
 	const showActions = isEditingLink && hasLinkValue;
 
-	const showURLInput = hasLinkValue && ! value?.id;
-
 	// Only show text control once a URL value has been committed
 	// and it isn't just empty whitespace.
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
@@ -401,18 +399,6 @@ function LinkControl( {
 							'has-actions': showActions,
 						} ) }
 					>
-						{ showURLInput && (
-							<TextControl
-								__nextHasNoMarginBottom
-								className="block-editor-link-control__field block-editor-link-control__search-input"
-								label={ __( 'Link' ) }
-								value={ currentUrlInputValue }
-								onChange={ setInternalURLInputValue }
-								onKeyDown={ handleSubmitWithEnter }
-								size="__unstable-large"
-							/>
-						) }
-
 						{ showTextControl && (
 							<TextControl
 								__nextHasNoMarginBottom
@@ -426,45 +412,35 @@ function LinkControl( {
 							/>
 						) }
 
-						{ ! hasLinkValue && (
-							<>
-								<LinkControlSearchInput
-									currentLink={ value }
-									className="block-editor-link-control__field block-editor-link-control__search-input"
-									placeholder={ searchInputPlaceholder }
-									value={ currentUrlInputValue }
-									withCreateSuggestion={
-										withCreateSuggestion
-									}
-									onCreateSuggestion={ createPage }
-									onChange={ setInternalURLInputValue }
-									onSelect={ handleSelectSuggestion }
-									showInitialSuggestions={
-										showInitialSuggestions
-									}
-									allowDirectEntry={ ! noDirectEntry }
-									showSuggestions={ showSuggestions }
-									suggestionsQuery={ suggestionsQuery }
-									withURLSuggestion={ ! noURLSuggestion }
-									createSuggestionButtonText={
-										createSuggestionButtonText
-									}
-									hideLabelFromVision={ ! showTextControl }
+						<LinkControlSearchInput
+							currentLink={ value }
+							className="block-editor-link-control__field block-editor-link-control__search-input"
+							placeholder={ searchInputPlaceholder }
+							value={ currentUrlInputValue }
+							withCreateSuggestion={ withCreateSuggestion }
+							onCreateSuggestion={ createPage }
+							onChange={ setInternalURLInputValue }
+							onSelect={ handleSelectSuggestion }
+							showInitialSuggestions={ showInitialSuggestions }
+							allowDirectEntry={ ! noDirectEntry }
+							showSuggestions={ showSuggestions }
+							suggestionsQuery={ suggestionsQuery }
+							withURLSuggestion={ ! noURLSuggestion }
+							createSuggestionButtonText={
+								createSuggestionButtonText
+							}
+							hideLabelFromVision={ ! showTextControl }
+						/>
+						{ ! showActions && (
+							<div className="block-editor-link-control__search-enter">
+								<Button
+									onClick={ isDisabled ? noop : handleSubmit }
+									label={ __( 'Submit' ) }
+									icon={ keyboardReturn }
+									className="block-editor-link-control__search-submit"
+									aria-disabled={ isDisabled }
 								/>
-								{ ! showActions && (
-									<div className="block-editor-link-control__search-enter">
-										<Button
-											onClick={
-												isDisabled ? noop : handleSubmit
-											}
-											label={ __( 'Submit' ) }
-											icon={ keyboardReturn }
-											className="block-editor-link-control__search-submit"
-											aria-disabled={ isDisabled }
-										/>
-									</div>
-								) }
-							</>
+							</div>
 						) }
 					</div>
 					{ errorMessage && (