diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index cfadf407b3b655..7ee086234ecd0d 100644 --- 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 index 4136f5f7a4c9e3..8eed48b364e480 100644 --- 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 index 432f545e4524d8..085bc6830bda68 100644 --- 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 } ) => ( ( > ); diff --git a/packages/block-editor/src/components/block-mover/button.js b/packages/block-editor/src/components/block-mover/button.js index d1b4f4b5df2cbb..776934631f3761 100644 --- 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 ) } diff --git a/packages/block-editor/src/components/block-mover/mover-description.js b/packages/block-editor/src/components/block-mover/mover-description.js index fbdc10cb256138..c84a99469980fc 100644 --- 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 index 029b667dfb498c..15634076d17b00 100644 --- 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 = () => ( ( 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 } /> ); diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 8bbcbff537dbb8..ba608d34a35f87 100644 --- 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 index 27891132e9bca3..808c02b30afdbe 100644 --- 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 index 867c0b1e03c272..b653e39e3dfb50 100644 --- 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( { { - return !! select( 'core/block-editor' ).getSettings().isRTL; - }, [] ); - return ( - isRTL && ( + isRTL() && ( { + const { maxWidth, title } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); const siteEntities = select( 'core' ).getEditedEntityRecord( 'root', @@ -71,7 +71,7 @@ const SiteLogo = ( { ); 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. diff --git a/packages/components/src/alignment-matrix-control/index.js b/packages/components/src/alignment-matrix-control/index.js index cce4cd59a096a4..28e41f9c65d4f1 100644 --- a/packages/components/src/alignment-matrix-control/index.js +++ b/packages/components/src/alignment-matrix-control/index.js @@ -8,7 +8,7 @@ import { useCompositeState, Composite, CompositeGroup } from 'reakit'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { useInstanceId } from '@wordpress/compose'; import { useState, useEffect } from '@wordpress/element'; @@ -17,7 +17,6 @@ import { useState, useEffect } from '@wordpress/element'; */ import Cell from './cell'; import { Root, Row } from './styles/alignment-matrix-control-styles'; -import { useRTL } from '../utils/rtl'; import AlignmentMatrixControlIcon from './icon'; import { GRID, getItemId } from './utils'; @@ -41,14 +40,13 @@ export default function AlignmentMatrixControl( { ...props } ) { const [ immutableDefaultValue ] = useState( value ?? defaultValue ); - const isRTL = useRTL(); const baseId = useBaseId( id ); const initialCurrentId = getItemId( baseId, immutableDefaultValue ); const composite = useCompositeState( { baseId, currentId: initialCurrentId, - rtl: isRTL, + rtl: isRTL(), } ); const handleOnChange = ( nextValue ) => { diff --git a/packages/components/src/date-time/date.js b/packages/components/src/date-time/date.js index 0b1ba7c19aa5fc..6461cc00c9b902 100644 --- a/packages/components/src/date-time/date.js +++ b/packages/components/src/date-time/date.js @@ -10,12 +10,12 @@ import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerS * WordPress dependencies */ import { Component, createRef } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; /** * Module Constants */ const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss'; -const isRTL = () => document.documentElement.dir === 'rtl'; class DatePicker extends Component { constructor() { diff --git a/packages/components/src/navigation/back-button/index.js b/packages/components/src/navigation/back-button/index.js index 9a5d750681ff3f..c52932bb8e8624 100644 --- a/packages/components/src/navigation/back-button/index.js +++ b/packages/components/src/navigation/back-button/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; /** @@ -14,7 +14,6 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; */ import { useNavigationContext } from '../context'; import { MenuBackButtonUI } from '../styles/navigation-styles'; -import { getRTL } from '../../utils/rtl'; function NavigationBackButton( { backButtonLabel, className, href, onClick, parentMenu }, @@ -34,12 +33,12 @@ function NavigationBackButton( onClick( event ); } - const animationDirection = getRTL() ? 'left' : 'right'; + const animationDirection = isRTL() ? 'left' : 'right'; if ( parentMenu && ! event.defaultPrevented ) { setActiveMenu( parentMenu, animationDirection ); } }; - const icon = getRTL() ? chevronRight : chevronLeft; + const icon = isRTL() ? chevronRight : chevronLeft; return ( { title } diff --git a/packages/components/src/navigation/index.js b/packages/components/src/navigation/index.js index 859a20319ccec3..8f9f2bba506c36 100644 --- a/packages/components/src/navigation/index.js +++ b/packages/components/src/navigation/index.js @@ -8,6 +8,7 @@ import { noop } from 'lodash'; * WordPress dependencies */ import { useEffect, useRef, useState } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -17,7 +18,6 @@ import { ROOT_MENU } from './constants'; import { NavigationContext } from './context'; import { NavigationUI } from './styles/navigation-styles'; import { useCreateNavigationTree } from './use-create-navigation-tree'; -import { useRTL } from '../utils/rtl'; export default function Navigation( { activeItem, @@ -29,7 +29,7 @@ export default function Navigation( { const [ menu, setMenu ] = useState( activeMenu ); const [ slideOrigin, setSlideOrigin ] = useState(); const navigationTree = useCreateNavigationTree(); - const defaultSlideOrigin = useRTL() ? 'right' : 'left'; + const defaultSlideOrigin = isRTL() ? 'right' : 'left'; const setActiveMenu = ( menuId, slideInOrigin = defaultSlideOrigin ) => { if ( ! navigationTree.getMenu( menuId ) ) { diff --git a/packages/components/src/navigation/item/base-content.js b/packages/components/src/navigation/item/base-content.js index 93c8aef9193391..f4b6fc5b41a8a8 100644 --- a/packages/components/src/navigation/item/base-content.js +++ b/packages/components/src/navigation/item/base-content.js @@ -1,12 +1,10 @@ /** * Internal dependencies */ -import { useRTL } from '../../utils'; import { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles'; export default function NavigationItemBaseContent( props ) { const { badge, title } = props; - const isRTL = useRTL(); return ( <> @@ -14,7 +12,6 @@ export default function NavigationItemBaseContent( props ) { { title } @@ -22,10 +19,7 @@ export default function NavigationItemBaseContent( props ) { ) } { badge && ( - + { badge } ) } diff --git a/packages/components/src/navigation/item/index.js b/packages/components/src/navigation/item/index.js index 4514633b3d4593..625a5f3cb7265a 100644 --- a/packages/components/src/navigation/item/index.js +++ b/packages/components/src/navigation/item/index.js @@ -8,6 +8,7 @@ import { noop } from 'lodash'; * WordPress dependencies */ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; +import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -15,7 +16,6 @@ import { Icon, chevronLeft, chevronRight } from '@wordpress/icons'; import Button from '../../button'; import { useNavigationContext } from '../context'; import { ItemUI } from '../styles/navigation-styles'; -import { useRTL } from '../../utils/rtl'; import NavigationItemBaseContent from './base-content'; import NavigationItemBase from './base'; @@ -39,7 +39,6 @@ export default function NavigationItem( props ) { setActiveMenu, navigationTree: { isMenuEmpty }, } = useNavigationContext(); - const isRTL = useRTL(); // If hideIfTargetMenuEmpty prop is true // And the menu we are supposed to navigate to @@ -63,7 +62,7 @@ export default function NavigationItem( props ) { onClick( event ); }; - const icon = isRTL ? chevronLeft : chevronRight; + const icon = isRTL() ? chevronLeft : chevronRight; const baseProps = isText ? restProps : { as: Button, href, onClick: onItemClick, ...restProps }; diff --git a/packages/components/src/navigation/menu/menu-title.js b/packages/components/src/navigation/menu/menu-title.js index 7d36f01cf85d19..2cb860c2758d37 100644 --- a/packages/components/src/navigation/menu/menu-title.js +++ b/packages/components/src/navigation/menu/menu-title.js @@ -18,7 +18,6 @@ import { } from '../styles/navigation-styles'; import { useNavigationMenuContext } from './context'; import { SEARCH_FOCUS_DELAY } from '../constants'; -import { useRTL } from '../../utils/rtl'; export default function NavigationMenuTitle( { hasSearch, @@ -30,7 +29,6 @@ export default function NavigationMenuTitle( { const [ isSearching, setIsSearching ] = useState( false ); const { menu } = useNavigationMenuContext(); const searchButtonRef = useRef(); - const isRTL = useRTL(); if ( ! title ) { return null; @@ -57,7 +55,6 @@ export default function NavigationMenuTitle( { as="h2" className="components-navigation__menu-title-heading" variant="title.small" - isRTL={ isRTL } > { title } diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 65d2c1f2151def..4e5c76ad36206f 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -3,6 +3,11 @@ */ import styled from '@emotion/styled'; +/** + * WordPress dependencies + */ +import { isRTL } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -66,8 +71,8 @@ export const MenuTitleHeadingUI = styled( Text )` display: flex; justify-content: space-between; margin-bottom: ${ space( 1 ) }; - padding: ${ ( props ) => - props.isRTL + padding: ${ () => + isRTL() ? `${ space( 0.5 ) } ${ space( 2 ) } ${ space( 0.5 ) } ${ space( 1.5 ) }` @@ -139,8 +144,8 @@ export const MenuTitleSearchUI = styled.div` export const GroupTitleUI = styled( Text )` margin-top: ${ space( 1 ) }; - padding: ${ ( props ) => - props.isRTL + padding: ${ () => + isRTL() ? `${ space( 0.5 ) } ${ space( 2 ) } ${ space( 0.5 ) } 0` : `${ space( 0.5 ) } 0 ${ space( 0.5 ) } ${ space( 2 ) }` }; text-transform: uppercase; @@ -190,8 +195,8 @@ export const ItemUI = styled.div` `; export const ItemBadgeUI = styled.span` - margin-left: ${ ( props ) => ( props.isRTL ? '0' : space( 1 ) ) }; - margin-right: ${ ( props ) => ( props.isRTL ? space( 1 ) : '0' ) }; + margin-left: ${ () => ( isRTL() ? '0' : space( 1 ) ) }; + margin-right: ${ () => ( isRTL() ? space( 1 ) : '0' ) }; display: inline-flex; padding: ${ space( 0.5 ) } ${ space( 1.5 ) }; border-radius: 2px; @@ -210,7 +215,6 @@ export const ItemBadgeUI = styled.span` `; export const ItemTitleUI = styled( Text )` - ${ ( props ) => - props.isRTL ? 'margin-left: auto;' : 'margin-right: auto;' } + ${ () => ( isRTL() ? 'margin-left: auto;' : 'margin-right: auto;' ) } font-size: 13px; `; diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js index b3b7944123d25a..cbcca8ed0e20f1 100644 --- a/packages/components/src/number-control/index.js +++ b/packages/components/src/number-control/index.js @@ -7,6 +7,7 @@ import classNames from 'classnames'; * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -16,7 +17,6 @@ import { inputControlActionTypes, composeStateReducers, } from '../input-control/state'; -import { useRTL } from '../utils/style-mixins'; import { add, subtract, roundClamp } from '../utils/math'; import { useJumpStep } from '../utils/hooks'; import { isValueEmpty } from '../utils/values'; @@ -40,7 +40,6 @@ export function NumberControl( }, ref ) { - const isRtl = useRTL(); const baseValue = roundClamp( 0, min, max, step ); const jumpStep = useJumpStep( { @@ -120,7 +119,7 @@ export function NumberControl( case 'e': directionBaseValue = x; - directionModifier = isRtl ? -1 : 1; + directionModifier = isRTL() ? -1 : 1; break; case 's': @@ -130,7 +129,7 @@ export function NumberControl( case 'w': directionBaseValue = x; - directionModifier = isRtl ? 1 : -1; + directionModifier = isRTL() ? 1 : -1; break; } diff --git a/packages/components/src/popover/utils.js b/packages/components/src/popover/utils.js index 6f566916c66c7e..e807274b774826 100644 --- a/packages/components/src/popover/utils.js +++ b/packages/components/src/popover/utils.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { isRTL } from '@wordpress/i18n'; + /** * Module constants */ @@ -30,18 +35,17 @@ export function computePopoverXAxisPosition( forcePosition ) { const { width } = contentSize; - const isRTL = document.documentElement.dir === 'rtl'; // Correct xAxis for RTL support - if ( xAxis === 'left' && isRTL ) { + if ( xAxis === 'left' && isRTL() ) { xAxis = 'right'; - } else if ( xAxis === 'right' && isRTL ) { + } else if ( xAxis === 'right' && isRTL() ) { xAxis = 'left'; } - if ( corner === 'left' && isRTL ) { + if ( corner === 'left' && isRTL() ) { corner = 'right'; - } else if ( corner === 'right' && isRTL ) { + } else if ( corner === 'right' && isRTL() ) { corner = 'left'; } diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js index 543d25accfcfbd..976ec27b40cc97 100644 --- a/packages/components/src/range-control/index.js +++ b/packages/components/src/range-control/index.js @@ -7,7 +7,7 @@ import { clamp, isFinite, noop } from 'lodash'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; import { useRef, useState, forwardRef } from '@wordpress/element'; import { useInstanceId } from '@wordpress/compose'; @@ -33,7 +33,6 @@ import { Thumb, Wrapper, } from './styles/range-control-styles'; -import { useRTL } from '../utils/rtl'; function RangeControl( { @@ -69,8 +68,6 @@ function RangeControl( }, ref ) { - const isRTL = useRTL(); - const [ value, setValue ] = useControlledRangeValue( { min, max, @@ -190,7 +187,7 @@ function RangeControl( }; const offsetStyle = { - [ isRTL ? 'right' : 'left' ]: fillValueOffset, + [ isRTL() ? 'right' : 'left' ]: fillValueOffset, }; return ( @@ -200,7 +197,7 @@ function RangeControl( id={ id } help={ help } > - + { beforeIcon && ( diff --git a/packages/components/src/range-control/rail.js b/packages/components/src/range-control/rail.js index 51c188e8f46493..8f1794883e2dd5 100644 --- a/packages/components/src/range-control/rail.js +++ b/packages/components/src/range-control/rail.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { isRTL } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -58,8 +63,6 @@ function Marks( { } function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) { - const isRTL = document.documentElement.dir === 'rtl'; - if ( ! marks ) { return []; } @@ -81,7 +84,7 @@ function useMarks( { marks, min = 0, max = 100, step = 1, value = 0 } ) { const offset = `${ ( ( mark.value - min ) / range ) * 100 }%`; const offsetStyle = { - [ isRTL ? 'right' : 'left' ]: offset, + [ isRTL() ? 'right' : 'left' ]: offset, }; placedMarks.push( { diff --git a/packages/components/src/range-control/stories/index.js b/packages/components/src/range-control/stories/index.js index e91fde04b8fbc3..f65983161c5a3b 100644 --- a/packages/components/src/range-control/stories/index.js +++ b/packages/components/src/range-control/stories/index.js @@ -7,7 +7,7 @@ import { boolean, number, text } from '@storybook/addon-knobs'; /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -25,7 +25,6 @@ const RangeControlWithState = ( props ) => { }; const DefaultExample = () => { - const [ isRtl, setIsRtl ] = useState( false ); const [ value, setValue ] = useState( undefined ); const props = { @@ -48,26 +47,6 @@ const DefaultExample = () => { onChange: setValue, }; - const rtl = boolean( 'RTL', false ); - - useEffect( () => { - if ( rtl !== isRtl ) { - setIsRtl( rtl ); - } - }, [ rtl, isRtl ] ); - - useEffect( () => { - if ( isRtl ) { - document.documentElement.setAttribute( 'dir', 'rtl' ); - } else { - document.documentElement.setAttribute( 'dir', 'ltr' ); - } - - return () => { - document.documentElement.setAttribute( 'dir', 'ltr' ); - }; - }, [ isRtl ] ); - return ( diff --git a/packages/components/src/resizable-box/resize-tooltip/label.js b/packages/components/src/resizable-box/resize-tooltip/label.js index b63e4fd9e50c62..d95c73f335daff 100644 --- a/packages/components/src/resizable-box/resize-tooltip/label.js +++ b/packages/components/src/resizable-box/resize-tooltip/label.js @@ -2,12 +2,12 @@ * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies */ import { POSITIONS } from './utils'; -import { useRTL } from '../../utils/style-mixins'; import { TooltipWrapper, Tooltip, @@ -21,8 +21,6 @@ function Label( { label, position = POSITIONS.corner, zIndex = 1000, ...props }, ref ) { - const isRTL = useRTL(); - const showLabel = !! label; const isBottom = position === POSITIONS.bottom; @@ -56,8 +54,8 @@ function Label( ...style, position: 'absolute', top: CORNER_OFFSET, - right: isRTL ? null : CORNER_OFFSET, - left: isRTL ? CORNER_OFFSET : null, + right: isRTL() ? null : CORNER_OFFSET, + left: isRTL() ? CORNER_OFFSET : null, }; } diff --git a/packages/components/src/toolbar/toolbar-container.js b/packages/components/src/toolbar/toolbar-container.js index df4f29c5afc799..4e39fb0990677b 100644 --- a/packages/components/src/toolbar/toolbar-container.js +++ b/packages/components/src/toolbar/toolbar-container.js @@ -7,12 +7,12 @@ import { useToolbarState, Toolbar } from 'reakit/Toolbar'; * WordPress dependencies */ import { forwardRef } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies */ import ToolbarContext from '../toolbar-context'; -import { getRTL } from '../utils/rtl'; function ToolbarContainer( { label, ...props }, ref ) { // https://reakit.io/docs/basic-concepts/#state-hooks @@ -21,7 +21,7 @@ function ToolbarContainer( { label, ...props }, ref ) { const toolbarState = useToolbarState( { loop: true, baseId: props.id, - rtl: getRTL(), + rtl: isRTL(), } ); return ( diff --git a/packages/components/src/utils/rtl.js b/packages/components/src/utils/rtl.js index 89fefa7508b65c..7e46a4bf6a2725 100644 --- a/packages/components/src/utils/rtl.js +++ b/packages/components/src/utils/rtl.js @@ -4,29 +4,16 @@ import { css } from '@emotion/core'; import { mapKeys } from 'lodash'; +/** + * WordPress dependencies + */ +import { isRTL } from '@wordpress/i18n'; + const LOWER_LEFT_REGEXP = new RegExp( /-left/g ); const LOWER_RIGHT_REGEXP = new RegExp( /-right/g ); const UPPER_LEFT_REGEXP = new RegExp( /Left/g ); const UPPER_RIGHT_REGEXP = new RegExp( /Right/g ); -/** - * Checks to see whether the document is set to rtl. - * - * @return {boolean} Whether document is RTL. - */ -export function getRTL() { - return !! ( document && document.documentElement.dir === 'rtl' ); -} - -/** - * Simple hook to retrieve RTL direction value - * - * @return {boolean} Whether document is RTL. - */ -export function useRTL() { - return getRTL(); -} - /** * Flips a CSS property from left <-> right. * @@ -83,14 +70,12 @@ export const convertLTRToRTL = ( ltrStyles = {} ) => { */ export function rtl( ltrStyles = {}, rtlStyles ) { return () => { - const isRTL = getRTL(); - if ( rtlStyles ) { // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css - return isRTL ? css( rtlStyles ) : css( ltrStyles ); + return isRTL() ? css( rtlStyles ) : css( ltrStyles ); } // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css - return isRTL ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles ); + return isRTL() ? css( convertLTRToRTL( ltrStyles ) ) : css( ltrStyles ); }; } diff --git a/packages/components/src/utils/style-mixins.js b/packages/components/src/utils/style-mixins.js index 74c9074a6c826f..5b82fd98343540 100644 --- a/packages/components/src/utils/style-mixins.js +++ b/packages/components/src/utils/style-mixins.js @@ -1,6 +1,6 @@ export { color, rgba } from './colors'; export { reduceMotion } from './reduce-motion'; -export { rtl, getRTL, useRTL } from './rtl'; +export { rtl } from './rtl'; export { space } from './space'; export { font } from './font'; export { breakpoint } from './breakpoint'; diff --git a/packages/e2e-tests/specs/editor/various/rtl.test.js b/packages/e2e-tests/specs/editor/various/rtl.test.js index 67f66ee77cc63a..f14219d5b17f64 100644 --- a/packages/e2e-tests/specs/editor/various/rtl.test.js +++ b/packages/e2e-tests/specs/editor/various/rtl.test.js @@ -17,6 +17,7 @@ describe( 'RTL', () => { await createNewPost(); await page.evaluate( () => { document.querySelector( '.is-root-container' ).dir = 'rtl'; + wp.i18n.isRTL = () => true; } ); } );