From 5288ac22069a64d79438660b71e344260e738377 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 10 Nov 2017 14:58:54 +0100 Subject: [PATCH 1/3] 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 | 25 +++++++++++++++++++++++ blocks/library/button/index.js | 25 ++++++++++++----------- blocks/library/button/style.scss | 13 +++++------- 3 files changed, 43 insertions(+), 20 deletions(-) diff --git a/blocks/editable/format-toolbar/style.scss b/blocks/editable/format-toolbar/style.scss index e6a80a1f27594..c98c24d3719f2 100644 --- a/blocks/editable/format-toolbar/style.scss +++ b/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; diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js index 0d20661df9b29..80adb66d1f9a5 100644 --- 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 && -
event.preventDefault() }> - setAttributes( { url: value } ) } - /> - - - } { focus && @@ -130,6 +119,18 @@ registerBlockType( 'core/button', { } , + focus && ( +
event.preventDefault() }> + + setAttributes( { url: value } ) } + /> + + + ) ]; }, diff --git a/blocks/library/button/style.scss b/blocks/library/button/style.scss index d15e984118e65..3e5f72b55a63e 100644 --- a/blocks/library/button/style.scss +++ b/blocks/library/button/style.scss @@ -1,10 +1,8 @@ $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; @@ -12,11 +10,14 @@ $blocks-button__height: 46px; 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; @@ -24,10 +25,6 @@ $blocks-button__height: 46px; text-decoration: none !important; } - &:hover { - color: $white; - } - &.aligncenter { display: inline-block; } From 0dd0a55866ead82a28313cb02b330865182b1af7 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 13 Nov 2017 09:49:09 +0100 Subject: [PATCH 2/3] Address feedback - Move to button-specific class - Align url to match button alignment - Fix input field overlap --- blocks/editable/format-toolbar/style.scss | 25 ----------------- blocks/library/button/editor.scss | 33 +++++++++++++++++++++++ blocks/library/button/index.js | 2 +- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/blocks/editable/format-toolbar/style.scss b/blocks/editable/format-toolbar/style.scss index c98c24d3719f2..e6a80a1f27594 100644 --- a/blocks/editable/format-toolbar/style.scss +++ b/blocks/editable/format-toolbar/style.scss @@ -21,31 +21,6 @@ } } -.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; diff --git a/blocks/library/button/editor.scss b/blocks/library/button/editor.scss index 2dda2a862b102..1a7551cee2194 100644 --- 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 index 80adb66d1f9a5..a51dc73065d0c 100644 --- a/blocks/library/button/index.js +++ b/blocks/library/button/index.js @@ -121,7 +121,7 @@ registerBlockType( 'core/button', { , focus && (
event.preventDefault() }> Date: Mon, 13 Nov 2017 09:50:21 +0100 Subject: [PATCH 3/3] Fix linting issue --- blocks/library/button/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js index a51dc73065d0c..666e244d4e062 100644 --- a/blocks/library/button/index.js +++ b/blocks/library/button/index.js @@ -130,7 +130,7 @@ registerBlockType( 'core/button', { /> - ) + ), ]; },