From 51caf6d8cdc5238ba9d5be4ce44afb99eb8d180b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 18 Apr 2017 14:23:18 +0100 Subject: [PATCH 1/4] Components: Fix the icon button level prop --- blocks/library/heading/index.js | 4 ++-- editor/components/icon-button/index.js | 5 +++-- editor/components/toolbar/index.js | 5 ++--- languages/gutenberg.pot | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js index 92780d1934ba3..512c197e0c999 100644 --- a/blocks/library/heading/index.js +++ b/blocks/library/heading/index.js @@ -22,12 +22,12 @@ registerBlock( 'core/heading', { controls: [ ...'123456'.split( '' ).map( ( level ) => ( { icon: 'heading', - text: level, title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ), isActive: ( { tag } ) => 'H' + level === tag, onClick( attributes, setAttributes ) { setAttributes( { tag: 'H' + level } ); - } + }, + level } ) ) ], diff --git a/editor/components/icon-button/index.js b/editor/components/icon-button/index.js index 8ec2606098f30..5c9936ca81ef5 100644 --- a/editor/components/icon-button/index.js +++ b/editor/components/icon-button/index.js @@ -10,12 +10,13 @@ import './style.scss'; import Button from '../button'; import Dashicon from '../dashicon'; -function IconButton( { icon, children, label, className, ...additionalProps } ) { +function IconButton( { icon, level, children, label, className, ...additionalProps } ) { const classes = classnames( 'editor-icon-button', className ); return ( - ); } diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index d2ea467aa3b7b..4884131885ab3 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -21,15 +21,14 @@ function Toolbar( { controls } ) { key={ index } icon={ control.icon } label={ control.title } + level={ control.level } onClick={ ( event ) => { event.stopPropagation(); control.onClick(); } } className={ classNames( 'editor-toolbar__control', { 'is-active': control.isActive && control.isActive() - } ) }> - { control.text } - + } ) } /> ) ) } ); diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 0139235b67a69..7cb00bf18c731 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -11,7 +11,7 @@ msgstr "" msgid "Heading" msgstr "" -#: blocks/library/heading/index.js:26 +#: blocks/library/heading/index.js:25 msgid "Heading %s" msgstr "" From 2fe3ec2d5dcedf97d4cf73adb9392128e9510a55 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 18 Apr 2017 15:32:36 +0200 Subject: [PATCH 2/4] Bump right value a bit to better position number. --- editor/components/icon-button/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss index acb7178a29090..3da223a78a627 100644 --- a/editor/components/icon-button/style.scss +++ b/editor/components/icon-button/style.scss @@ -22,6 +22,6 @@ font-weight: bold; position: absolute; bottom: 8px; - right: 4px; + right: 5px; } } From ce4e7487903e1e8b06985e881fc30b1b60a197c5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 18 Apr 2017 15:46:47 +0100 Subject: [PATCH 3/4] Drop the level prop from the icon-button --- editor/components/icon-button/index.js | 4 ++-- editor/components/icon-button/style.scss | 10 ---------- editor/components/toolbar/index.js | 2 +- editor/components/toolbar/style.scss | 10 ++++++++++ 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/editor/components/icon-button/index.js b/editor/components/icon-button/index.js index 5c9936ca81ef5..d99307a7eff5e 100644 --- a/editor/components/icon-button/index.js +++ b/editor/components/icon-button/index.js @@ -10,11 +10,11 @@ import './style.scss'; import Button from '../button'; import Dashicon from '../dashicon'; -function IconButton( { icon, level, children, label, className, ...additionalProps } ) { +function IconButton( { icon, children, label, className, ...additionalProps } ) { const classes = classnames( 'editor-icon-button', className ); return ( - diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss index acb7178a29090..e3e6d84083ea0 100644 --- a/editor/components/icon-button/style.scss +++ b/editor/components/icon-button/style.scss @@ -14,14 +14,4 @@ color: $blue-medium; } } - - &:after { - content: attr( data-level ); - font-family: $default-font; - font-size: 10px; - font-weight: bold; - position: absolute; - bottom: 8px; - right: 4px; - } } diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js index 4884131885ab3..9cd00d1b19244 100644 --- a/editor/components/toolbar/index.js +++ b/editor/components/toolbar/index.js @@ -21,7 +21,7 @@ function Toolbar( { controls } ) { key={ index } icon={ control.icon } label={ control.title } - level={ control.level } + data-level={ control.level } onClick={ ( event ) => { event.stopPropagation(); control.onClick(); diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss index 90d80c2552f46..3c566a541ca1a 100644 --- a/editor/components/toolbar/style.scss +++ b/editor/components/toolbar/style.scss @@ -30,6 +30,16 @@ background-color: $dark-gray-500; color: $white; } + + &:after { + content: attr( data-level ); + font-family: $default-font; + font-size: 10px; + font-weight: bold; + position: absolute; + bottom: 8px; + right: 4px; + } } .editor-toolbar__control .dashicon { From e948167007b0efa195d38dd443f7bf013aea93a4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 18 Apr 2017 16:23:27 +0100 Subject: [PATCH 4/4] only apply level styling when level defined --- editor/components/toolbar/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss index 2272866e8d02f..bd45751be00b2 100644 --- a/editor/components/toolbar/style.scss +++ b/editor/components/toolbar/style.scss @@ -31,7 +31,7 @@ color: $white; } - &:after { + &[data-level]:after { content: attr( data-level ); font-family: $default-font; font-size: 10px;