Button block: hide link popover if not in visual edit mode

packages/block-library/src/button/edit.js

@@ -39,7 +39,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
-import { link, linkOff } from '@wordpress/icons';
+import { link } from '@wordpress/icons';
 import {
 	createBlock,
 	cloneBlock,
@@ -310,66 +310,54 @@ function ButtonEdit( props ) {
 						} }
 					/>
 				) }
-				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
+				{ isLinkTag && ! lockUrlControls && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ startEditing }
-					/>
-				) }
-				{ isURLSet && isLinkTag && ! lockUrlControls && (
-					<ToolbarButton
-						name="link"
-						icon={ linkOff }
-						title={ __( 'Unlink' ) }
-						shortcut={ displayShortcut.primaryShift( 'k' ) }
-						onClick={ unlink }
-						isActive
+						onClick={ () => setIsEditingURL( ! isEditingURL ) }
+						isActive={ isURLSet }
 					/>
 				) }
 			</BlockControls>
-			{ isLinkTag &&
-				isSelected &&
-				( isEditingURL || isURLSet ) &&
-				! lockUrlControls && (
-					<Popover
-						placement="bottom"
-						onClose={ () => {
-							setIsEditingURL( false );
+			{ isLinkTag && isSelected && isEditingURL && ! lockUrlControls && (
+				<Popover
+					placement="bottom"
+					onClose={ () => {
+						setIsEditingURL( false );
+						richTextRef.current?.focus();
+					} }
+					anchor={ popoverAnchor }
+					focusOnMount={ isEditingURL ? 'firstElement' : false }
+					__unstableSlotName="__unstable-block-tools-after"
+					shift
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( {
+							url: newURL,
+							opensInNewTab: newOpensInNewTab,
+							nofollow: newNofollow,
+						} ) =>
+							setAttributes(
+								getUpdatedLinkAttributes( {
+									rel,
+									url: newURL,
+									opensInNewTab: newOpensInNewTab,
+									nofollow: newNofollow,
+								} )
+							)
+						}
+						onRemove={ () => {
+							unlink();
 							richTextRef.current?.focus();
 						} }
-						anchor={ popoverAnchor }
-						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName="__unstable-block-tools-after"
-						shift
-					>
-						<LinkControl
-							value={ linkValue }
-							onChange={ ( {
-								url: newURL,
-								opensInNewTab: newOpensInNewTab,
-								nofollow: newNofollow,
-							} ) =>
-								setAttributes(
-									getUpdatedLinkAttributes( {
-										rel,
-										url: newURL,
-										opensInNewTab: newOpensInNewTab,
-										nofollow: newNofollow,
-									} )
-								)
-							}
-							onRemove={ () => {
-								unlink();
-								richTextRef.current?.focus();
-							} }
-							forceIsEditingLink={ isEditingURL }
-							settings={ LINK_SETTINGS }
-						/>
-					</Popover>
-				) }
+						forceIsEditingLink={ ! isURLSet }
+						settings={ LINK_SETTINGS }
+					/>
+				</Popover>
+			) }
 			<InspectorControls>
 				<WidthPanel
 					selectedWidth={ width }

test/e2e/specs/editor/blocks/buttons.spec.js

@@ -104,11 +104,6 @@ test.describe( 'Buttons', () => {
 		await expect(
 			editor.canvas.locator( 'role=textbox[name="Button text"i]' )
 		).toBeFocused();
-
-		// The link control should still be visible when a URL is set.
-		await expect(
-			page.locator( 'role=link[name=/^example\\.com/]' )
-		).toBeVisible();
 	} );
 
 	test( 'appends http protocol to links added which are missing a protocol', async ( {

test/e2e/specs/editor/various/pattern-overrides.spec.js

@@ -320,6 +320,7 @@
 		requestUtils,
 		editor,
 		context,
+		pageUtils,
 	} ) => {
 		const buttonName = 'Editable button';
 		const { id } = await requestUtils.createBlock( {
@@ -339,14 +340,15 @@
 			attributes: { ref: id },
 		} );
 
-		// Focus the button, open the link popup.
-		await editor.canvas
+		const button = editor.canvas
 			.getByRole( 'document', { name: 'Block: Button' } )
-			.getByRole( 'textbox', { name: 'Button text' } )
-			.focus();
+			.getByRole( 'textbox', { name: 'Button text' } );
+		// Focus the button, open the link popup.
+		await button.focus();
+		await pageUtils.pressKeys( 'Meta+k' );
 		await expect(
 			page.getByRole( 'link', { name: 'wp.org' } ).getByText( '↗' )
 		).toHaveAttribute( 'aria-label', '(opens in a new tab)' );
 
 		// The link popup doesn't have a role which is a bit unfortunate.
 		// These are the buttons in the link popup.
@@ -395,6 +397,10 @@
 			'noreferrer noopener'
 		);
 
+		// Reopen the link popup.
+		await button.focus();
+		await pageUtils.pressKeys( 'Meta+k' );
+
 		// Uncheck both checkboxes.
 		await editLinkButton.click();
 		await openInNewTabCheckbox.setChecked( false );
@@ -411,6 +417,10 @@
 		await expect( buttonLink ).toHaveAttribute( 'target', '' );
 		await expect( buttonLink ).toHaveAttribute( 'rel', '' );
 
+		// Reopen the link popup.
+		await button.focus();
+		await pageUtils.pressKeys( 'Meta+k' );
+
 		// Check only the "mark as nofollow" checkbox.
 		await editLinkButton.click();
 		await markAsNoFollowCheckbox.setChecked( true );