Update Link UI design for preview action buttons to use icons for edi…

…t and unlink (#35833) * Add unlink and edit buttons in icon form * Use a11y means to selecting Edit button * Fix e2e tests by targetting aria label
WordPress · Oct 25, 2021 · cec3b9b · cec3b9b
1 parent 0f08b2e
commit cec3b9b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 23 deletions.
diff --git 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 && (
 				<div className="block-editor-link-control__tools">
 					<LinkControlSettingsDrawer
 						value={ value }
 						settings={ settings }
 						onChange={ onChange }
 					/>
-					{ shownUnlinkControl && (
-						<Button
-							className="block-editor-link-control__unlink"
-							isDestructive
-							variant="link"
-							onClick={ onRemove }
-						>
-							{ __( 'Unlink' ) }
-						</Button>
-					) }
 				</div>
 			) }
 		</div>

diff --git 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( {
 				</span>
 
 				<Button
-					variant="secondary"
-					onClick={ () => onEditClick() }
+					icon={ edit }
+					label={ __( 'Edit' ) }
 					className="block-editor-link-control__search-item-action"
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					onClick={ onEditClick }
+					iconSize={ 24 }
+				/>
+				{ hasUnlinkControl && (
+					<Button
+						icon={ linkOff }
+						label={ __( 'Unlink' ) }
+						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
+						onClick={ onRemove }
+						iconSize={ 24 }
+					/>
+				) }
 				<ViewerSlot fillProps={ value } />
 			</div>
 

diff --git 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
@@ -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
@@ -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' );