Enhancement: Add text alignment options to verse block toolbar (#6700)

* Add text alignment options to verse block toolbar * Changed attribute align to textAlign Props @nfmohit-wpmudev
WordPress · May 23, 2018 · f145991 · f145991
1 parent 270ca2a
commit f145991
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/core-blocks/verse/index.js b/core-blocks/verse/index.js
@@ -2,8 +2,13 @@
  * WordPress
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
-import { RichText } from '@wordpress/editor';
+import {
+	RichText,
+	BlockControls,
+	AlignmentToolbar,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -29,6 +34,9 @@ export const settings = {
 			source: 'children',
 			selector: 'pre',
 		},
+		textAlign: {
+			type: 'string',
+		},
 	},
 
 	transforms: {
@@ -51,30 +59,44 @@ export const settings = {
 	},
 
 	edit( { attributes, setAttributes, className } ) {
-		const { content } = attributes;
+		const { textAlign, content } = attributes;
 
 		return (
-			<RichText
-				tagName="pre"
-				value={ content }
-				onChange={ ( nextContent ) => {
-					setAttributes( {
-						content: nextContent,
-					} );
-				} }
-				placeholder={ __( 'Write…' ) }
-				wrapperClassName={ className }
-				formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
-			/>
+			<Fragment>
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+				<RichText
+					tagName="pre"
+					value={ content }
+					onChange={ ( nextContent ) => {
+						setAttributes( {
+							content: nextContent,
+						} );
+					} }
+					style={ { textAlign: textAlign } }
+					placeholder={ __( 'Write…' ) }
+					wrapperClassName={ className }
+					formattingControls={ [ 'bold', 'italic', 'strikethrough' ] }
+				/>
+			</Fragment>
 		);
 	},
 
 	save( { attributes, className } ) {
+		const { textAlign, content } = attributes;
+
 		return (
 			<RichText.Content
 				tagName="pre"
 				className={ className }
-				value={ attributes.content }
+				style={ { textAlign: textAlign } }
+				value={ content }
 			/>
 		);
 	},