Components: Fix the icon button level prop (#444)

WordPress · Apr 18, 2017 · 3d9b30f · 3d9b30f
1 parent aa7fc94
commit 3d9b30f
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -14,8 +14,9 @@ function IconButton( { icon, children, label, className, ...additionalProps } )
 	const classes = classnames( 'editor-icon-button', className );
 
 	return (
-		<Button { ...additionalProps } aria-label={ label } className={ classes } data-level={ children ? children : null }>
+		<Button { ...additionalProps } aria-label={ label } className={ classes }>
 			<Dashicon icon={ icon } />
+			{ children }
 		</Button>
 	);
 }

diff --git 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
@@ -21,15 +21,14 @@ function Toolbar( { controls } ) {
 					key={ index }
 					icon={ control.icon }
 					label={ control.title }
+					data-level={ control.level }
 					onClick={ ( event ) => {
 						event.stopPropagation();
 						control.onClick();
 					} }
 					className={ classNames( 'editor-toolbar__control', {
 						'is-active': control.isActive && control.isActive()
-					} ) }>
-					{ control.text }
-				</IconButton>
+					} ) } />
 			) ) }
 		</ul>
 	);

diff --git a/editor/components/toolbar/style.scss b/editor/components/toolbar/style.scss
@@ -30,6 +30,16 @@
 		background-color: $dark-gray-500;
 		color: $white;
 	}
+
+	&[data-level]:after {
+		content: attr( data-level );
+		font-family: $default-font;
+		font-size: 10px;
+		font-weight: bold;
+		position: absolute;
+		bottom: 8px;
+		right: 5px;
+	}
 }
 
 .editor-toolbar__control .dashicon {

diff --git 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 ""