Add text block controls

editor/blocks/text/index.js

@@ -1,4 +1,4 @@
-const { html } = wp.blocks.query;
+const { html, prop } = wp.blocks.query;
 const Editable = wp.blocks.Editable;
 
 wp.blocks.registerBlock( 'core/text', {
@@ -9,20 +9,57 @@ wp.blocks.registerBlock( 'core/text', {
 	category: 'common',
 
 	attributes: {
-		value: html( 'p' )
+		content: html( 'p' ),
+		align: prop( 'p', 'style.textAlign' )
 	},
 
+	controls: [
+		{
+			icon: 'editor-alignleft',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => ! align || 'left' === align,
+			onClick( attributes, setAttributes ) {
+				setAttributes( { align: undefined } );
+			}
+		},
+		{
+			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 } ) {
+		const { content, align } = attributes;
+
 		return (
 			<Editable
 				tagName="p"
-				value={ attributes.value }
-				onChange={ ( value ) => setAttributes( { value } ) }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				style={ align ? { textAlign: align } : null }
 			/>
 		);
 	},
 
 	save( { attributes } ) {
-		return <p dangerouslySetInnerHTML={ { __html: attributes.value } } />;
+		const { align, content } = attributes;
+
+		return (
+			<p
+				style={ align ? { textAlign: align } : null }
+				dangerouslySetInnerHTML={ { __html: content } } />
+		);
 	}
 } );

languages/gutenberg.pot

@@ -11,6 +11,18 @@ msgstr ""
 msgid "List"
 msgstr ""
 
+#: editor/blocks/text/index.js:19
+msgid "Align left"
+msgstr ""
+
+#: editor/blocks/text/index.js:27
+msgid "Align center"
+msgstr ""
+
+#: editor/blocks/text/index.js:35
+msgid "Align right"
+msgstr ""
+
 #: editor/header/mode-switcher/index.js:30
 msgid "Visual"
 msgstr ""