CSS issues in RTL for the onboarding flow

[miksansegundo]

Steps to reproduce

1. Set language to Arabic or Hebrew
2. Create new site at /start
3. Select domain and free plan
4. Select "Build" from the Where to start page.
5. See issues

What I expected

Goals screen

• [x] The heading text is not aligned right.
• [x] The blue button should be aligned to the right of the options

Suggestion list

• [x] Too much padding to the right of the example item in the drop-down list.
• [x] Drop-down menu items need to be aligned right.
• [x] The expand/collapse arrows and x need to be to the left in the drop down menu, so it mirrors ltr languages.

Site Name and Description

• [x] A space is needed before the “(Optional)” text.

After selecting the “Write and Publish” option

• [x] The icons on the following page need to be on the right of the text.

After selecting the “Sell online” option

• [x] On the store settings page, the payments block and woocommerce logos need to be moved to the right so they don’t overlap
• [x] The shopping bag and truck icons also need to be move to the right.

Design Picker

• [x] The design is cut off and the previews don’t show.

Related 437-gh-Automattic/i18n-issues

[miksansegundo]

Most of the issues were not reproducible in the local dev environment because the HTML links to the right CSS files rtl.css on the onboarding screens but this is not the case in the rest of the environments. Specifically, in all the screens after the domain selection, the HTML links to the CSS files min.css instead of rtl.css. For instance:

• The intents screen /setup/intent
• The goals screen /setup/goals

The CSS file path issue is affecting all the environments except for the Calypso live containers. See how the issues are not reproducible on the Calypso live container for issue #65550.

@Automattic/ganon why do you think this issue happens on production, staging, horizon, and wpcalypso environments but not on the local dev environment or the Calypso live containers? It could be something related to the PHP logic that adds the links. I have not been able to find where is that logic so far. Or maybe it is related to the plugins used in the sass config for webpack.

The only issue reproducible in the local dev environment was https://github.com/Automattic/wp-calypso/pull/65550 and we solved it by defining a specific CSS for RTL as described in the CSS/SASS coding guidelines for RTL CSS.

Other issues like the WordPress logo position, have been solved in 437-gh-Automattic/i18n-issues and can be tested on wpcalypso.wordpress.com.

[arthur791004]

Discussion: p1657722599282629-slack-CRWCHQGUB

[miksansegundo]

I'm closing this because the remaining issues have been solved separately or we have created new issues.