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 && (
+
+ ) }
@@ -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 }
/>
);
},