diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js index 59aaaaffe77d75..65b6f3765765fd 100644 --- a/packages/block-library/src/cover/edit/block-controls.js +++ b/packages/block-library/src/cover/edit/block-controls.js @@ -9,7 +9,7 @@ import { __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl, __experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -58,15 +58,27 @@ export default function CoverBlockControls( { } ); }; + // Flip value horizontally to match the physical direction indicated by + // AlignmentMatrixControl with the logical direction indicated by cover + // block in RTL languages. + const flipHorizontalPosition = ( ltrContentPosition ) => { + return isRTL() + ? ltrContentPosition.replace( /left|right/, ( match ) => + match === 'left' ? 'right' : 'left' + ) + : ltrContentPosition; + }; + return ( <> setAttributes( { - contentPosition: nextPosition, + contentPosition: + flipHorizontalPosition( nextPosition ), } ) } isDisabled={ ! hasInnerBlocks } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index dd236130446a3c..70827a50a1ddb3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -14,6 +14,7 @@ ### Bug Fix +- `AlignmentMatrixControl`: keep the physical direction in RTL languages ([#43126](https://github.com/WordPress/gutenberg/pull/43126)). - `AlignmentMatrixControl`: Fix the `width` prop so it works as intended ([#43482](https://github.com/WordPress/gutenberg/pull/43482)). - `SelectControl`, `CustomSelectControl`: Truncate long option strings ([#43301](https://github.com/WordPress/gutenberg/pull/43301)). - `Popover`: fix and improve opening animation ([#43186](https://github.com/WordPress/gutenberg/pull/43186)). diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js index 88ae648252aae2..9cf55416023087 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js @@ -13,6 +13,7 @@ export const rootBase = () => { return css` border-radius: 2px; box-sizing: border-box; + direction: ltr; display: grid; grid-template-columns: repeat( 3, 1fr ); outline: none; diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json index c333776d38da68..c604c1785853c0 100644 --- a/packages/data/tsconfig.json +++ b/packages/data/tsconfig.json @@ -14,7 +14,5 @@ { "path": "../priority-queue" }, { "path": "../redux-routine" } ], - "include": [ - "src/**/*" - ] + "include": [ "src/**/*" ] }