From bd8b3fc489c7d60f9e978aba213a32131d00e4e4 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 20 Jun 2023 10:52:01 -0400 Subject: [PATCH 01/33] Move text above link --- .../src/components/link-control/index.js | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 4803b9a0efebc..85b2476399432 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -322,6 +322,18 @@ function LinkControl( { 'has-text-control': showTextControl, } ) } > + { showTextControl && ( + + ) } - { showTextControl && ( - - ) } { errorMessage && ( Date: Tue, 20 Jun 2023 10:52:31 -0400 Subject: [PATCH 02/33] Change "URL" label to "Link" --- .../block-editor/src/components/link-control/search-input.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 4e30daaa96524..05392084806f5 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -128,7 +128,7 @@ const LinkControlSearchInput = forwardRef( Date: Tue, 20 Jun 2023 11:04:19 -0400 Subject: [PATCH 03/33] Style tweaks --- .../src/components/link-control/style.scss | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 2c4b77f342310..80a227f37e1e3 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -60,30 +60,18 @@ $preview-image-height: 140px; .block-editor-link-control__field { margin: $grid-unit-20; // allow margin collapse for vertical spacing. - // Element wrapping the label and input. - > .components-base-control__field { - display: flex; - align-items: center; - } - - .components-base-control__label { - margin-right: $grid-unit-20; - margin-bottom: 0; - min-width: 29px; // align with search results. - } - input[type="text"], // Specificity overide of URLInput defaults. &.block-editor-url-input input[type="text"].block-editor-url-input__input { @include input-control; - width: calc(100% - #{$grid-unit-20 * 2}); display: block; - padding: $grid-unit-10 $grid-unit-20; - margin: 0; - position: relative; border: 1px solid $gray-600; - height: 40px; border-radius: $radius-block-ui; + height: 40px; // components do not properly support unstable-large yet. + margin: 0; + padding: $grid-unit-10 $grid-unit-20; + position: relative; + width: 100%; } } From c0552f5b0097c41e33b89720b2703ee1948c459d Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 20 Jun 2023 11:46:59 -0400 Subject: [PATCH 04/33] Add chevron based advanced settings button --- .../link-control/settings-drawer.js | 11 ++- .../src/components/link-control/style.scss | 95 +++++++++++-------- 2 files changed, 62 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/link-control/settings-drawer.js b/packages/block-editor/src/components/link-control/settings-drawer.js index 12b1fb8075e3c..b7b8f4e29538f 100644 --- a/packages/block-editor/src/components/link-control/settings-drawer.js +++ b/packages/block-editor/src/components/link-control/settings-drawer.js @@ -6,9 +6,9 @@ import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, } from '@wordpress/components'; -import { settings as settingsIcon } from '@wordpress/icons'; +import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons'; import { useReducedMotion, useInstanceId } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) { @@ -28,10 +28,11 @@ function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) { className="block-editor-link-control__drawer-toggle" aria-expanded={ settingsOpen } onClick={ () => setSettingsOpen( ! settingsOpen ) } - icon={ settingsIcon } - label={ __( 'Link Settings' ) } + icon={ isRTL() ? chevronLeftSmall : chevronRightSmall } aria-controls={ settingsDrawerId } - /> + > + { __( 'Advanced' ) } + { settingsOpen && ( Date: Tue, 20 Jun 2023 12:29:59 -0400 Subject: [PATCH 05/33] Adapt logic for rendering actions and settings --- packages/block-editor/src/components/link-control/index.js | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 85b2476399432..7aba24dc764c1 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -292,8 +292,6 @@ function LinkControl( { const shownUnlinkControl = onRemove && value && ! isEditingLink && ! isCreatingPage; - const showSettings = !! settings?.length; - // Only show text control once a URL value has been committed // and it isn't just empty whitespace. // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927. @@ -377,9 +375,9 @@ function LinkControl( { /> ) } - { isEditing && ( + { isEditingLink && hasLinkValue && (
- { showSettings && ( + { ! currentInputIsEmpty && ( ) } -
{ settingsOpen && ( From eec4befc79da0ba8db04964fda5b679fe3ae3d58 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 21:11:22 +0100 Subject: [PATCH 12/33] Update toggle drawer name in tests --- packages/block-editor/src/components/link-control/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 8e4cd1634b2e7..7c090ffc74d12 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -2408,7 +2408,7 @@ describe( 'Controlling link title text', () => { async function toggleSettingsDrawer( user ) { const settingsToggle = screen.queryByRole( 'button', { - name: 'Link Settings', + name: 'Advanced', } ); await user.click( settingsToggle ); From 62ef07b5b64ed00cea960d055e8e2a2ffd2e5289 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 21:23:38 +0100 Subject: [PATCH 13/33] Standardise query for settings toggle --- .../src/components/link-control/test/index.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 7c090ffc74d12..958d77a1c5d5c 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -1737,10 +1737,7 @@ describe( 'Addition Settings UI', () => { render( ); - const settingsToggle = screen.queryByRole( 'button', { - name: 'Link Settings', - ariaControls: 'link-settings-1', - } ); + const settingsToggle = getSettingsDrawerToggle(); expect( settingsToggle ).not.toBeInTheDocument(); } ); @@ -1757,10 +1754,7 @@ describe( 'Addition Settings UI', () => { const user = userEvent.setup(); - const settingsToggle = screen.queryByRole( 'button', { - name: 'Link Settings', - ariaControls: 'link-settings-1', - } ); + const settingsToggle = getSettingsDrawerToggle(); expect( settingsToggle ).toHaveAttribute( 'aria-expanded', 'false' ); @@ -2406,10 +2400,14 @@ describe( 'Controlling link title text', () => { } ); } ); -async function toggleSettingsDrawer( user ) { - const settingsToggle = screen.queryByRole( 'button', { +function getSettingsDrawerToggle() { + return screen.queryByRole( 'button', { name: 'Advanced', } ); +} + +async function toggleSettingsDrawer( user ) { + const settingsToggle = getSettingsDrawerToggle(); await user.click( settingsToggle ); } From 5ab42eb20b0ef9f8335e8dc4ee4bf253931e2498 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 21:26:46 +0100 Subject: [PATCH 14/33] Update test to check for absence of cancel button during link creation --- .../src/components/link-control/test/index.js | 26 ++----------------- 1 file changed, 2 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 958d77a1c5d5c..a8ffafe6e1351 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -771,38 +771,16 @@ 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(); + it( 'should not show cancellation button during link creation', async () => { const mockOnRemove = jest.fn(); - const mockOnCancel = jest.fn(); render( ); - // 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( '' ); + expect( cancelButton ).not.toBeInTheDocument(); } ); it( 'should allow cancellation of the link editing process and reset any entered values', async () => { From 8c03ac1d1e639889382d8ccbd5152b10faeb86d7 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 21:36:03 +0100 Subject: [PATCH 15/33] Fix cancellation tests --- .../src/components/link-control/test/index.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index a8ffafe6e1351..5bedafadd46a2 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -817,7 +817,7 @@ describe( 'Manual link entry', () => { await toggleSettingsDrawer( user ); let searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); let textInput = screen.getByRole( 'textbox', { @@ -852,7 +852,7 @@ describe( 'Manual link entry', () => { // Re-query the inputs as they have been replaced. searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); textInput = screen.getByRole( 'textbox', { @@ -868,7 +868,13 @@ describe( 'Manual link entry', () => { const user = userEvent.setup(); const mockOnCancel = jest.fn(); - render( ); + render( + + ); const cancelButton = screen.queryByRole( 'button', { name: 'Cancel', From 1ebaba241bd27374ad3c4b641ef9fcfadbf6461f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:06:29 +0100 Subject: [PATCH 16/33] =?UTF-8?q?Ensure=20label=20is=20always=20=E2=80=9CL?= =?UTF-8?q?ink=E2=80=9D=20but=20remains=20hidden=20when=20it=E2=80=99s=20t?= =?UTF-8?q?he=20only=20visible=20control?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/block-editor/src/components/link-control/index.js | 2 +- .../src/components/link-control/search-input.js | 7 ++++--- packages/block-editor/src/components/url-input/index.js | 2 ++ 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index ec7450dae189b..80dd929cafee0 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -351,7 +351,7 @@ function LinkControl( { createSuggestionButtonText={ createSuggestionButtonText } - useLabel={ showTextControl } + hideLabelFromVision={ ! showTextControl } />
{ errorMessage && ( diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index a0c13e929a964..d6023b9220d63 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -46,7 +46,7 @@ const LinkControlSearchInput = forwardRef( suggestionsQuery = {}, withURLSuggestion = true, createSuggestionButtonText, - useLabel = false, + hideLabelFromVision = false, }, ref ) => { @@ -120,7 +120,7 @@ const LinkControlSearchInput = forwardRef( }; const inputClasses = classnames( className, { - 'has-no-label': ! useLabel, + // 'has-no-label': ! hideLabelFromVision, } ); return ( @@ -128,7 +128,8 @@ const LinkControlSearchInput = forwardRef( Date: Thu, 22 Jun 2023 22:06:49 +0100 Subject: [PATCH 17/33] =?UTF-8?q?Update=20tests=20to=20look=20for=20?= =?UTF-8?q?=E2=80=9CLink=E2=80=9D=20instead=20of=20=E2=80=9CURL=E2=80=9D?= =?UTF-8?q?=20name=20for=20input?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/link-control/test/index.js | 117 ++++++++++-------- 1 file changed, 63 insertions(+), 54 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 5bedafadd46a2..3a66d929a2325 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -138,7 +138,7 @@ describe( 'Basic rendering', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); expect( searchInput ).toBeVisible(); } ); @@ -147,7 +147,7 @@ describe( 'Basic rendering', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); expect( searchInput ).toBeVisible(); // Make sure we use the ARIA 1.0 pattern with aria-owns. @@ -170,7 +170,7 @@ describe( 'Basic rendering', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, 'Hello' ); @@ -283,7 +283,7 @@ describe( 'Basic rendering', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -296,7 +296,7 @@ describe( 'Basic rendering', () => { render( ); expect( - screen.queryByRole( 'combobox', { name: 'URL' } ) + screen.queryByRole( 'combobox', { name: 'Link' } ) ).not.toBeInTheDocument(); } ); @@ -309,7 +309,7 @@ describe( 'Basic rendering', () => { ); expect( - screen.getByRole( 'combobox', { name: 'URL' } ) + screen.getByRole( 'combobox', { name: 'Link' } ) ).toBeVisible(); } ); @@ -327,7 +327,7 @@ describe( 'Basic rendering', () => { await user.click( editButton ); expect( - screen.getByRole( 'combobox', { name: 'URL' } ) + screen.getByRole( 'combobox', { name: 'Link' } ) ).toBeVisible(); // If passed `forceIsEditingLink` of `false` while editing, should @@ -340,7 +340,7 @@ describe( 'Basic rendering', () => { ); expect( - screen.queryByRole( 'combobox', { name: 'URL' } ) + screen.queryByRole( 'combobox', { name: 'Link' } ) ).not.toBeInTheDocument(); } ); @@ -424,7 +424,7 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -448,7 +448,9 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -497,7 +499,9 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -528,7 +532,7 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -571,7 +575,7 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, 'anything' ); @@ -618,7 +622,7 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, 'couldbeurlorentitysearchterm' ); @@ -648,7 +652,9 @@ describe( 'Manual link entry', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -683,7 +689,7 @@ describe( 'Manual link entry', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); let submitButton = screen.getByRole( 'button', { @@ -722,30 +728,23 @@ describe( 'Manual link entry', () => { ); it.each( testTable )( - 'should not allow creation of links %s via the UI "submit" button', + 'should not allow editing of links to a new link %s via the UI "submit" button', async ( _desc, searchString ) => { const user = userEvent.setup(); - render( ); + render( + + ); // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', - } ); - - let submitButton = screen.queryByRole( 'button', { - name: 'Save', + name: 'Link', } ); - expect( submitButton ).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect( submitButton ).toBeVisible(); - - // Simulate searching for a term. if ( searchString.length ) { - // Simulate searching for a term. await user.type( searchInput, searchString ); } else { // Simulate clearing the search term. @@ -755,17 +754,17 @@ describe( 'Manual link entry', () => { // Attempt to submit the empty search value in the input. await user.click( submitButton ); - submitButton = screen.queryByRole( 'button', { + const submitButton = screen.queryByRole( 'button', { name: 'Save', } ); // Verify the UI hasn't allowed submission. - expect( searchInput ).toBeVisible(); expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' ); expect( submitButton ).toBeVisible(); + expect( searchInput ).toBeVisible(); } ); } ); @@ -900,7 +899,7 @@ describe( 'Manual link entry', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); // Simulate searching for a term. @@ -936,7 +935,7 @@ describe( 'Default search suggestions', () => { // Verify input has no value has default suggestions should only show // when this does not have a value. // Search Input UI. - expect( screen.getByRole( 'combobox', { name: 'URL' } ) ).toHaveValue( + expect( screen.getByRole( 'combobox', { name: 'Link' } ) ).toHaveValue( '' ); @@ -965,7 +964,7 @@ describe( 'Default search suggestions', () => { } ); await user.click( currentLinkBtn ); - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Search input is set to the URL value. expect( searchInput ).toHaveValue( initialValue.url ); @@ -987,7 +986,7 @@ describe( 'Default search suggestions', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -1025,7 +1024,7 @@ describe( 'Default search suggestions', () => { render( ); - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); const searchResultsField = screen.queryByRole( 'listbox', { name: 'Suggestions', @@ -1083,7 +1082,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Simulate searching for a term. await user.type( searchInput, entityNameText ); @@ -1150,7 +1151,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, 'Some new page to create' ); @@ -1199,7 +1200,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, entityNameText ); @@ -1242,7 +1243,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, entityNameText ); @@ -1266,7 +1267,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); const searchResultsField = screen.queryByRole( 'listbox' ); @@ -1286,7 +1287,9 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); const searchResultsField = screen.queryByRole( 'listbox' ); @@ -1309,7 +1312,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); // Simulate searching for a term. @@ -1343,7 +1346,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { render( ); // Search Input UI. - searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchText ); @@ -1358,7 +1361,7 @@ describe( 'Creating Entities (eg: Posts, Pages)', () => { await user.click( createButton ); - searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); const errorNotice = screen.getAllByText( 'API response returned invalid entity.' @@ -1431,7 +1434,7 @@ describe( 'Selecting links', () => { // Simulate searching for a term. await user.click( currentLinkBtn ); - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); currentLinkUI = screen.queryByLabelText( 'Currently selected' ); // We should be back to showing the search input. @@ -1472,7 +1475,7 @@ describe( 'Selecting links', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); // Simulate searching for a term. @@ -1534,7 +1537,7 @@ describe( 'Selecting links', () => { // Search Input UI. const searchInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); // Simulate searching for a term. @@ -1623,7 +1626,9 @@ describe( 'Selecting links', () => { ).toBeVisible(); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Step down into the search results, highlighting the first result item. triggerArrowDown( searchInput ); @@ -1679,7 +1684,9 @@ describe( 'Selecting links', () => { render( ); // focus the search input - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); fireEvent.focus( searchInput ); @@ -1899,7 +1906,7 @@ describe( 'Post types', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); @@ -1926,7 +1933,9 @@ describe( 'Post types', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { + name: 'Link', + } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); From c12e3cee08d12230dd1cd6938f17e45114987829 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:16:38 +0100 Subject: [PATCH 18/33] Update empty value UI tests to only run for editing as opposed to creating links --- .../src/components/link-control/test/index.js | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 3a66d929a2325..9be4a7c3d310b 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -692,16 +692,6 @@ describe( 'Manual link entry', () => { name: 'Link', } ); - let submitButton = screen.getByRole( 'button', { - name: 'Save', - } ); - - expect( submitButton ).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect( submitButton ).toBeVisible(); - if ( searchString.length ) { // Simulate searching for a term. await user.type( searchInput, searchString ); @@ -713,17 +703,9 @@ describe( 'Manual link entry', () => { // Attempt to submit the empty search value in the input. await user.keyboard( '[Enter]' ); - submitButton = screen.getByRole( 'button', { - name: 'Save', - } ); - - // Verify the UI hasn't allowed submission. + // Verify the UI hasn't allowed submission because + // the search input is still visible. expect( searchInput ).toBeVisible(); - expect( submitButton ).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect( submitButton ).toBeVisible(); } ); @@ -744,6 +726,9 @@ describe( 'Manual link entry', () => { name: 'Link', } ); + // Remove the existing link. + await user.clear( searchInput ); + if ( searchString.length ) { await user.type( searchInput, searchString ); } else { @@ -751,19 +736,25 @@ describe( 'Manual link entry', () => { await user.clear( searchInput ); } - // Attempt to submit the empty search value in the input. - await user.click( submitButton ); - const submitButton = screen.queryByRole( 'button', { name: 'Save', } ); - // Verify the UI hasn't allowed submission. + // debug the UI state + // screen.debug(); + + // Verify the submission UI is disabled. + expect( submitButton ).toBeVisible(); expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' ); - expect( submitButton ).toBeVisible(); + + // Attempt to submit the empty search value in the input. + await user.click( submitButton ); + + // Verify the UI hasn't allowed submission because + // the search input is still visible. expect( searchInput ).toBeVisible(); } ); From 3cf9343f561e441942a196c050cc7ffb299d3f34 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:34:35 +0100 Subject: [PATCH 19/33] Fix e2e test tabbing order --- packages/e2e-tests/specs/editor/various/links.test.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 3be80f786fbc2..669464d9e9d20 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -879,8 +879,11 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); - // Move to Link Text field. - await page.keyboard.press( 'Tab' ); + // Move to "Text" field. + await pressKeyWithModifier( 'shift', 'Tab' ); + + // Delete existing value from "Text" field + await page.keyboard.press( 'Delete' ); // Change text to "z" await page.keyboard.type( 'z' ); From f6a7c1e757ee0c0ba9a93570cfe13b43ff89f3fb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:42:11 +0100 Subject: [PATCH 20/33] Use updated terms --- .../e2e-tests/specs/editor/various/links.test.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 669464d9e9d20..04029d6dbe9e1 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -105,7 +105,8 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const urlInputValue = await page.evaluate( - () => document.querySelector( '[aria-label="URL"]' ).value + () => + document.querySelector( '.block-editor-url-input__input' ).value ); expect( urlInputValue ).toBe( '' ); @@ -496,7 +497,7 @@ describe( 'Links', () => { await pressKeyWithModifier( 'primary', 'K' ); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Link Settings")]' + '//button[contains(@aria-label, "Advanced")]' ); await settingsToggle.click(); @@ -614,8 +615,9 @@ describe( 'Links', () => { ); await editButton.click(); - // tab forward to the text input. - await page.keyboard.press( 'Tab' ); + await waitForURLFieldAutoFocus(); + + await pressKeyWithModifier( 'shift', 'Tab' ); const textInputValue = await page.evaluate( () => document.activeElement.value @@ -661,7 +663,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Link Settings")]' + '//button[contains(@aria-label, "Advanced")]' ); await settingsToggle.click(); From e1d1305f21a4e6429f29b6106eb2a7ba92c15ce4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:46:58 +0100 Subject: [PATCH 21/33] Select settings toggle by text not aria label --- packages/e2e-tests/specs/editor/various/links.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 04029d6dbe9e1..19f20cfad42d9 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -497,7 +497,7 @@ describe( 'Links', () => { await pressKeyWithModifier( 'primary', 'K' ); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Advanced")]' + '//button[contains(text(), "Advanced")]' ); await settingsToggle.click(); @@ -663,7 +663,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Advanced")]' + '//button[contains(text(), "Advanced")]' ); await settingsToggle.click(); From fac61cc451a9de69c4a78a4df40f8152f4339eba Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:48:34 +0100 Subject: [PATCH 22/33] Fix another tabbing order bug --- packages/e2e-tests/specs/editor/various/links.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 19f20cfad42d9..67355f46086bb 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -529,7 +529,7 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); - await page.keyboard.press( 'Tab' ); + await pressKeyWithModifier( 'shift', 'Tab' ); // Tabbing should land us in the text input. const { isTextInput, textValue } = await page.evaluate( () => { From c1297e370735c3037f8cf5178052fea51c02e31e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:50:54 +0100 Subject: [PATCH 23/33] Fix one more tabbing issue in e2e tests --- packages/e2e-tests/specs/editor/various/links.test.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 67355f46086bb..ae5599f733370 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -586,8 +586,10 @@ describe( 'Links', () => { await editButton.click(); - // Tabbing forward should land us in the "Text" input. - await page.keyboard.press( 'Tab' ); + await waitForURLFieldAutoFocus(); + + // Tabbing backward should land us in the "Text" input. + await pressKeyWithModifier( 'shift', 'Tab' ); const textInputValue = await page.evaluate( () => document.activeElement.value From 8c9f1a8cb803ae71c2402c670af6741c37ca28bf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Jun 2023 22:52:17 +0100 Subject: [PATCH 24/33] Fix final tab ordering e2e test --- packages/e2e-tests/specs/editor/various/links.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index ae5599f733370..719d00afe076b 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -683,7 +683,7 @@ describe( 'Links', () => { await pressKeyWithModifier( 'shift', 'ArrowRight' ); // Move back to the text input. - await pressKeyTimes( 'Tab', 2 ); + await pressKeyTimes( 'Tab', 1 ); // Tabbing back should land us in the text input. const textInputValue = await page.evaluate( From 1bc002e7fac9e8f4fbb11672b363dd4437bbec6e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 23 Jun 2023 09:35:57 +0100 Subject: [PATCH 25/33] Decouple conditions for showing action buttons from settings Settings may not be provided but action buttons are always needed --- .../src/components/link-control/index.js | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 80dd929cafee0..41455c4ecf970 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -293,6 +293,7 @@ function LinkControl( { onRemove && value && ! isEditingLink && ! isCreatingPage; const showSettings = !! settings?.length && isEditingLink && hasLinkValue; + const showActions = isEditingLink && hasLinkValue; // Only show text control once a URL value has been committed // and it isn't just empty whitespace. @@ -393,19 +394,22 @@ function LinkControl( { /> ) } -
- - -
+
+ ) } + + { showActions && ( +
+ +
) } From a25340beb88a1cd57338b1d60a3ea1f36a3fbc80 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 23 Jun 2023 09:36:26 +0100 Subject: [PATCH 26/33] Tweak styling to account for action buttons when there are no settings provided --- packages/block-editor/src/components/link-control/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 58ed848048bdf..21e488381f1bd 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -84,7 +84,7 @@ $preview-image-height: 140px; flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order. justify-content: flex-start; gap: $grid-unit-10; - padding: 0 $grid-unit-10 $grid-unit-10; + padding: $grid-unit-10; order: 20; } @@ -403,7 +403,7 @@ $preview-image-height: 140px; } .block-editor-link-control__tools { - padding: $grid-unit-10; + padding: $grid-unit-10 $grid-unit-10 0 $grid-unit-10; margin-top: #{$grid-unit-20 * -1}; .components-button.block-editor-link-control__drawer-toggle { From 531ad75fbf8b47f3da5f6335e372816c2f89c211 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 23 Jun 2023 09:36:34 +0100 Subject: [PATCH 27/33] Fix test --- .../src/components/media-replace-flow/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/media-replace-flow/test/index.js b/packages/block-editor/src/components/media-replace-flow/test/index.js index 2be7e7372260d..cef747ce6be63 100644 --- a/packages/block-editor/src/components/media-replace-flow/test/index.js +++ b/packages/block-editor/src/components/media-replace-flow/test/index.js @@ -128,7 +128,7 @@ describe( 'General media replace flow', () => { ); const mediaURLInput = screen.getByRole( 'combobox', { - name: 'URL', + name: 'Link', expanded: false, } ); From b3cb16fb93c143b816a482b4e6ea63bb2b991ec7 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 23 Jun 2023 10:40:35 +0100 Subject: [PATCH 28/33] Fix e2e test --- test/e2e/specs/editor/blocks/navigation.spec.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 13ea27b60e77e..b5883694e192e 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -902,7 +902,7 @@ test.describe( 'Navigation block', () => { // Immediately dismiss the Link UI thereby not populating the `url` attribute // of the block. - await linkControl.pressCancel(); + await page.keyboard.press( 'Escape' ); // Get the Inspector Tabs. const blockSettings = page.getByRole( 'region', { @@ -1259,18 +1259,10 @@ class LinkControl { getSearchInput() { return this.page.getByRole( 'combobox', { - name: 'URL', + name: 'Link', } ); } - async pressCancel() { - const cancelButton = this.page.getByRole( 'button', { - name: 'Cancel', - } ); - - return cancelButton.click(); - } - async getSearchResults() { const searchInput = this.getSearchInput(); From 86898b2eafe624dfa5420af939f0ba2ab778cd25 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 23 Jun 2023 11:40:07 +0100 Subject: [PATCH 29/33] Update name of the combobox --- packages/block-editor/src/components/link-control/test/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/test/index.js b/packages/block-editor/src/components/link-control/test/index.js index 9be4a7c3d310b..82bb82a0cfc51 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -592,7 +592,7 @@ describe( 'Searching for a link', () => { render( ); // Search Input UI. - const searchInput = screen.getByRole( 'combobox', { name: 'URL' } ); + const searchInput = screen.getByRole( 'combobox', { name: 'Link' } ); // Simulate searching for a term. await user.type( searchInput, searchTerm ); From e1d499ba55453fea4b27aa4a562673b103380c7e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 23 Jun 2023 14:10:21 +0100 Subject: [PATCH 30/33] Fix test expecting Submit button on creation --- test/e2e/specs/editor/blocks/links.spec.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js index 6493b9effe8aa..06cbf88e63639 100644 --- a/test/e2e/specs/editor/blocks/links.spec.js +++ b/test/e2e/specs/editor/blocks/links.spec.js @@ -82,11 +82,7 @@ test.describe( 'Links', () => { await pageUtils.pressKeys( 'primary+k' ); await page.keyboard.type( 'w.org' ); - await page - //TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved. - .locator( '.block-editor-link-control' ) - .getByRole( 'button', { name: 'Save' } ) - .click(); + await page.keyboard.press( 'Enter' ); await expect.poll( editor.getBlocks ).toMatchObject( [ { @@ -107,7 +103,11 @@ test.describe( 'Links', () => { await page.keyboard.type( 'wordpress.org' ); // Update the link. - await page.keyboard.press( 'Enter' ); + await page + //TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved. + .locator( '.block-editor-link-control' ) + .getByRole( 'button', { name: 'Save' } ) + .click(); // Navigate back to the popover. await page.keyboard.press( 'ArrowLeft' ); From ffb04351718c343d5a88c659d1413ac49519c31c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 23 Jun 2023 14:22:57 +0100 Subject: [PATCH 31/33] Fix test by testing under edit rather than creation conditions --- test/e2e/specs/editor/blocks/links.spec.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js index 06cbf88e63639..7edd313f892ea 100644 --- a/test/e2e/specs/editor/blocks/links.spec.js +++ b/test/e2e/specs/editor/blocks/links.spec.js @@ -28,8 +28,23 @@ test.describe( 'Links', () => { // Type a URL. await page.keyboard.type( 'https://wordpress.org/gutenberg' ); + await page.keyboard.press( 'Enter' ); + + await page.keyboard.press( 'ArrowLeft' ); + await page.keyboard.press( 'ArrowLeft' ); + + // Edit link. + await page.getByRole( 'button', { name: 'Edit' } ).click(); + // Open settings. - await page.getByRole( 'button', { name: 'Link Settings' } ).click(); + await page + .getByRole( 'region', { + name: 'Editor content', + } ) + .getByRole( 'button', { + name: 'Advanced', + } ) + .click(); // Navigate to and toggle the "Open in new tab" checkbox. const checkbox = page.getByLabel( 'Open in new tab' ); From a78ba7e354e21b49e4fcdaa222218ad764e3745e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 26 Jun 2023 14:04:37 +0100 Subject: [PATCH 32/33] Rename URL to Link and avoid triggering command centre --- test/e2e/specs/editor/blocks/buttons.spec.js | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js index 8eacb7e2bed2e..d6bdcb167f9ac 100644 --- a/test/e2e/specs/editor/blocks/buttons.spec.js +++ b/test/e2e/specs/editor/blocks/buttons.spec.js @@ -10,6 +10,9 @@ test.describe( 'Buttons', () => { test( 'has focus on button content', async ( { editor, page } ) => { await editor.insertBlock( { name: 'core/buttons' } ); + await expect( + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); await page.keyboard.type( 'Content' ); // Check the content. @@ -50,9 +53,12 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/pull/19885 await editor.insertBlock( { name: 'core/buttons' } ); + await expect( + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); await pageUtils.pressKeys( 'primary+k' ); await expect( - page.locator( 'role=combobox[name="URL"i]' ) + page.locator( 'role=combobox[name="Link"i]' ) ).toBeFocused(); await page.keyboard.press( 'Escape' ); await expect( @@ -78,9 +84,12 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/issues/34307 await editor.insertBlock( { name: 'core/buttons' } ); + await expect( + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); await pageUtils.pressKeys( 'primary+k' ); await expect( - page.locator( 'role=combobox[name="URL"i]' ) + page.locator( 'role=combobox[name="Link"i]' ) ).toBeFocused(); await page.keyboard.type( 'https://example.com' ); await page.keyboard.press( 'Enter' ); @@ -107,9 +116,12 @@ test.describe( 'Buttons', () => { } ) => { // Regression: https://github.com/WordPress/gutenberg/issues/34307 await editor.insertBlock( { name: 'core/buttons' } ); + await expect( + editor.canvas.locator( 'role=textbox[name="Button text"i]' ) + ).toBeFocused(); await pageUtils.pressKeys( 'primary+k' ); - const urlInput = page.locator( 'role=combobox[name="URL"i]' ); + const urlInput = page.locator( 'role=combobox[name="Link"i]' ); await expect( urlInput ).toBeFocused(); await page.keyboard.type( 'example.com' ); From 389cb5ae7818bdf1c75be7b06783d8cd256f8c46 Mon Sep 17 00:00:00 2001 From: scruffian Date: Mon, 26 Jun 2023 18:03:28 +0100 Subject: [PATCH 33/33] move test earlier --- test/e2e/specs/editor/blocks/links.spec.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js index 7edd313f892ea..8443a04d0417e 100644 --- a/test/e2e/specs/editor/blocks/links.spec.js +++ b/test/e2e/specs/editor/blocks/links.spec.js @@ -28,6 +28,15 @@ test.describe( 'Links', () => { // Type a URL. await page.keyboard.type( 'https://wordpress.org/gutenberg' ); + // Ensure that the contents of the post have not been changed, since at + // this point the link is still not inserted. + await expect.poll( editor.getBlocks ).toMatchObject( [ + { + name: 'core/paragraph', + attributes: { content: 'This is Gutenberg' }, + }, + ] ); + await page.keyboard.press( 'Enter' ); await page.keyboard.press( 'ArrowLeft' ); @@ -54,15 +63,6 @@ test.describe( 'Links', () => { await expect( checkbox ).toBeChecked(); await expect( checkbox ).toBeFocused(); - // Ensure that the contents of the post have not been changed, since at - // this point the link is still not inserted. - await expect.poll( editor.getBlocks ).toMatchObject( [ - { - name: 'core/paragraph', - attributes: { content: 'This is Gutenberg' }, - }, - ] ); - // Tab back to the Submit and apply the link. await page //TODO: change to a better selector when https://github.com/WordPress/gutenberg/issues/51060 is resolved.