From 48b8c94820f3d4f117c3ca683902badebb5219f4 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Thu, 18 Oct 2018 03:41:03 -0400
Subject: [PATCH] Blocks: Add direction attribute to paragraph block (#10663)

---
 packages/block-library/src/paragraph/edit.js  | 31 ++++++++++++++++++-
 packages/block-library/src/paragraph/index.js |  6 ++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
index 6e77735fd016f..1290f5566d46b 100644
--- a/packages/block-library/src/paragraph/edit.js
+++ b/packages/block-library/src/paragraph/edit.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	Component,
 	Fragment,
@@ -14,6 +14,7 @@ import {
 import {
 	PanelBody,
 	ToggleControl,
+	Toolbar,
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
@@ -29,6 +30,7 @@ import {
 } from '@wordpress/editor';
 import { createBlock } from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
 
 const { getComputedStyle } = window;
 
@@ -137,6 +139,7 @@ class ParagraphBlock extends Component {
 			fallbackFontSize,
 			fontSize,
 			setFontSize,
+			isRTL,
 		} = this.props;
 
 		const {
@@ -144,6 +147,7 @@ class ParagraphBlock extends Component {
 			content,
 			dropCap,
 			placeholder,
+			direction,
 		} = attributes;
 
 		return (
@@ -155,6 +159,23 @@ class ParagraphBlock extends Component {
 							setAttributes( { align: nextAlign } );
 						} }
 					/>
+					{ isRTL && (
+						<Toolbar
+							controls={ [
+								{
+									icon: 'editor-ltr',
+									title: _x( 'Left to right', 'editor button' ),
+									isActive: direction === 'ltr',
+									onClick() {
+										const nextDirection = direction === 'ltr' ? undefined : 'ltr';
+										setAttributes( {
+											direction: nextDirection,
+										} );
+									},
+								},
+							] }
+						/>
+					) }
 				</BlockControls>
 				<InspectorControls>
 					<PanelBody title={ __( 'Text Settings' ) } className="blocks-font-size">
@@ -212,6 +233,7 @@ class ParagraphBlock extends Component {
 						color: textColor.color,
 						fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
 						textAlign: align,
+						direction,
 					} }
 					value={ content }
 					onChange={ ( nextContent ) => {
@@ -234,6 +256,13 @@ const ParagraphEdit = compose( [
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	withFontSizes( 'fontSize' ),
 	applyFallbackStyles,
+	withSelect( ( select ) => {
+		const { getEditorSettings } = select( 'core/editor' );
+
+		return {
+			isRTL: getEditorSettings().isRTL,
+		};
+	} ),
 ] )( ParagraphBlock );
 
 export default ParagraphEdit;
diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js
index 1e1218c6d2ab5..25e83f1018c03 100644
--- a/packages/block-library/src/paragraph/index.js
+++ b/packages/block-library/src/paragraph/index.js
@@ -65,6 +65,10 @@ const schema = {
 	customFontSize: {
 		type: 'number',
 	},
+	direction: {
+		type: 'string',
+		enum: [ 'ltr', 'rtl' ],
+	},
 };
 
 export const name = 'core/paragraph';
@@ -230,6 +234,7 @@ export const settings = {
 			customTextColor,
 			fontSize,
 			customFontSize,
+			direction,
 		} = attributes;
 
 		const textClass = getColorClassName( 'color', textColor );
@@ -258,6 +263,7 @@ export const settings = {
 				style={ styles }
 				className={ className ? className : undefined }
 				value={ content }
+				dir={ direction }
 			/>
 		);
 	},