Polish the button

This fixes #3283.

This is a redesign of the button block to be more neutral looking. In addition to this, it makes the URL aspect inline, so it behaves just like how a caption does on an image.

blocks/editable/format-toolbar/style.scss

@@ -21,6 +21,31 @@
 	}
 }
 
+.blocks-format-toolbar__inline-link-modal {
+	background: #fff;
+	width: 305px;
+	display: flex;
+	margin-left: auto;
+	margin-right: auto;
+	flex-wrap: wrap;
+	align-items: center;
+	font-family: $default-font;
+	font-size: $default-font-size;
+	line-height: $default-line-height;
+
+	.blocks-url-input {
+		width: auto;
+	}
+
+	.dashicon {
+		color: $dark-gray-100;
+	}
+
+	.blocks-url-input input[type=text]::placeholder {
+		color: $dark-gray-100;
+	}
+}
+
 .blocks-format-toolbar__link-value {
 	padding: 10px;
 	flex-grow: 1;

blocks/library/button/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { IconButton, PanelBody } from '@wordpress/components';
+import { Dashicon, IconButton, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -93,17 +93,6 @@ registerBlockType( 'core/button', {
 					} }
 					keepPlaceholderOnFocus
 				/>
-				{ focus &&
-					<form
-						className="blocks-format-toolbar__link-modal"
-						onSubmit={ ( event ) => event.preventDefault() }>
-						<UrlInput
-							value={ url }
-							onChange={ ( value ) => setAttributes( { url: value } ) }
-						/>
-						<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
-					</form>
-				}
 				{ focus &&
 					<InspectorControls key="inspector">
 						<BlockDescription>
@@ -130,6 +119,18 @@ registerBlockType( 'core/button', {
 					</InspectorControls>
 				}
 			</span>,
+			focus && (
+				<form
+					className="blocks-format-toolbar__inline-link-modal"
+					onSubmit={ ( event ) => event.preventDefault() }>
+					<Dashicon icon="admin-links" />
+					<UrlInput
+						value={ url }
+						onChange={ ( value ) => setAttributes( { url: value } ) }
+					/>
+					<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
+				</form>
+			)
 		];
 	},
 

blocks/library/button/style.scss

@@ -1,33 +1,30 @@
 $blocks-button__height: 46px;
 
 .wp-block-button {
-	font-family: $default-font;
 	display: inline-block;
 	text-decoration: none;
-	font-size: $big-font-size;
 	margin: 0;
 	padding: 0 24px;
 	height: $blocks-button__height;
 	line-height: $blocks-button__height;
 	cursor: default;
 	border-radius: $blocks-button__height / 2;
 	white-space: nowrap;
-	background: $blue-medium-400;
-	color: $white;
+	background: currentColor;
 	vertical-align: top;
 	position: relative;
 
+	> div {
+		color: $white;
+	}
+
 	a {
 		box-shadow: none !important;
 		color: $white;
 		cursor: pointer;
 		text-decoration: none !important;
 	}
 
-	&:hover {
-		color: $white;
-	}
-
 	&.aligncenter {
 		display: inline-block;
 	}