-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Revert Link control UX changes for WP 6.2 (#48359)
* Revert "Move Link Control action buttons into lower area (#47309)" This reverts commit e605937. * Revert "Fix Link Control action button visuals (#47306)" This reverts commit 2499646. * Revert "Add clear Apply and Cancel buttons to Link Control (#46933)" This reverts commit 875628f. # Conflicts: # packages/block-editor/src/components/link-control/index.js
- Loading branch information
Showing
8 changed files
with
63 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -537,7 +537,7 @@ describe( 'Manual link entry', () => { | |
| } ); | ||
|
|
||
| let submitButton = screen.getByRole( 'button', { | ||
| name: 'Apply', | ||
| name: 'Submit', | ||
| } ); | ||
|
|
||
| expect( submitButton ).toBeDisabled(); | ||
|
|
@@ -555,7 +555,7 @@ describe( 'Manual link entry', () => { | |
| await user.keyboard( '[Enter]' ); | ||
|
|
||
| submitButton = screen.getByRole( 'button', { | ||
| name: 'Apply', | ||
| name: 'Submit', | ||
| } ); | ||
|
|
||
| // Verify the UI hasn't allowed submission. | ||
|
|
@@ -578,7 +578,7 @@ describe( 'Manual link entry', () => { | |
| } ); | ||
|
|
||
| let submitButton = screen.queryByRole( 'button', { | ||
| name: 'Apply', | ||
| name: 'Submit', | ||
| } ); | ||
|
|
||
| expect( submitButton ).toBeDisabled(); | ||
|
|
@@ -597,7 +597,7 @@ describe( 'Manual link entry', () => { | |
| await user.click( submitButton ); | ||
|
|
||
| submitButton = screen.queryByRole( 'button', { | ||
| name: 'Apply', | ||
| name: 'Submit', | ||
| } ); | ||
|
|
||
| // Verify the UI hasn't allowed submission. | ||
|
|
@@ -608,135 +608,6 @@ describe( 'Manual link entry', () => { | |
| ); | ||
| } ); | ||
|
|
||
| describe( 'Handling cancellation', () => { | ||
| it( 'should allow cancellation of the link creation process and reset any entered values', async () => { | ||
| const user = userEvent.setup(); | ||
| const mockOnRemove = jest.fn(); | ||
| const mockOnCancel = jest.fn(); | ||
|
|
||
| render( <LinkControl onRemove={ mockOnRemove } /> ); | ||
|
|
||
| // Search Input UI. | ||
| const searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| expect( cancelButton ).toBeEnabled(); | ||
| expect( cancelButton ).toBeVisible(); | ||
|
|
||
| // Simulate adding a link for a term. | ||
| await user.type( searchInput, 'https://www.wordpress.org' ); | ||
|
|
||
| // Attempt to submit the empty search value in the input. | ||
| await user.click( cancelButton ); | ||
|
|
||
| // Verify the consumer can handle the cancellation. | ||
| expect( mockOnRemove ).toHaveBeenCalled(); | ||
|
|
||
| // Ensure optional callback is not called. | ||
| expect( mockOnCancel ).not.toHaveBeenCalled(); | ||
|
|
||
| expect( searchInput ).toHaveValue( '' ); | ||
| } ); | ||
|
|
||
| it( 'should allow cancellation of the link editing process and reset any entered values', async () => { | ||
| const user = userEvent.setup(); | ||
| const initialLink = fauxEntitySuggestions[ 0 ]; | ||
|
|
||
| const LinkControlConsumer = () => { | ||
| const [ link, setLink ] = useState( initialLink ); | ||
|
|
||
| return ( | ||
| <LinkControl | ||
| value={ link } | ||
| onChange={ ( suggestion ) => { | ||
| setLink( suggestion ); | ||
| } } | ||
| hasTextControl | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| render( <LinkControlConsumer /> ); | ||
|
|
||
| let linkPreview = screen.getByLabelText( 'Currently selected' ); | ||
|
|
||
| expect( linkPreview ).toBeInTheDocument(); | ||
|
|
||
| // Click the "Edit" button to trigger into the editing mode. | ||
| let editButton = screen.queryByRole( 'button', { | ||
| name: 'Edit', | ||
| } ); | ||
|
|
||
| await user.click( editButton ); | ||
|
|
||
| let searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| let textInput = screen.getByRole( 'textbox', { | ||
| name: 'Text', | ||
| } ); | ||
|
|
||
| // Make a change to the search input. | ||
| await user.type( searchInput, 'This URL value was changed!' ); | ||
|
|
||
| // Make a change to the text input. | ||
| await user.type( textInput, 'This text value was changed!' ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| // Cancel the editing process. | ||
| await user.click( cancelButton ); | ||
|
|
||
| linkPreview = screen.getByLabelText( 'Currently selected' ); | ||
|
|
||
| expect( linkPreview ).toBeInTheDocument(); | ||
|
|
||
| // Re-query the edit button as it's been replaced. | ||
| editButton = screen.queryByRole( 'button', { | ||
| name: 'Edit', | ||
| } ); | ||
|
|
||
| await user.click( editButton ); | ||
|
|
||
| // Re-query the inputs as they have been replaced. | ||
| searchInput = screen.getByRole( 'combobox', { | ||
| name: 'URL', | ||
| } ); | ||
|
|
||
| textInput = screen.getByRole( 'textbox', { | ||
| name: 'Text', | ||
| } ); | ||
|
|
||
| // Expect to see the original link values and **not** the changed values. | ||
| expect( searchInput ).toHaveValue( initialLink.url ); | ||
| expect( textInput ).toHaveValue( initialLink.text ); | ||
| } ); | ||
|
|
||
| it( 'should call onCancel callback when cancelling if provided', async () => { | ||
| const user = userEvent.setup(); | ||
| const mockOnCancel = jest.fn(); | ||
|
|
||
| render( <LinkControl onCancel={ mockOnCancel } /> ); | ||
|
|
||
| const cancelButton = screen.queryByRole( 'button', { | ||
| name: 'Cancel', | ||
| } ); | ||
|
|
||
| await user.click( cancelButton ); | ||
|
|
||
| // Verify the consumer can handle the cancellation. | ||
| expect( mockOnCancel ).toHaveBeenCalled(); | ||
| } ); | ||
| } ); | ||
|
|
||
| describe( 'Alternative link protocols and formats', () => { | ||
| it.each( [ | ||
| [ 'mailto:[email protected]', 'mailto' ], | ||
|
|
@@ -1988,7 +1859,7 @@ describe( 'Controlling link title text', () => { | |
| expect( textInput ).toHaveValue( textValue ); | ||
|
|
||
| const submitButton = screen.queryByRole( 'button', { | ||
| name: 'Apply', | ||
| name: 'Submit', | ||
| } ); | ||
|
|
||
| await user.click( submitButton ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
2d61c0bThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in 2d61c0b.
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/4260041581
📝 Reported issues:
specs/editor/various/multi-block-selection.test.js