Fix: Pagination arrows are pointing in the wrong direction in RTL lan…

…guages (#64962) Co-authored-by: t-hamano <[email protected]> Co-authored-by: cbravobernal <[email protected]>
WordPress · Sep 2, 2024 · 825cdac · 825cdac
1 parent b40fc02
commit 825cdac
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 27 deletions.
diff --git a/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js b/packages/block-editor/src/components/block-pattern-setup/setup-toolbar.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import {
 	chevronRight,
@@ -38,7 +38,7 @@ const CarouselNavigation = ( {
 		<Button
 			// TODO: Switch to `true` (40px size) if possible
 			__next40pxDefaultSize={ false }
-			icon={ chevronLeft }
+			icon={ isRTL() ? chevronRight : chevronLeft }
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
@@ -47,7 +47,7 @@ const CarouselNavigation = ( {
 		<Button
 			// TODO: Switch to `true` (40px size) if possible
 			__next40pxDefaultSize={ false }
-			icon={ chevronRight }
+			icon={ isRTL() ? chevronLeft : chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }

diff --git a/packages/block-editor/src/components/grid/grid-item-movers.js b/packages/block-editor/src/components/grid/grid-item-movers.js
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import {
 	VisuallyHidden,
 	ToolbarButton,
@@ -57,7 +57,7 @@ export function GridItemMovers( {
 			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
 				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
 					<GridItemMover
-						icon={ chevronLeft }
+						icon={ isRTL() ? chevronRight : chevronLeft }
 						label={ __( 'Move left' ) }
 						description={ __( 'Move left' ) }
 						isDisabled={ columnStart <= 1 }
@@ -126,7 +126,7 @@ export function GridItemMovers( {
 				</div>
 				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
 					<GridItemMover
-						icon={ chevronRight }
+						icon={ isRTL() ? chevronLeft : chevronRight }
 						label={ __( 'Move right' ) }
 						description={ __( 'Move right' ) }
 						isDisabled={ columnCount && columnEnd >= columnCount }

diff --git a/packages/block-library/src/navigation-link/link-ui.js b/packages/block-library/src/navigation-link/link-ui.js
@@ -8,7 +8,7 @@ import {
 	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalLinkControl as LinkControl,
 	store as blockEditorStore,
@@ -28,7 +28,7 @@ import {
 } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { chevronLeftSmall, plus } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall, plus } from '@wordpress/icons';
 import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
 
 /**
@@ -123,7 +123,7 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 
 			<Button
 				className="link-ui-block-inserter__back"
-				icon={ chevronLeftSmall }
+				icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
 				onClick={ ( e ) => {
 					e.preventDefault();
 					onBack();

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -7,7 +7,7 @@ import {
 	SelectControl,
 } from '@wordpress/components';
 import { createInterpolateElement, memo, useContext } from '@wordpress/element';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 
 /**
@@ -103,7 +103,7 @@ function DataViewsPagination() {
 						disabled={ currentPage === 1 }
 						accessibleWhenDisabled
 						label={ __( 'Previous page' ) }
-						icon={ previous }
+						icon={ isRTL() ? next : previous }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"
@@ -115,7 +115,7 @@ function DataViewsPagination() {
 						disabled={ currentPage >= totalPages }
 						accessibleWhenDisabled
 						label={ __( 'Next page' ) }
-						icon={ next }
+						icon={ isRTL() ? previous : next }
 						showTooltip
 						size="compact"
 						tooltipPosition="top"

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
+import { _n, sprintf, isRTL } from '@wordpress/i18n';
 import {
 	__experimentalUseNavigator as useNavigator,
 	__experimentalText as Text,
@@ -15,7 +15,7 @@ import {
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { chevronRight } from '@wordpress/icons';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 
 function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 	const variantsCount = font.fontFace?.length || 1;
@@ -57,7 +57,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 						</Text>
 					</FlexItem>
 					<FlexItem>
-						<Icon icon={ chevronRight } />
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
 					</FlexItem>
 				</Flex>
 			</Flex>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -28,7 +28,7 @@ import {
 	CheckboxControl,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { sprintf, __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
 import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
@@ -383,7 +383,9 @@ function FontCollection( { slug } ) {
 						<NavigatorScreen path="/fontFamily">
 							<Flex justify="flex-start">
 								<NavigatorBackButton
-									icon={ chevronLeft }
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										setSelectedFont( null );
@@ -498,7 +500,7 @@ function FontCollection( { slug } ) {
 								disabled={ page === 1 }
 								showTooltip
 								accessibleWhenDisabled
-								icon={ chevronLeft }
+								icon={ isRTL() ? chevronRight : chevronLeft }
 								tooltipPosition="top"
 							/>
 							<HStack
@@ -549,7 +551,7 @@ function FontCollection( { slug } ) {
 								onClick={ () => setPage( page + 1 ) }
 								disabled={ page === totalPages }
 								accessibleWhenDisabled
-								icon={ chevronRight }
+								icon={ isRTL() ? chevronLeft : chevronRight }
 								tooltipPosition="top"
 							/>
 						</HStack>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -21,8 +21,8 @@ import {
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { chevronLeft } from '@wordpress/icons';
+import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -354,7 +354,9 @@ function InstalledFonts() {
 
 							<Flex justify="flex-start">
 								<NavigatorBackButton
-									icon={ chevronLeft }
+									icon={
+										isRTL() ? chevronRight : chevronLeft
+									}
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );

diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
@@ -11,7 +11,7 @@ import {
 	__experimentalText as Text,
 	Button,
 } from '@wordpress/components';
-import { __, _x, _n, sprintf } from '@wordpress/i18n';
+import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
 import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
 
 export default function Pagination( {
@@ -50,7 +50,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'First page' ) }
-					icon={ previous }
+					icon={ isRTL() ? next : previous }
 					size="compact"
 				/>
 				<Button
@@ -59,7 +59,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === 1 }
 					label={ __( 'Previous page' ) }
-					icon={ chevronLeft }
+					icon={ isRTL() ? chevronRight : chevronLeft }
 					size="compact"
 				/>
 			</HStack>
@@ -78,7 +78,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Next page' ) }
-					icon={ chevronRight }
+					icon={ isRTL() ? chevronLeft : chevronRight }
 					size="compact"
 				/>
 				<Button
@@ -87,7 +87,7 @@ export default function Pagination( {
 					accessibleWhenDisabled
 					disabled={ disabled || currentPage === numPages }
 					label={ __( 'Last page' ) }
-					icon={ next }
+					icon={ isRTL() ? previous : next }
 					size="compact"
 				/>
 			</HStack>