From 849290da89ee9006b35fffb0d698f09d412dde1d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Sat, 21 Jan 2023 15:39:50 +0800 Subject: [PATCH 01/23] Add basic panel toggle --- .../src/components/link-control/index.js | 14 ++++---- .../link-control/settings-drawer.js | 34 +++++++++++++++---- .../src/components/link-control/style.scss | 2 +- 3 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 73e2f6bb8e0e1d..9043b5ec85b438 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -350,15 +350,13 @@ function LinkControl( { /> ) } -
+
{ showSettingsDrawer && ( -
- -
+ ) } { isEditing && ( 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 4b9d0d7f7419e7..6e0092b13783d0 100644 --- a/packages/block-editor/src/components/link-control/settings-drawer.js +++ b/packages/block-editor/src/components/link-control/settings-drawer.js @@ -2,11 +2,15 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { ToggleControl, VisuallyHidden } from '@wordpress/components'; +import { Button, ToggleControl, VisuallyHidden } from '@wordpress/components'; +import { settings as settingsIcon } from '@wordpress/icons'; +import { useState } from '@wordpress/element'; const noop = () => {}; const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => { + const [ isOpen, setIsOpen ] = useState( false ); + if ( ! settings || ! settings.length ) { return null; } @@ -29,12 +33,28 @@ const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => { ) ); return ( -
- - { __( 'Currently selected link settings' ) } - - { theSettings } -
+ <> +
- + ) } - + ) } From cdd293bd3ae111e92e62862e8127f17889bc74bc Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 3 Feb 2023 14:11:26 +0000 Subject: [PATCH 10/23] Force no animations in component tests --- .../src/components/link-control/test/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) 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 3133f8e075d4f0..98f7cb95343f40 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -53,6 +53,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( { jest.useRealTimers(); +jest.mock( '@wordpress/compose', () => ( { + ...jest.requireActual( '@wordpress/compose' ), + useReducedMotion: jest.fn( () => true ), +} ) ); + beforeEach( () => { // Setup a DOM element as a render target. mockFetchSearchSuggestions.mockImplementation( fetchFauxEntitySuggestions ); @@ -789,6 +794,8 @@ describe( 'Manual link entry', () => { await user.click( editButton ); + await toggleSettingsDrawer( user ); + let searchInput = screen.getByRole( 'combobox', { name: 'URL', } ); @@ -821,6 +828,8 @@ describe( 'Manual link entry', () => { await user.click( editButton ); + await toggleSettingsDrawer( user ); + // Re-query the inputs as they have been replaced. searchInput = screen.getByRole( 'combobox', { name: 'URL', @@ -2152,3 +2161,11 @@ describe( 'Controlling link title text', () => { ).not.toBeInTheDocument(); } ); } ); + +async function toggleSettingsDrawer( user ) { + const settingsToggle = screen.queryByRole( 'button', { + name: 'Toggle link settings', + } ); + + await user.click( settingsToggle ); +} From 21facf6386a9401889f52d3d1fd6a08e37cb51f4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 3 Feb 2023 14:16:58 +0000 Subject: [PATCH 11/23] Fix text input tests broken due to move into settings drawer --- .../src/components/link-control/test/index.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) 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 98f7cb95343f40..728b7ef822b97d 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -2056,6 +2056,10 @@ describe( 'Controlling link title text', () => { /> ); + const user = userEvent.setup(); + + await toggleSettingsDrawer( user ); + expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toBeVisible(); @@ -2082,6 +2086,10 @@ describe( 'Controlling link title text', () => { /> ); + const user = userEvent.setup(); + + await toggleSettingsDrawer( user ); + const textInput = screen.queryByRole( 'textbox', { name: 'Text', } ); @@ -2104,6 +2112,8 @@ describe( 'Controlling link title text', () => { /> ); + await toggleSettingsDrawer( user ); + const textInput = screen.queryByRole( 'textbox', { name: 'Text' } ); await user.clear( textInput ); @@ -2138,6 +2148,8 @@ describe( 'Controlling link title text', () => { /> ); + await toggleSettingsDrawer( user ); + const textInput = screen.queryByRole( 'textbox', { name: 'Text' } ); expect( textInput ).toBeVisible(); From 526ec3e878d4f1ec533f76043f0385e8edb4711e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 3 Feb 2023 14:18:51 +0000 Subject: [PATCH 12/23] Fix remaining tests broken by settings drawer --- .../src/components/link-control/test/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) 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 728b7ef822b97d..6c690a887578ec 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -1670,6 +1670,10 @@ describe( 'Addition Settings UI', () => { render( ); + const user = userEvent.setup(); + + await toggleSettingsDrawer( user ); + const newTabSettingLabel = screen.getByText( expectedSettingText ); expect( newTabSettingLabel ).toBeVisible(); @@ -1708,6 +1712,10 @@ describe( 'Addition Settings UI', () => { render( ); + const user = userEvent.setup(); + + await toggleSettingsDrawer( user ); + expect( screen.queryAllByRole( 'checkbox' ) ).toHaveLength( 2 ); expect( From 176461b46594c152858122274a51c34b760aeec0 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 3 Feb 2023 14:25:07 +0000 Subject: [PATCH 13/23] speed up animation --- packages/block-editor/src/components/link-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index cf95b7e7a24448..2b69369015b764 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -379,7 +379,7 @@ function LinkControl( { collapsed: { opacity: 0, height: 0 }, } } transition={ { - duration: 0.2, + duration: 0.1, } } >
From d08033663dba2228a0e79ed2cf0f0403e0103122 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 3 Feb 2023 14:35:09 +0000 Subject: [PATCH 14/23] Move drawer to dedicated component --- .../src/components/link-control/index.js | 83 +++---------- .../link-control/settings-drawer.js | 111 +++++++++++++----- .../src/components/link-control/settings.js | 41 +++++++ 3 files changed, 137 insertions(+), 98 deletions(-) create mode 100644 packages/block-editor/src/components/link-control/settings.js diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index 2b69369015b764..2735838312473e 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -6,20 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { - Button, - Spinner, - Notice, - TextControl, - __unstableMotion as motion, - __unstableAnimatePresence as AnimatePresence, -} from '@wordpress/components'; -import { useReducedMotion } from '@wordpress/compose'; +import { Button, Spinner, Notice } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useRef, useState, useEffect } from '@wordpress/element'; import { focus } from '@wordpress/dom'; import { ENTER } from '@wordpress/keycodes'; -import { settings as settingsIcon } from '@wordpress/icons'; /** * Internal dependencies @@ -145,10 +136,6 @@ function LinkControl( { const textInputRef = useRef(); const isEndingEditWithFocus = useRef( false ); - const prefersReducedMotion = useReducedMotion(); - const MaybeAnimatePresence = prefersReducedMotion ? 'div' : AnimatePresence; - const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div; - const [ settingsOpen, setSettingsOpen ] = useState( false ); const [ internalUrlInputValue, setInternalUrlInputValue ] = @@ -291,6 +278,7 @@ function LinkControl( { const showTextControl = hasLinkValue && hasTextControl; const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; + return (
{ ( showSettings || showTextControl ) && ( - <> -
- ) } -
+
+ ) } { renderControlBottom && renderControlBottom() } From 8fe8bb9771649d45e6be42f05cb96d1cf465803a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 6 Feb 2023 06:30:22 +0000 Subject: [PATCH 19/23] Add test for link settings toggle not being displayed unless editing --- .../src/components/link-control/test/index.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 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 89f6559d65bdbe..e030e6cce5ca3f 100644 --- a/packages/block-editor/src/components/link-control/test/index.js +++ b/packages/block-editor/src/components/link-control/test/index.js @@ -1658,7 +1658,7 @@ describe( 'Selecting links', () => { } ); describe( 'Addition Settings UI', () => { - it( 'should provides a means to toggle the link settings', async () => { + it( 'should not show a means to toggle the link settings when not editing a link', async () => { const selectedLink = fauxEntitySuggestions[ 0 ]; const LinkControlConsumer = () => { @@ -1669,6 +1669,24 @@ describe( 'Addition Settings UI', () => { render( ); + const settingsToggle = screen.queryByRole( 'button', { + name: 'Toggle link settings', + ariaControls: 'link-settings-1', + } ); + + expect( settingsToggle ).not.toBeInTheDocument(); + } ); + it( 'should provides a means to toggle the link settings', async () => { + const selectedLink = fauxEntitySuggestions[ 0 ]; + + const LinkControlConsumer = () => { + const [ link ] = useState( selectedLink ); + + return ; + }; + + render( ); + const user = userEvent.setup(); const settingsToggle = screen.queryByRole( 'button', { @@ -1703,7 +1721,7 @@ describe( 'Addition Settings UI', () => { const LinkControlConsumer = () => { const [ link ] = useState( selectedLink ); - return ; + return ; }; render( ); @@ -1744,6 +1762,7 @@ describe( 'Addition Settings UI', () => { ); }; From 5800d01207aed841a5187f41ef0b5a10b5f8bad5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 6 Feb 2023 06:57:20 +0000 Subject: [PATCH 20/23] Fix e2e tests due to change of text input location --- .../specs/editor/various/links.test.js | 45 ++++++++++++++----- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 9ffbd6aa041ca7..ed3baa1b3ee385 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -8,6 +8,7 @@ import { createNewPost, pressKeyWithModifier, showBlockToolbar, + pressKeyTimes, } from '@wordpress/e2e-test-utils'; describe( 'Links', () => { @@ -596,8 +597,10 @@ describe( 'Links', () => { // Press Cmd+K to insert a link. await pressKeyWithModifier( 'primary', 'K' ); - // Wait for the URL field to auto-focus. - await waitForURLFieldAutoFocus(); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); const textInput = await page .waitForXPath( @@ -624,11 +627,17 @@ describe( 'Links', () => { '//button[contains(@aria-label, "Edit")]' ); await editButton.click(); + await waitForURLFieldAutoFocus(); - await pressKeyWithModifier( 'shift', 'Tab' ); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); - // Tabbing back should land us in the text input. + await page.keyboard.press( 'Tab' ); + + // Tabbing should land us in the text input. const { isTextInput, textValue } = await page.evaluate( () => { const el = document.activeElement; @@ -685,7 +694,12 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); - await pressKeyWithModifier( 'shift', 'Tab' ); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); + + await page.keyboard.press( 'Tab' ); // Tabbing back should land us in the text input. const textInputValue = await page.evaluate( @@ -715,9 +729,14 @@ describe( 'Links', () => { await editButton.click(); await waitForURLFieldAutoFocus(); - await pressKeyWithModifier( 'shift', 'Tab' ); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); - // Tabbing back should land us in the text input. + await page.keyboard.press( 'Tab' ); + + // Tabbing should land us in the text input. const textInputValue = await page.evaluate( () => document.activeElement.value ); @@ -761,11 +780,13 @@ describe( 'Links', () => { await editButton.click(); await waitForURLFieldAutoFocus(); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); + // Move focus back to RichText for the underlying link. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); + await pressKeyTimes( 'Tab', 5 ); // Make a selection within the RichText. await pressKeyWithModifier( 'shift', 'ArrowRight' ); @@ -773,7 +794,7 @@ describe( 'Links', () => { await pressKeyWithModifier( 'shift', 'ArrowRight' ); // Move back to the text input. - await page.keyboard.press( 'Tab' ); + await pressKeyTimes( 'Tab', 3 ); // Tabbing back should land us in the text input. const textInputValue = await page.evaluate( From 227b97060acb99dbc8003b255216608d06a10b95 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 6 Feb 2023 07:16:21 +0000 Subject: [PATCH 21/23] Fix more e2e tests --- .../e2e-tests/specs/editor/various/links.test.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index ed3baa1b3ee385..b9e5612159d612 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -120,8 +120,13 @@ describe( 'Links', () => { // Type a URL. await page.keyboard.type( 'https://wordpress.org/gutenberg' ); + const [ settingsToggle ] = await page.$x( + '//button[contains(@aria-label, "Toggle link settings")]' + ); + await settingsToggle.click(); + // Navigate to and toggle the "Open in new tab" checkbox. - await page.keyboard.press( 'Tab' ); + await pressKeyTimes( 'Tab', 2 ); await page.keyboard.press( 'Space' ); // Toggle should still have focus and be checked. @@ -525,6 +530,10 @@ describe( 'Links', () => { await waitForURLFieldAutoFocus(); await page.keyboard.type( 'w.org' ); + // Toggle link settings open + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Space' ); + // Navigate to and toggle the "Open in new tab" checkbox. await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' ); @@ -533,10 +542,9 @@ describe( 'Links', () => { // a changing value of the setting. await page.waitForSelector( ':focus.components-form-toggle__input' ); - // Close dialog. Expect that "Open in new tab" would have been applied + // Submit link. 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. From a88a3a9deefe8e530f3d9d5d6618eb20adeb71a8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 6 Feb 2023 08:49:33 +0000 Subject: [PATCH 22/23] Fix final e2e test --- packages/e2e-tests/specs/editor/various/links.test.js | 9 ++++----- 1 file changed, 4 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 b9e5612159d612..33f20385f7b231 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -120,13 +120,12 @@ describe( 'Links', () => { // Type a URL. await page.keyboard.type( 'https://wordpress.org/gutenberg' ); - const [ settingsToggle ] = await page.$x( - '//button[contains(@aria-label, "Toggle link settings")]' - ); - await settingsToggle.click(); + // Open settings. + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Space' ); // Navigate to and toggle the "Open in new tab" checkbox. - await pressKeyTimes( 'Tab', 2 ); + await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' ); // Toggle should still have focus and be checked. From c12640577a1138fbf6f5d6de839ee8cda713ebc9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 6 Feb 2023 12:23:28 +0000 Subject: [PATCH 23/23] Fix e2e test that arrived following rebase --- packages/e2e-tests/specs/editor/various/links.test.js | 8 +++++++- 1 file changed, 7 insertions(+), 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 33f20385f7b231..6d60631984e35f 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -999,8 +999,14 @@ describe( 'Links', () => { await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Enter' ); + await waitForURLFieldAutoFocus(); + + // Toggle link settings open + await page.keyboard.press( 'Tab' ); + await page.keyboard.press( 'Space' ); + // Move to Link Text field. - await pressKeyWithModifier( 'shift', 'Tab' ); + await page.keyboard.press( 'Tab' ); // Change text to "z" await page.keyboard.type( 'z' );