From 9fa62d9d207181992a67e1d02a103d31af6ae9b0 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 13 Nov 2023 09:49:13 +0100
Subject: [PATCH] Fix mismatching link control action buttons visual order and
 DOM order (#56042)

* Fix visual and dom order by using HStack.

* Fix padding of tertiary buttons within the visual editor.

* Fix top padding in media replace popover.
---
 .../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 ++--
 .../src/components/visual-editor/style.scss   |  1 -
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index edab6b4ad488c..5c31c4c14371c 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 c25ed5cd1187a..a208fa20d242f 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 fae3f03786dfe..7b6bbff0700a3 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 dd3b0563c3ca8..61df542cf5840 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: $grid-unit-10 0 0;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index fa61cc9889cf9..237bbf25f2c79 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;
 		}