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

@@ -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>
 		);

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 );
+		}
 	}
 }