Revert "Move Link Control action buttons into lower area (#47309)"

This reverts commit e605937.
WordPress · Feb 23, 2023 · 953d9a1 · 953d9a1
1 parent 0b978bd
commit 953d9a1
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -274,7 +274,6 @@ function LinkControl( {
 	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
 	const showTextControl = hasLinkValue && hasTextControl;
 
-	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
 	return (
 		<div
 			tabIndex={ -1 }
@@ -287,7 +286,7 @@ function LinkControl( {
 				</div>
 			) }
 
-			{ isEditing && (
+			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
 				<>
 					<div
 						className={ classnames( {
@@ -336,32 +335,6 @@ function LinkControl( {
 							{ errorMessage }
 						</Notice>
 					) }
-				</>
-			) }
-
-			{ 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 }
-					onRemove={ onRemove }
-				/>
-			) }
-
-			<div className="block-editor-link-control__drawer">
-				{ showSettingsDrawer && (
-					<div className="block-editor-link-control__tools">
-						<LinkControlSettingsDrawer
-							value={ value }
-							settings={ settings }
-							onChange={ onChange }
-						/>
-					</div>
-				) }
-
-				{ isEditing && (
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
@@ -375,9 +348,29 @@ function LinkControl( {
 							{ __( 'Cancel' ) }
 						</Button>
 					</div>
-				) }
-			</div>
+				</>
+			) }
+
+			{ 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 }
+					onRemove={ onRemove }
+				/>
+			) }
 
+			{ showSettingsDrawer && (
+				<div className="block-editor-link-control__tools">
+					<LinkControlSettingsDrawer
+						value={ value }
+						settings={ settings }
+						onChange={ onChange }
+					/>
+				</div>
+			) }
 			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);

diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss
@@ -79,6 +79,7 @@ $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;
 }
 
@@ -426,10 +427,9 @@ $preview-image-height: 140px;
 	padding: 10px;
 }
 
-.block-editor-link-control__drawer {
+.block-editor-link-control__tools {
 	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
@@ -121,6 +121,8 @@ 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.
@@ -133,7 +135,8 @@ describe( 'Links', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		// Tab back to the Submit and apply the link.
-		await page.keyboard.press( 'Tab' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
+		await pressKeyWithModifier( 'shift', 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// The link should have been inserted.
@@ -526,6 +529,8 @@ 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
@@ -534,8 +539,7 @@ describe( 'Links', () => {
 
 		// Close dialog. Expect that "Open in new tab" would have been applied
 		// immediately.
-
-		await pressKeyWithModifier( 'shift', 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for Gutenberg to finish the job.