Merge pull request #423 from WordPress/add/heading-block

Add basic heading block

blocks/components/editable/index.js

@@ -68,14 +68,22 @@ export default class Editable extends wp.element.Component {
 		this.editor.selection.moveToBookmark( bookmark );
 	}
 
+	componentWillUpdate( nextProps ) {
+		if ( this.editor && this.props.tagName !== nextProps.tagName ) {
+			this.editor.destroy();
+		}
+	}
+
 	componentWillUnmount() {
 		if ( this.editor ) {
 			this.editor.destroy();
 		}
 	}
 
 	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();
 		}
 	}

blocks/library/heading/index.js

@@ -0,0 +1,56 @@
+/**
+ * Internal dependencies
+ */
+import { registerBlock, query } from 'api';
+import Editable from 'components/editable';
+
+const { html, prop } = query;
+
+registerBlock( 'core/heading', {
+	title: wp.i18n.__( 'Heading' ),
+
+	icon: 'heading',
+
+	category: 'common',
+
+	attributes: {
+		content: html( 'h1,h2,h3,h4,h5,h6' ),
+		tag: prop( 'h1,h2,h3,h4,h5,h6', 'nodeName' ),
+		align: prop( 'h1,h2,h3,h4,h5,h6', 'style.textAlign' )
+	},
+
+	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 } );
+			}
+		} ) )
+	],
+
+	edit( { attributes, setAttributes } ) {
+		const { content, tag, align } = attributes;
+
+		return (
+			<Editable
+				tagName={ tag }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				style={ align ? { textAlign: align } : null }
+			/>
+		);
+	},
+
+	save( { attributes } ) {
+		const { align, tag: Tag, content } = attributes;
+
+		return (
+			<Tag
+				style={ align ? { textAlign: align } : null }
+				dangerouslySetInnerHTML={ { __html: content } } />
+		);
+	}
+} );

blocks/library/index.js

@@ -1,4 +1,5 @@
 import './freeform';
+import './heading';
 import './image';
 import './text';
 import './list';

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

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;
+	}
 }

editor/components/toolbar/index.js

@@ -27,7 +27,9 @@ function Toolbar( { controls } ) {
 					} }
 					className={ classNames( 'editor-toolbar__control', {
 						'is-active': control.isActive && control.isActive()
-					} ) } />
+					} ) }>
+					{ control.text }
+				</IconButton>
 			) ) }
 		</ul>
 	);

languages/gutenberg.pot

@@ -7,6 +7,14 @@ msgstr ""
 msgid "Freeform"
 msgstr ""
 
+#: blocks/library/heading/index.js:10
+msgid "Heading"
+msgstr ""
+
+#: blocks/library/heading/index.js:26
+msgid "Heading %s"
+msgstr ""
+
 #: blocks/library/image/index.js:10
 msgid "Image"
 msgstr ""