Skip to content

Commit

Permalink
Blocks: Add direction attribute to paragraph block (WordPress#10663)
Browse files Browse the repository at this point in the history
  • Loading branch information
aduth authored and antpb committed Oct 26, 2018
1 parent 6159d79 commit 48b8c94
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 1 deletion.
31 changes: 30 additions & 1 deletion packages/block-library/src/paragraph/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { __, _x } from '@wordpress/i18n';
import {
Component,
Fragment,
} from '@wordpress/element';
import {
PanelBody,
ToggleControl,
Toolbar,
withFallbackStyles,
} from '@wordpress/components';
import {
Expand All @@ -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;

Expand Down Expand Up @@ -137,13 +139,15 @@ class ParagraphBlock extends Component {
fallbackFontSize,
fontSize,
setFontSize,
isRTL,
} = this.props;

const {
align,
content,
dropCap,
placeholder,
direction,
} = attributes;

return (
Expand All @@ -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">
Expand Down Expand Up @@ -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 ) => {
Expand All @@ -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;
6 changes: 6 additions & 0 deletions packages/block-library/src/paragraph/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ const schema = {
customFontSize: {
type: 'number',
},
direction: {
type: 'string',
enum: [ 'ltr', 'rtl' ],
},
};

export const name = 'core/paragraph';
Expand Down Expand Up @@ -230,6 +234,7 @@ export const settings = {
customTextColor,
fontSize,
customFontSize,
direction,
} = attributes;

const textClass = getColorClassName( 'color', textColor );
Expand Down Expand Up @@ -258,6 +263,7 @@ export const settings = {
style={ styles }
className={ className ? className : undefined }
value={ content }
dir={ direction }
/>
);
},
Expand Down

0 comments on commit 48b8c94

Please sign in to comment.