Add buttons to change heading level

WordPress · Apr 17, 2017 · 8502267 · 8502267
1 parent 2849506
commit 8502267
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 35 deletions.
diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js
@@ -75,7 +75,9 @@ export default class Editable extends wp.element.Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		if ( this.props.value !== prevProps.value ) {
+		if ( this.props.tagName !== prevProps.tagName ) {
+			this.initialize();
+		} else if ( this.props.value !== prevProps.value ) {
 			this.updateContent();
 		}
 	}

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -20,30 +20,15 @@ registerBlock( 'core/heading', {
 	},
 
 	controls: [
-		{
-			icon: 'editor-alignleft',
-			title: wp.i18n.__( 'Align left' ),
-			isActive: ( { align } ) => ! align || 'left' === align,
+		...'123456'.split( '' ).map( ( level ) => ( {
+			icon: 'editor-alignleft', // TODO
+			text: level,
+			title: wp.i18n.sprintf( wp.i18n.__( 'Heading %s' ), level ),
+			isActive: ( { tag } ) => 'H' + level === tag,
 			onClick( attributes, setAttributes ) {
-				setAttributes( { align: undefined } );
+				setAttributes( { tag: 'H' + level } );
 			}
-		},
-		{
-			icon: 'editor-aligncenter',
-			title: wp.i18n.__( 'Align center' ),
-			isActive: ( { align } ) => 'center' === align,
-			onClick( attributes, setAttributes ) {
-				setAttributes( { align: 'center' } );
-			}
-		},
-		{
-			icon: 'editor-alignright',
-			title: wp.i18n.__( 'Align right' ),
-			isActive: ( { align } ) => 'right' === align,
-			onClick( attributes, setAttributes ) {
-				setAttributes( { align: 'right' } );
-			}
-		}
+		} ) )
 	],
 
 	edit( { attributes, setAttributes } ) {
@@ -60,8 +45,7 @@ registerBlock( 'core/heading', {
 	},
 
 	save( { attributes } ) {
-		const { align, tag, content } = attributes;
-		const Tag = tag;
+		const { align, tag: Tag, content } = attributes;
 
 		return (
 			<Tag

diff --git 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, label, className, ...additionalProps } ) {
+function IconButton( { icon, text, label, className, ...additionalProps } ) {
 	const classes = classnames( 'editor-icon-button', className );
 
 	return (
 		<Button { ...additionalProps } aria-label={ label } className={ classes }>
 			<Dashicon icon={ icon } />
+			{ text ? <span>{ text }</span> : null }
 		</Button>
 	);
 }

diff --git a/editor/components/icon-button/style.scss b/editor/components/icon-button/style.scss
@@ -1,7 +1,7 @@
 .editor-icon-button {
 	display: flex;
 	align-items: center;
-	width: 36px;
+	min-width: 36px;
 	height: 36px;
 	border: none;
 	background: none;
@@ -14,4 +14,8 @@
 			color: $blue-medium;
 		}
 	}
+
+	span {
+		font-size: 12px;
+	}
 }
diff --git a/editor/components/toolbar/index.js b/editor/components/toolbar/index.js
@@ -20,6 +20,7 @@ function Toolbar( { controls } ) {
 				<IconButton
 					key={ index }
 					icon={ control.icon }
+					text={ control.text }
 					label={ control.title }
 					onClick={ ( event ) => {
 						event.stopPropagation();

diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot
@@ -11,6 +11,18 @@ msgstr ""
 msgid "Heading"
 msgstr ""
 
+#: blocks/library/heading/index.js:26
+msgid "Heading %s"
+msgstr ""
+
+#: blocks/library/image/index.js:10
+msgid "Image"
+msgstr ""
+
+#: blocks/library/image/index.js:31
+msgid "Write caption…"
+msgstr ""
+
 #: blocks/library/heading/index.js:25
 #: blocks/library/list/index.js:25
 #: blocks/library/text/index.js:24
@@ -29,14 +41,6 @@ msgstr ""
 msgid "Align right"
 msgstr ""
 
-#: blocks/library/image/index.js:10
-msgid "Image"
-msgstr ""
-
-#: blocks/library/image/index.js:31
-msgid "Write caption…"
-msgstr ""
-
 #: blocks/library/list/index.js:11
 msgid "List"
 msgstr ""