From ee794c26866f8c6464e2206ca83e48142b74ff1a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 20 Jan 2023 16:06:18 +0800 Subject: [PATCH 1/4] Match the design by moving buttons --- .../src/components/link-control/index.js | 46 ++++++++++--------- .../src/components/link-control/style.scss | 4 +- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d6155045656f5c..d657a851bcc667 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -335,19 +335,6 @@ function LinkControl( { { errorMessage } ) } -
- - -
) } @@ -362,15 +349,32 @@ function LinkControl( { /> ) } - { showSettingsDrawer && ( -
- +
+ { showSettingsDrawer && ( +
+ +
+ ) } + +
+ +
- ) } +
+ { renderControlBottom && renderControlBottom() }
); diff --git a/packages/block-editor/src/components/link-control/style.scss b/packages/block-editor/src/components/link-control/style.scss index 51682a45c7c20b..cadb0ce6340e28 100644 --- a/packages/block-editor/src/components/link-control/style.scss +++ b/packages/block-editor/src/components/link-control/style.scss @@ -79,7 +79,6 @@ $preview-image-height: 140px; display: flex; flex-direction: row-reverse; // put "Cancel" on the left but retain DOM order. justify-content: flex-start; - margin: $grid-unit-20; // allow margin collapse for vertical spacing. gap: $grid-unit-10; } @@ -427,9 +426,10 @@ $preview-image-height: 140px; padding: 10px; } -.block-editor-link-control__tools { +.block-editor-link-control__drawer { display: flex; align-items: center; + justify-content: space-between; border-top: $border-width solid $gray-300; margin: 0; padding: $grid-unit-20; From 0c05d014c54f6b94b8cbc339ae305442e33f0de8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Sat, 21 Jan 2023 09:53:57 +0800 Subject: [PATCH 2/4] Update test to match new tab order --- packages/e2e-tests/specs/editor/various/links.test.js | 5 +---- 1 file changed, 1 insertion(+), 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 44018bae3226ff..b1ad6d2394ffb5 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -121,8 +121,6 @@ describe( 'Links', () => { // Navigate to and toggle the "Open in new tab" checkbox. await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' ); // Toggle should still have focus and be checked. @@ -135,8 +133,7 @@ describe( 'Links', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); // Tab back to the Submit and apply the link. - await pressKeyWithModifier( 'shift', 'Tab' ); - await pressKeyWithModifier( 'shift', 'Tab' ); + await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Enter' ); // The link should have been inserted. From 4b1ab14134942712c824492cdad8eb2dcc08d66d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Sat, 21 Jan 2023 09:56:57 +0800 Subject: [PATCH 3/4] Update another e2e test to match new tab order --- packages/e2e-tests/specs/editor/various/links.test.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index b1ad6d2394ffb5..7d0ef19fedc8ba 100644 --- a/packages/e2e-tests/specs/editor/various/links.test.js +++ b/packages/e2e-tests/specs/editor/various/links.test.js @@ -526,8 +526,6 @@ describe( 'Links', () => { // Navigate to and toggle the "Open in new tab" checkbox. await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Space' ); // Confirm that focus was not prematurely returned to the paragraph on @@ -536,7 +534,8 @@ describe( 'Links', () => { // Close dialog. Expect that "Open in new tab" would have been applied // immediately. - await page.keyboard.press( 'Tab' ); + + await pressKeyWithModifier( 'shift', 'Tab' ); await page.keyboard.press( 'Enter' ); // Wait for Gutenberg to finish the job. From 6bf975b13796c3707bc0c97a901f78b20e8ccbe5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Sat, 21 Jan 2023 10:17:24 +0800 Subject: [PATCH 4/4] Hide action buttons when not in editing mode --- .../src/components/link-control/index.js | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d657a851bcc667..73e2f6bb8e0e1d 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -274,6 +274,7 @@ function LinkControl( { // See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927. const showTextControl = hasLinkValue && hasTextControl; + const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage; return (
) } - { ( isEditingLink || ! value ) && ! isCreatingPage && ( + { isEditing && ( <>
) } -
- - -
+ { isEditing && ( +
+ + +
+ ) }
{ renderControlBottom && renderControlBottom() }