Switch arrow unicode characters (#4364)

* Switch arrow unicode characters * flip arrow with css
woocommerce · Jul 12, 2021 · c054cc2 · c054cc2
1 parent 70d5ab0
commit c054cc2
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/assets/js/base/components/pagination/index.js b/assets/js/base/components/pagination/index.js
@@ -58,7 +58,7 @@ const Pagination = ( {
 			/>
 			{ displayNextAndPreviousArrows && (
 				<button
-					className="wc-block-pagination-page wc-block-components-pagination__page"
+					className="wc-block-pagination-page wc-block-components-pagination__page wc-block-pagination-page--arrow"
 					onClick={ () => onPageChange( currentPage - 1 ) }
 					title={ __(
 						'Previous page',
@@ -67,7 +67,7 @@ const Pagination = ( {
 					disabled={ currentPage <= 1 }
 				>
 					<Label
-						label="<"
+						label="&larr;"
 						screenReaderLabel={ __(
 							'Previous page',
 							'woo-gutenberg-products-block'
@@ -175,13 +175,13 @@ const Pagination = ( {
 			) }
 			{ displayNextAndPreviousArrows && (
 				<button
-					className="wc-block-pagination-page wc-block-components-pagination__page"
+					className="wc-block-pagination-page wc-block-components-pagination__page wc-block-pagination-page--arrow"
 					onClick={ () => onPageChange( currentPage + 1 ) }
 					title={ __( 'Next page', 'woo-gutenberg-products-block' ) }
 					disabled={ currentPage >= totalPages }
 				>
 					<Label
-						label=">"
+						label="&rarr;"
 						screenReaderLabel={ __(
 							'Next page',
 							'woo-gutenberg-products-block'

diff --git a/assets/js/base/components/pagination/style.scss b/assets/js/base/components/pagination/style.scss
@@ -49,3 +49,8 @@
 		opacity: 1 !important;
 	}
 }
+
+html[dir="rtl"] .wc-block-pagination-page--arrow span {
+	display: inline-block;
+	transform: scale(-1, 1);
+}