Media/Text Block: RTL styles for media alignment not working

[nielslange]

Describe the bug

The media/image block does not respect media alignments.

To reproduce

Steps to reproduce the behavior:

1. Go to /wp-admin/options-general.php and change the site language to an RTL language, e.g. Hebrew
2. Go to /wp-admin/post-new.php
3. Add the following two media/image blocks:
   3.1 Media: left / Text: right
   3.2 Media: right / Text: left

Expected behavior

• Left-aligned images appear on the left and right-aligned images appear on the right.

Screenshots

• Left-aligned images appear on the right and right-aligned images appear on the left.

Desktop (please complete the following information):

• OS: iOS 10.14.6 (18G103)
• Browser Chrome Version 77.0.3865.90 (Official Build) (64-bit)

Additional context

• WordPress 5.2.3 (no Gutenberg plugin active)
• This issue was discovered in RTL: text aligned blocks are reversed, some aligned blocks reversed twentytwenty#773 (comment)

[mapk]

Here's what's going on from a visual standpoint.

[richtabor]

Good catch @nielslange. So is the solution we're looking for to have the block not swap left and right? Or to adjust the labels/icons to support the RTL result?

[nielslange]

Good catch @nielslange. So is the solution we're looking for to have the block not swap left and right? Or to adjust the labels/icons to support the RTL result?

@richtabor Either way works, as long as the image is aligned in accordance to users selection. Thus, if a user clicks on Show media on left, as seen in @mapk's screenshot in #17922 (comment), the image needs to be shown on the left.

[mapk]

In the case of RTL languages, the solution is to NOT swap the image position, only the text alignment. The image position is easily fixed by just clicking the positioning icons for the block.

This way the buttons represent the layout, not the language. "Media on left" is always media on left. Regardless of language, left is still left.

[nielslange]

@mapk Isn't that what I mentioned in #17922 (comment)? 😀

[mapk]

@nielslange definitely as you mentioned. 👍 The comments lead to two different solutions, so I just wanted to clarify what the path forward for this should be.

[nielslange]

I see. Thanks for clarifying this, @mapk! 🙌