[RTL] Control box incorrectly positioned and affects wrong border in RTL installations

[masoudgolchin]

Description

In WordPress installations using RTL (Right-to-Left) languages such as Farsi, there is a critical bug affecting the Button block's border styling in the block editor. This issue causes confusion and incorrect visual representation of the button's borders.

When a user attempts to style a Button block in an RTL environment, the border sizes are applied inversely to what is specified in the block settings. Specifically:

1. When setting the right border to 2rem, it actually applies to the left border.
2. When setting the left border to 4rem, it actually applies to the right border.

This behavior is contrary to the expected RTL handling, where the visual representation should match the input values, even though the underlying CSS may be flipped for RTL layouts.

The issue significantly impacts the user experience for RTL language users, as it becomes counterintuitive to style blocks correctly. Users have to apply settings opposite to their intended outcome, which is not only confusing but also goes against the principles of creating an inclusive and accessible editing experience for all language users.

This bug affects the core functionality of the Gutenberg editor in RTL contexts and requires immediate attention to ensure consistent and correct behavior across all language settings in WordPress.

Step-by-step reproduction instructions

Steps to Reproduce:

1. Set up a WordPress installation with an RTL language (e.g., Farsi).
2. Go to the WordPress Dashboard.
3. Navigate to "Posts" > "Add New" to enter the post creation screen.
4. Add a new Button block to the content area.
5. In the block settings sidebar, apply borders to the right and left sides of the button:
   • Set a border color different from the button's background color.
6. Adjust the border sizes:
   • Set the right border size to 2rem.
   • Set the left border size to 4rem.

Expected Behavior:
The right border should be 2rem wide, and the left border should be 4rem wide.

Actual Behavior:
The border sizes are applied to the opposite sides:

• The left border appears 2rem wide.
• The right border appears 4rem wide.

Screenshots, screen recording, code snippet

rtl-control-box-borders.mp4

Environment info

• WordPress version: 6.6
• Gutenberg version: 19.0.0
• Active theme: Twenty Twenty-Four
• Browsers: Chrome, Firefox
• Operating System: macOS 14.5 (Desktop)
• Installation type: RTL (Right-to-Left)
• Language: Farsi

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[masoudgolchin]

Bringing this up so we can address the issue sooner :)
It's a huge problem for the RTL users.