From 3a8e91287789278db809f8558714e20796c1b7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 3 May 2017 14:14:43 +0200
Subject: [PATCH] Display URL input field for changing the button href attr.

This uses the default link-modal implemented for Editable,
but displays it all the time.

Positioninig is determined by block alignment.

Position URL input to the left when button is aligned right.
---
 blocks/library/button/index.js   | 18 ++++++++++++++----
 blocks/library/button/style.scss | 11 +++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index d17a06c7e38c33..dfa919c8687651 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -4,7 +4,7 @@
 import './style.scss';
 import { registerBlock, query } from 'api';
 import Editable from 'components/editable';
-import Dashicon from '../../../editor/components/dashicon';
+import IconButton from '../../../editor/components/icon-button';
 
 const { attr, children } = query;
 
@@ -77,9 +77,19 @@ registerBlock( 'core/button', {
 					onChange={ ( value ) => setAttributes( { text: value } ) }
 				/>
 				{ focus &&
-					<a className="blocks-button__link" href={ url } target="_blank">
-						<Dashicon icon="external" />
-					</a>
+					<form
+						className="editable-format-toolbar__link-modal"
+						onSubmit={ ( event ) => event.preventDefault() }>
+						<input
+							className="editable-format-toolbar__link-input"
+							type="url"
+							required
+							value={ url }
+							onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
+							placeholder={ wp.i18n.__( 'Paste URL or type' ) }
+						/>
+						<IconButton icon="editor-break" type="submit" />
+					</form>
 				}
 			</span>
 		);
diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss
index d49db351b0c097..9c650594a4bd26 100644
--- a/blocks/library/button/style.scss
+++ b/blocks/library/button/style.scss
@@ -21,6 +21,11 @@
 	&:hover {
 		color: $white;
 	}
+
+	.editable-format-toolbar__link-modal {
+		top: -1px;
+		left: calc( 100% + 12px );
+	}
 }
 
 .blocks-button__link {
@@ -46,5 +51,11 @@
 
 	&[data-align="right"] {
 		text-align: right;
+
+		.editable-format-toolbar__link-modal {
+			top: -1px;
+			left: auto;
+			right: calc( 100% + 12px );
+		}
 	}
 }