From d03c51cb5938f2634016ce4e2151ad9fd5d2e08e Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 2 Jan 2020 18:34:36 +0000
Subject: [PATCH] Make UX closer to navigation block

---
 packages/block-library/src/button/edit.js | 49 ++++++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index d1192014f0b358..fbf2510a06bed6 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -10,18 +10,24 @@ import { escape } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import {
 	useCallback,
+	useEffect,
+	useState,
 } from '@wordpress/element';
 import {
 	compose,
 } from '@wordpress/compose';
 import {
+	KeyboardShortcuts,
 	PanelBody,
 	RangeControl,
 	TextControl,
 	ToggleControl,
 	withFallbackStyles,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import {
+	BlockControls,
 	__experimentalUseGradient,
 	ContrastChecker,
 	InspectorControls,
@@ -37,6 +43,8 @@ import {
 	DOWN,
 	BACKSPACE,
 	ENTER,
+	rawShortcut,
+	displayShortcut,
 } from '@wordpress/keycodes';
 
 const { getComputedStyle } = window;
@@ -94,7 +102,19 @@ const handleLinkControlOnKeyPress = ( event ) => {
 };
 
 function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onToggleOpenInNewTab } ) {
-	return isSelected ? (
+	const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
+	useEffect(
+		() => {
+			if ( ! isSelected ) {
+				setIsURLPickerOpen( false );
+			}
+		},
+		[ isSelected ]
+	);
+	const openLinkControl = () => {
+		setIsURLPickerOpen( true );
+	};
+	const linkControl = isURLPickerOpen && (
 		<LinkControl
 			className="wp-block-navigation-link__inline-link-input"
 			onKeyDown={ handleLinkControlOnKeyDown }
@@ -118,8 +138,33 @@ function URLPicker( { isSelected, url, title, setAttributes, opensInNewTab, onTo
 					onToggleOpenInNewTab( value );
 				}
 			} }
+			onClose={ () => {
+				setIsURLPickerOpen( false );
+			} }
 		/>
-	) : null;
+	);
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<KeyboardShortcuts
+						bindGlobal
+						shortcuts={ {
+							[ rawShortcut.primary( 'k' ) ]: openLinkControl,
+						} }
+					/>
+					<ToolbarButton
+						name="link"
+						icon="admin-links"
+						title={ __( 'Link' ) }
+						shortcut={ displayShortcut.primary( 'k' ) }
+						onClick={ openLinkControl }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ linkControl }
+		</>
+	);
 }
 
 function ButtonEdit( {