diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js
index 5d6ab1fd512348..86bc0f8e004512 100644
--- a/packages/block-editor/src/components/link-control/index.js
+++ b/packages/block-editor/src/components/link-control/index.js
@@ -270,26 +270,18 @@ function LinkControl( {
value={ value }
onEditClick={ () => setIsEditingLink( true ) }
hasRichPreviews={ hasRichPreviews }
+ hasUnlinkControl={ shownUnlinkControl }
+ onRemove={ onRemove }
/>
) }
- { ( showSettingsDrawer || shownUnlinkControl ) && (
+ { showSettingsDrawer && (
- { shownUnlinkControl && (
-
- ) }
) }
diff --git a/packages/block-editor/src/components/link-control/link-preview.js b/packages/block-editor/src/components/link-control/link-preview.js
index 225836d61be415..a1c85f51d9894c 100644
--- a/packages/block-editor/src/components/link-control/link-preview.js
+++ b/packages/block-editor/src/components/link-control/link-preview.js
@@ -13,7 +13,7 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
/**
* Internal dependencies
@@ -26,6 +26,8 @@ export default function LinkPreview( {
value,
onEditClick,
hasRichPreviews = false,
+ hasUnlinkControl = false,
+ onRemove,
} ) {
// Avoid fetching if rich previews are not desired.
const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -102,12 +104,21 @@ export default function LinkPreview( {
+ onClick={ onEditClick }
+ iconSize={ 24 }
+ />
+ { hasUnlinkControl && (
+
+ ) }
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 95717918497130..895e182e2f82e6 100644
--- a/packages/block-editor/src/components/link-control/test/index.js
+++ b/packages/block-editor/src/components/link-control/test/index.js
@@ -202,9 +202,9 @@ describe( 'Basic rendering', () => {
} );
// Click the "Edit" button to trigger into the editing mode.
- const editButton = Array.from(
- container.querySelectorAll( 'button' )
- ).find( ( button ) => button.innerHTML.includes( 'Edit' ) );
+ const editButton = queryByRole( container, 'button', {
+ name: 'Edit',
+ } );
act( () => {
Simulate.click( editButton );
diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js
index 3aed0fcb3310e3..beffb1cc560307 100644
--- a/packages/e2e-tests/specs/editor/blocks/image.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/image.test.js
@@ -330,7 +330,11 @@ describe( 'Image', () => {
// Replace uploaded image with an URL.
await clickButton( 'Replace' );
- await clickButton( 'Edit' );
+
+ const [ editButton ] = await page.$x(
+ '//button[contains(@aria-label, "Edit")]'
+ );
+ await editButton.click();
await page.waitForSelector( '.block-editor-url-input__input' );
await page.evaluate(
diff --git a/packages/e2e-tests/specs/editor/various/links.test.js b/packages/e2e-tests/specs/editor/various/links.test.js
index 1be82dab150345..a1ae28f7937573 100644
--- a/packages/e2e-tests/specs/editor/various/links.test.js
+++ b/packages/e2e-tests/specs/editor/various/links.test.js
@@ -234,7 +234,9 @@ describe( 'Links', () => {
await createAndReselectLink();
// Click on the Edit button
- const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
+ const [ editButton ] = await page.$x(
+ '//button[contains(@aria-label, "Edit")]'
+ );
await editButton.click();
// Wait for the URL field to auto-focus
@@ -329,7 +331,9 @@ describe( 'Links', () => {
await page.keyboard.press( 'ArrowLeft' );
await page.keyboard.press( 'ArrowRight' );
await showBlockToolbar();
- const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
+ const [ editButton ] = await page.$x(
+ '//button[contains(@aria-label, "Edit")]'
+ );
await editButton.click();
await waitForAutoFocus();
await page.keyboard.type( '/handbook' );