Use a consistent way to check isRTL (#27838)

WordPress · Dec 21, 2020 · 86a9dc7 · 86a9dc7
1 parent 2db6a54
commit 86a9dc7
Show file tree

Hide file tree

Showing 30 changed files with 105 additions and 173 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -490,7 +490,6 @@ _Properties_
 -   _hasFixedToolbar_ `boolean`: Whether or not the editor toolbar is fixed
 -   _focusMode_ `boolean`: Whether the focus mode is enabled or not
 -   _styles_ `Array`: Editor Styles
--   _isRTL_ `boolean`: Whether the editor is in RTL mode
 -   _keepCaretInsideBlock_ `boolean`: Whether caret should move between blocks in edit mode
 -   _bodyPlaceholder_ `string`: Empty post placeholder
 -   _titlePlaceholder_ `string`: Empty title placeholder

diff --git a/packages/block-editor/src/components/alignment-toolbar/index.js b/packages/block-editor/src/components/alignment-toolbar/index.js
@@ -6,7 +6,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { ToolbarGroup } from '@wordpress/components';
 import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
 
@@ -40,7 +40,6 @@ export function AlignmentToolbar( props ) {
 		alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 		label = __( 'Change text alignment' ),
 		isCollapsed = true,
-		isRTL,
 	} = props;
 
 	function applyOrUnset( align ) {
@@ -54,7 +53,7 @@ export function AlignmentToolbar( props ) {
 
 	function setIcon() {
 		if ( activeAlignment ) return activeAlignment.icon;
-		return isRTL ? alignRight : alignLeft;
+		return isRTL() ? alignRight : alignLeft;
 	}
 
 	return (

diff --git a/packages/block-editor/src/components/block-list/subdirectory-icon.js b/packages/block-editor/src/components/block-list/subdirectory-icon.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
 
-const Subdirectory = ( { isRTL, ...extraProps } ) => (
+const Subdirectory = ( { ...extraProps } ) => (
 	<SVG
 		xmlns="http://www.w3.org/2000/svg"
 		width={ 14 }
@@ -13,7 +14,7 @@ const Subdirectory = ( { isRTL, ...extraProps } ) => (
 	>
 		<Path
 			d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"
-			transform={ isRTL ? 'scale(-1,1) translate(-20,0)' : undefined }
+			transform={ isRTL() ? 'scale(-1,1) translate(-20,0)' : undefined }
 		/>
 	</SVG>
 );

diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js
@@ -12,7 +12,7 @@ import { Button } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,30 +25,30 @@ import {
 } from '@wordpress/icons';
 import { getBlockMoverDescription } from './mover-description';
 
-const getArrowIcon = ( direction, orientation, isRTL ) => {
+const getArrowIcon = ( direction, orientation ) => {
 	if ( direction === 'up' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? chevronRight : chevronLeft;
+			return isRTL() ? chevronRight : chevronLeft;
 		}
 		return chevronUp;
 	} else if ( direction === 'down' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? chevronLeft : chevronRight;
+			return isRTL() ? chevronLeft : chevronRight;
 		}
 		return chevronDown;
 	}
 	return null;
 };
 
-const getMovementDirectionLabel = ( moveDirection, orientation, isRTL ) => {
+const getMovementDirectionLabel = ( moveDirection, orientation ) => {
 	if ( moveDirection === 'up' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? __( 'Move right' ) : __( 'Move left' );
+			return isRTL() ? __( 'Move right' ) : __( 'Move left' );
 		}
 		return __( 'Move up' );
 	} else if ( moveDirection === 'down' ) {
 		if ( orientation === 'horizontal' ) {
-			return isRTL ? __( 'Move left' ) : __( 'Move right' );
+			return isRTL() ? __( 'Move left' ) : __( 'Move right' );
 		}
 		return __( 'Move down' );
 	}
@@ -70,7 +70,6 @@ const BlockMoverButton = forwardRef(
 			isFirst,
 			isLast,
 			firstIndex,
-			isRTL,
 			orientation = 'vertical',
 		} = useSelect(
 			( select ) => {
@@ -79,7 +78,6 @@ const BlockMoverButton = forwardRef(
 					getBlockRootClientId,
 					getBlockOrder,
 					getBlock,
-					getSettings,
 					getBlockListSettings,
 				} = select( 'core/block-editor' );
 				const normalizedClientIds = castArray( clientIds );
@@ -107,7 +105,6 @@ const BlockMoverButton = forwardRef(
 					firstIndex: firstBlockIndex,
 					isFirst: isFirstBlock,
 					isLast: isLastBlock,
-					isRTL: getSettings().isRTL,
 					orientation: moverOrientation || blockListOrientation,
 				};
 			},
@@ -137,11 +134,10 @@ const BlockMoverButton = forwardRef(
 						'block-editor-block-mover-button',
 						`is-${ direction }-button`
 					) }
-					icon={ getArrowIcon( direction, orientation, isRTL ) }
+					icon={ getArrowIcon( direction, orientation ) }
 					label={ getMovementDirectionLabel(
 						direction,
-						orientation,
-						isRTL
+						orientation
 					) }
 					aria-describedby={ descriptionId }
 					{ ...props }
@@ -159,8 +155,7 @@ const BlockMoverButton = forwardRef(
 						isFirst,
 						isLast,
 						direction === 'up' ? -1 : 1,
-						orientation,
-						isRTL
+						orientation
 					) }
 				</span>
 			</>

diff --git a/packages/block-editor/src/components/block-mover/mover-description.js b/packages/block-editor/src/components/block-mover/mover-description.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf, isRTL } from '@wordpress/i18n';
 
 /**
  * Return a label for the block movement controls depending on block position.
@@ -16,7 +16,6 @@ import { __, _n, sprintf } from '@wordpress/i18n';
  *                                 down, < 0 is up).
  * @param {string}  orientation   The orientation of the block movers, vertical or
  * 								   horizontal.
- * @param {boolean} isRTL   	  True if current writing system is right to left.
  *
  * @return {string} Label for the block movement controls.
  */
@@ -27,20 +26,19 @@ export function getBlockMoverDescription(
 	isFirst,
 	isLast,
 	dir,
-	orientation,
-	isRTL
+	orientation
 ) {
 	const position = firstIndex + 1;
 
 	const getMovementDirection = ( moveDirection ) => {
 		if ( moveDirection === 'up' ) {
 			if ( orientation === 'horizontal' ) {
-				return isRTL ? 'right' : 'left';
+				return isRTL() ? 'right' : 'left';
 			}
 			return 'up';
 		} else if ( moveDirection === 'down' ) {
 			if ( orientation === 'horizontal' ) {
-				return isRTL ? 'left' : 'right';
+				return isRTL() ? 'left' : 'right';
 			}
 			return 'down';
 		}

diff --git a/packages/block-editor/src/components/floating-toolbar/nav-up-icon.js b/packages/block-editor/src/components/floating-toolbar/nav-up-icon.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
 
-const NavigateUp = ( { isRTL } ) => (
+const NavigateUp = () => (
 	<SVG
 		width="24"
 		height="24"
@@ -16,7 +17,7 @@ const NavigateUp = ( { isRTL } ) => (
 			fillRule="evenodd"
 			clipRule="evenodd"
 			d="M17,11  z L15.58,12.42 L12,8.83 L12,18 L22,18 L22,20 L10,20 L10,8.83 L6.42,12.42 L5,11 L11,5 L17,11"
-			transform={ isRTL ? 'scale(-1,1) translate(-24,0)' : undefined }
+			transform={ isRTL() ? 'scale(-1,1) translate(-24,0)' : undefined }
 		/>
 	</SVG>
 );

diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js
@@ -20,7 +20,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean} hasFixedToolbar Whether or not the editor toolbar is fixed
  * @property {boolean} focusMode Whether the focus mode is enabled or not
  * @property {Array} styles Editor Styles
- * @property {boolean} isRTL Whether the editor is in RTL mode
  * @property {boolean} keepCaretInsideBlock Whether caret should move between blocks in edit mode
  * @property {string} bodyPlaceholder Empty post placeholder
  * @property {string} titlePlaceholder Empty title placeholder

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -29,7 +29,7 @@ import {
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
 import { useEffect, useState, useRef } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
 import { createBlock } from '@wordpress/blocks';
 import { crop, upload } from '@wordpress/icons';
@@ -102,22 +102,17 @@ export default function Image( {
 		},
 		[ id, isSelected ]
 	);
-	const {
-		imageEditing,
-		imageSizes,
-		isRTL,
-		maxWidth,
-		mediaUpload,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( 'core/block-editor' );
-		return pick( getSettings(), [
-			'imageEditing',
-			'imageSizes',
-			'isRTL',
-			'maxWidth',
-			'mediaUpload',
-		] );
-	} );
+	const { imageEditing, imageSizes, maxWidth, mediaUpload } = useSelect(
+		( select ) => {
+			const { getSettings } = select( 'core/block-editor' );
+			return pick( getSettings(), [
+				'imageEditing',
+				'imageSizes',
+				'maxWidth',
+				'mediaUpload',
+			] );
+		}
+	);
 	const { toggleSelection } = useDispatch( 'core/block-editor' );
 	const { createErrorNotice, createSuccessNotice } = useDispatch(
 		noticesStore
@@ -456,7 +451,7 @@ export default function Image( {
 			// When the image is centered, show both handles.
 			showRightHandle = true;
 			showLeftHandle = true;
-		} else if ( isRTL ) {
+		} else if ( isRTL() ) {
 			// In RTL mode the image is on the right by default.
 			// Show the right handle and hide the left handle only when it is
 			// aligned left. Otherwise always show the left handle.

diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import {
 	RichText,
@@ -29,7 +29,6 @@ import {
 	formatOutdent,
 	formatOutdentRTL,
 } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -47,10 +46,6 @@ export default function ListEdit( {
 	const { ordered, values, type, reversed, start } = attributes;
 	const tagName = ordered ? 'ol' : 'ul';
 
-	const isRTL = useSelect( ( select ) => {
-		return !! select( 'core/block-editor' ).getSettings().isRTL;
-	}, [] );
-
 	const controls = ( { value, onChange, onFocus } ) => (
 		<>
 			{ isSelected && (
@@ -93,7 +88,7 @@ export default function ListEdit( {
 				<ToolbarGroup
 					controls={ [
 						{
-							icon: isRTL
+							icon: isRTL()
 								? formatListBulletsRTL
 								: formatListBullets,
 							title: __( 'Convert to unordered list' ),
@@ -110,7 +105,7 @@ export default function ListEdit( {
 							},
 						},
 						{
-							icon: isRTL
+							icon: isRTL()
 								? formatListNumberedRTL
 								: formatListNumbered,
 							title: __( 'Convert to ordered list' ),
@@ -127,7 +122,7 @@ export default function ListEdit( {
 							},
 						},
 						{
-							icon: isRTL ? formatOutdentRTL : formatOutdent,
+							icon: isRTL() ? formatOutdentRTL : formatOutdent,
 							title: __( 'Outdent list item' ),
 							shortcut: _x( 'Backspace', 'keyboard key' ),
 							isDisabled: ! canOutdentListItems( value ),
@@ -137,7 +132,7 @@ export default function ListEdit( {
 							},
 						},
 						{
-							icon: isRTL ? formatIndentRTL : formatIndent,
+							icon: isRTL() ? formatIndentRTL : formatIndent,
 							title: __( 'Indent list item' ),
 							shortcut: _x( 'Space', 'keyboard key' ),
 							isDisabled: ! canIndentListItems( value ),

diff --git 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 { __, _x } from '@wordpress/i18n';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
 import {
 	AlignmentToolbar,
@@ -29,12 +29,8 @@ function getComputedStyle( node, pseudo ) {
 const name = 'core/paragraph';
 
 function ParagraphRTLToolbar( { direction, setDirection } ) {
-	const isRTL = useSelect( ( select ) => {
-		return !! select( 'core/block-editor' ).getSettings().isRTL;
-	}, [] );
-
 	return (
-		isRTL && (
+		isRTL() && (
 			<ToolbarGroup
 				controls={ [
 					{

diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js
@@ -9,7 +9,7 @@ import { includes, pick } from 'lodash';
  */
 import { isBlobURL } from '@wordpress/blob';
 import { useState, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	Notice,
 	PanelBody,
@@ -63,15 +63,15 @@ const SiteLogo = ( {
 	const classes = classnames( {
 		'is-transient': isBlobURL( logoUrl ),
 	} );
-	const { maxWidth, isRTL, title } = useSelect( ( select ) => {
+	const { maxWidth, title } = useSelect( ( select ) => {
 		const { getSettings } = select( 'core/block-editor' );
 		const siteEntities = select( 'core' ).getEditedEntityRecord(
 			'root',
 			'site'
 		);
 		return {
 			title: siteEntities.title,
-			...pick( getSettings(), [ 'imageSizes', 'isRTL', 'maxWidth' ] ),
+			...pick( getSettings(), [ 'imageSizes', 'maxWidth' ] ),
 		};
 	} );
 
@@ -151,7 +151,7 @@ const SiteLogo = ( {
 		// When the image is centered, show both handles.
 		showRightHandle = true;
 		showLeftHandle = true;
-	} else if ( isRTL ) {
+	} else if ( isRTL() ) {
 		// In RTL mode the image is on the right by default.
 		// Show the right handle and hide the left handle only when it is
 		// aligned left. Otherwise always show the left handle.