Reinstate Text control outside of settings in Link Control (WordPress…

…#50957) * Reinstate Text control outside of settings * change selector on tests * fix playwright test * fix the waitForFunction function on the tests * fix e2e tests --------- Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
pewresearch · Jul 13, 2023 · 133110e · 133110e
1 parent a5a4b0b
commit 133110e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 53 deletions.
diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
@@ -347,6 +347,17 @@ function LinkControl( {
 							}
 							useLabel={ showTextControl }
 						/>
+						{ showTextControl && (
+							<TextControl
+								__nextHasNoMarginBottom
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+							/>
+						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -373,31 +384,18 @@ function LinkControl( {
 
 			{ isEditing && (
 				<div className="block-editor-link-control__tools">
-					{ ( showSettings || showTextControl ) && (
+					{ showSettings && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
 						>
-							{ showTextControl && (
-								<TextControl
-									__nextHasNoMarginBottom
-									ref={ textInputRef }
-									className="block-editor-link-control__setting block-editor-link-control__text-content"
-									label={ __( 'Text' ) }
-									value={ internalControlValue?.title }
-									onChange={ setInternalTextInputValue }
-									onKeyDown={ handleSubmitWithEnter }
-								/>
-							) }
-							{ showSettings && (
-								<LinkSettings
-									value={ internalControlValue }
-									settings={ settings }
-									onChange={ createSetInternalSettingValueHandler(
-										settingsKeys
-									) }
-								/>
-							) }
+							<LinkSettings
+								value={ internalControlValue }
+								settings={ settings }
+								onChange={ createSetInternalSettingValueHandler(
+									settingsKeys
+								) }
+							/>
 						</LinkControlSettingsDrawer>
 					) }
 

diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -17,9 +17,16 @@ describe( 'Links', () => {
 	} );
 
 	const waitForURLFieldAutoFocus = async () => {
-		await page.waitForFunction(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
+		await page.waitForFunction( () => {
+			const input = document.querySelector(
+				'.block-editor-url-input__input'
+			);
+			if ( input ) {
+				input.focus();
+				return true;
+			}
+			return false;
+		} );
 	};
 
 	it( 'will use Post title as link text if link to existing post is created without any text selected', async () => {
@@ -520,11 +527,6 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
 			await page.keyboard.press( 'Tab' );
 
 			// Tabbing should land us in the text input.
@@ -582,15 +584,6 @@ describe( 'Links', () => {
 
 			await editButton.click();
 
-			await waitForURLFieldAutoFocus();
-
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
-			await page.keyboard.press( 'Tab' );
-
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
@@ -617,14 +610,6 @@ describe( 'Links', () => {
 				'//button[contains(@aria-label, "Edit")]'
 			);
 			await editButton.click();
-			await waitForURLFieldAutoFocus();
-
-			const [ settingsToggle ] = await page.$x(
-				'//button[contains(@aria-label, "Link Settings")]'
-			);
-			await settingsToggle.click();
-
-			await page.keyboard.press( 'Tab' );
 
 			// Tabbing should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -679,15 +664,15 @@ describe( 'Links', () => {
 			await page.waitForXPath( `//label[text()='Open in new tab']` );
 
 			// Move focus back to RichText for the underlying link.
-			await pressKeyTimes( 'Tab', 4 );
+			await pressKeyTimes( 'Tab', 3 );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
 			// Move back to the text input.
-			await pressKeyTimes( 'Tab', 3 );
+			await pressKeyTimes( 'Tab', 2 );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -887,10 +872,6 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			// Link settings open
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Space' );
-
 			// Move to Link Text field.
 			await page.keyboard.press( 'Tab' );
 

diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
@@ -103,7 +103,7 @@ test.describe( 'Links', () => {
 
 		// Edit link.
 		await pageUtils.pressKeys( 'primary+k' );
-		await pageUtils.pressKeys( 'primary+a' );
+		await page.getByPlaceholder( 'Search or type url' ).fill( '' );
 		await page.keyboard.type( 'wordpress.org' );
 
 		// Update the link.