Merge pull request #3427 from WordPress/polish/button

Polish the button
WordPress · Nov 13, 2017 · 67a3a63 · 67a3a63
2 parents 0d0caf1 + 34f3f4e
commit 67a3a63
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss
@@ -26,3 +26,36 @@ $blocks-button__height: 46px;
 		cursor: text;
 	}
 }
+
+.blocks-button__inline-link {
+	background: #fff;
+	width: 280px;
+	display: flex;
+	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;
+	}
+
+	[data-align="center"] & {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	[data-align="right"] & {
+		margin-left: auto;
+		margin-right: 0;
+	}
+}
diff --git a/blocks/library/button/index.js b/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-button__inline-link"
+					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>
+			),
 		];
 	},
 

diff --git a/blocks/library/button/style.scss b/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;
 	}