diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index d6155045656f5c..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 && ( <>
) } -
- - -
) } @@ -362,15 +350,34 @@ function LinkControl( { /> ) } - { showSettingsDrawer && ( -
- -
- ) } +
+ { showSettingsDrawer && ( +
+ +
+ ) } + + { isEditing && ( +
+ + +
+ ) } +
+ { 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; diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js index 44018bae3226ff..7d0ef19fedc8ba 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. @@ -529,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 @@ -539,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.