From e3a58d3988dbfeec29ff471237f967d6564a590d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 10 Nov 2023 15:45:01 +0100
Subject: [PATCH 1/3] Fix visual and dom order by using HStack.

---
 .../src/components/link-control/README.md     |  4 ++--
 .../src/components/link-control/index.js      | 21 +++++++++++++------
 .../src/components/link-control/style.scss    |  5 -----
 .../components/media-replace-flow/style.scss  |  4 ++--
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index edab6b4ad488cd..5c31c4c14371c9 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -275,14 +275,14 @@ If passed, children are rendered after the input.
 
 ```jsx
 <LinkControlSearchInput>
-	<div className="block-editor-link-control__search-actions">
+	<HStack justify="right">
 		<Button
 			type="submit"
 			label={ __( 'Submit' ) }
 			icon={ keyboardReturn }
 			className="block-editor-link-control__search-submit"
 		/>
-	</div>
+	</HStack>
 </LinkControlSearchInput>
 ```
 
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index c25ed5cd1187a8..a208fa20d242ff 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -6,7 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
+import {
+	Button,
+	Spinner,
+	Notice,
+	TextControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
@@ -467,7 +473,13 @@ function LinkControl( {
 			) }
 
 			{ showActions && (
-				<div className="block-editor-link-control__search-actions">
+				<HStack
+					justify="right"
+					className="block-editor-link-control__search-actions"
+				>
+					<Button variant="tertiary" onClick={ handleCancel }>
+						{ __( 'Cancel' ) }
+					</Button>
 					<Button
 						variant="primary"
 						onClick={ isDisabled ? noop : handleSubmit }
@@ -476,10 +488,7 @@ function LinkControl( {
 					>
 						{ __( 'Save' ) }
 					</Button>
-					<Button variant="tertiary" onClick={ handleCancel }>
-						{ __( 'Cancel' ) }
-					</Button>
-				</div>
+				</HStack>
 			) }
 
 			{ renderControlBottom && renderControlBottom() }
diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
index fae3f03786dfe5..7b6bbff0700a37 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -96,12 +96,7 @@ $preview-image-height: 140px;
 }
 
 .block-editor-link-control__search-actions {
-	display: flex;
-	flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
-	justify-content: flex-start;
-	gap: $grid-unit-10;
 	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
-	order: 20;
 }
 
 .block-editor-link-control__search-results-wrapper {
diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index dd3b0563c3ca8a..cddb23b4f0320c 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -17,6 +17,7 @@
 	&.has-siblings {
 		border-top: $border-width solid $gray-900;
 		margin-top: $grid-unit-10;
+		padding-bottom: $grid-unit-10;
 	}
 
 	.block-editor-media-replace-flow__image-url-label {
@@ -55,8 +56,7 @@
 		}
 
 		.block-editor-link-control__search-actions {
-			top: 0; // cancel default top positioning
-			right: 4px;
+			padding: 0;
 		}
 	}
 }

From 9c49f1229034653c19637bbd4f9bb451d7b1f25e Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 10 Nov 2023 15:46:37 +0100
Subject: [PATCH 2/3] Fix padding of tertiary buttons within the visual editor.

---
 packages/edit-post/src/components/visual-editor/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 40043958fcaad5..162ba21a639f65 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -21,7 +21,6 @@
 		font-size: $default-font-size;
 		padding: 6px 12px;
 
-		&.is-tertiary,
 		&.has-icon {
 			padding: 6px;
 		}

From b519d19aeadf0a4654ba1d67d0524efe53728696 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 10 Nov 2023 16:36:39 +0100
Subject: [PATCH 3/3] Fix top padding in media replace popover.

---
 .../block-editor/src/components/media-replace-flow/style.scss   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/media-replace-flow/style.scss b/packages/block-editor/src/components/media-replace-flow/style.scss
index cddb23b4f0320c..61df542cf58404 100644
--- a/packages/block-editor/src/components/media-replace-flow/style.scss
+++ b/packages/block-editor/src/components/media-replace-flow/style.scss
@@ -56,7 +56,7 @@
 		}
 
 		.block-editor-link-control__search-actions {
-			padding: 0;
+			padding: $grid-unit-10 0 0;
 		}
 	}
 }