diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index d6155045656f5c..73e2f6bb8e0e1d 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -274,6 +274,7 @@ function LinkControl( {
// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
const showTextControl = hasLinkValue && hasTextControl;
+ const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
return (
) }
- { ( isEditingLink || ! value ) && ! isCreatingPage && (
+ { isEditing && (
<>
) }
-
-
-
-
>
) }
@@ -362,15 +350,34 @@ function LinkControl( {
/>
) }
- { showSettingsDrawer && (
-
-
-
- ) }
+
+ { showSettingsDrawer && (
+
+
+
+ ) }
+
+ { isEditing && (
+
+
+
+
+ ) }
+
+
{ 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 51682a45c7c20b..cadb0ce6340e28 100644
--- a/packages/block-editor/src/components/link-control/style.scss
+++ b/packages/block-editor/src/components/link-control/style.scss
@@ -79,7 +79,6 @@ $preview-image-height: 140px;
display: flex;
flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order.
justify-content: flex-start;
- margin: $grid-unit-20; // allow margin collapse for vertical spacing.
gap: $grid-unit-10;
}
@@ -427,9 +426,10 @@ $preview-image-height: 140px;
padding: 10px;
}
-.block-editor-link-control__tools {
+.block-editor-link-control__drawer {
display: flex;
align-items: center;
+ justify-content: space-between;
border-top: $border-width solid $gray-300;
margin: 0;
padding: $grid-unit-20;
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
index 44018bae3226ff..7d0ef19fedc8ba 100644
--- a/packages/e2e-tests/specs/editor/various/links.test.js
+++ b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -121,8 +121,6 @@ describe( 'Links', () => {
// Navigate to and toggle the "Open in new tab" checkbox.
await page.keyboard.press( 'Tab' );
- await page.keyboard.press( 'Tab' );
- await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Space' );
// Toggle should still have focus and be checked.
@@ -135,8 +133,7 @@ describe( 'Links', () => {
expect( await getEditedPostContent() ).toMatchSnapshot();
// Tab back to the Submit and apply the link.
- await pressKeyWithModifier( 'shift', 'Tab' );
- await pressKeyWithModifier( 'shift', 'Tab' );
+ await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Enter' );
// The link should have been inserted.
@@ -529,8 +526,6 @@ describe( 'Links', () => {
// Navigate to and toggle the "Open in new tab" checkbox.
await page.keyboard.press( 'Tab' );
- await page.keyboard.press( 'Tab' );
- await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Space' );
// Confirm that focus was not prematurely returned to the paragraph on
@@ -539,7 +534,8 @@ describe( 'Links', () => {
// Close dialog. Expect that "Open in new tab" would have been applied
// immediately.
- await page.keyboard.press( 'Tab' );
+
+ await pressKeyWithModifier( 'shift', 'Tab' );
await page.keyboard.press( 'Enter' );
// Wait for Gutenberg to finish the job.