studio icon indicating copy to clipboard operation
studio copied to clipboard

Load LTR and RTL stylesheets conditionally

Open sejas opened this issue 7 months ago • 0 comments

Related issues

  • Fixes STU-352
  • Fixes STU-351

Proposed Changes

  • Add a new component
  • Load @wordpress/components css conditionally based on RTL and LTR.
  • Load index.css a.k.a main_window.css after loading the WordPress stylesheet

Testing Instructions

  • Run npm start
  • Click on Help > what's new , to open the modal
  • Observe the modal looks correct
  • Change the language to any RTL
  • Click on يساعد > what's new , to open the modal
  • Observe the next back buttons are displayed inverted
  • Observe the close buttons have the correct marging
  • Make a general pass in the UI and observe everything looks correct in RTL languages

  • Run npm run make
  • Open the app produced on out/Studio-darwin-arm64/Studio.app
  • Observe the styles work as expected.

https://github.com/user-attachments/assets/e50e0675-b32f-43b9-b04d-f6588399ca73

Before After
rtl-before rtl-after

Pre-merge Checklist

  • [ ] Have you checked for TypeScript, React or other console errors?

sejas avatar May 23 '25 09:05 sejas