Skip to content

Commit

Permalink
Reinstate Text control outside of settings in Link Control (#50957)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@getdave @MaggieCabrera
getdave and MaggieCabrera authored May 30, 2023
1 parent 1868ba7 commit 2bb724a
Show file tree
Hide file tree
Showing 3 changed files with 32 additions and 53 deletions.
40 changes: 19 additions & 21 deletions packages/block-editor/src/components/link-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
) }

Expand Down
43 changes: 12 additions & 31 deletions packages/e2e-tests/specs/editor/various/links.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand All @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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' );

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/blocks/links.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

1 comment on commit 2bb724a

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 2bb724a.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5123433919
📝 Reported issues:

Please sign in to comment.