Load LTR and RTL stylesheets conditionally by sejas · Pull Request #1429 · Automattic/studio

sejas · 2025-05-23T09:32:42Z

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.

whats-new-footer-buttons-rtl.mp4

Before	After

Pre-merge Checklist

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

sejas · 2025-05-23T09:34:52Z

+						: '/main_window/styles/wordpress-components-style.css'
+				}
+			/>
+			<DynamicStylesheet id="main-window-style" href={ '/main_window.css' } />


I'm not using Helmet dependency because it doesn't preserve the order of stylesheets after the href has changed.
See staylor/react-helmet-async#187 (comment)

ivan-ottinger

The proposed changes look good and work as expected. 👌🏼🙂 I am glad this issue is going to be fixed!

The LTR/RTL styles are being applied correctly. Example with the "What's new" modal:

I did not observe any regressions when navigating throughout the app.

Thank you for the robust tests and including detailed PR description. I left just a couple comments.

ivan-ottinger · 2025-05-23T11:35:02Z

+plugins.push(
+	new CopyWebpackPlugin( {
+		patterns: [
+			// Copy @wordpress/components stylesheets to the renderer directory
+			{
+				from: path.resolve( __dirname, 'node_modules/@wordpress/components/build-style/style.css' ),
+				to:  path.resolve( __dirname, '.webpack/renderer/main_window/styles/wordpress-components-style.css'),
+			},
+			{
+				from: path.resolve( __dirname, 'node_modules/@wordpress/components/build-style/style-rtl.css' ),
+				to: path.resolve( __dirname, '.webpack/renderer/main_window/styles/wordpress-components-style-rtl.css' ),
+			},
+		],
+	} )
+);
+


Nice! This is one of the parts I was missing when I looked into the issue initially a couple weeks ago.

* 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

commit d31733b Author: katinthehatsite <katerynakodonenko@gmail.com> Date: Tue May 27 09:12:55 2025 +0200 Studio: Delete old proof-of-concept WP-CLI implementation (#1426) * Remove old scripts * Remove old cli.ts * Cleanup tests * Clean up terminal opening and feature flag * Cleanup assistant code * Clean shortcuts code * Cleanup feature flags * Cleanup feature flags * Cleanup shortcuts sessions * Removed unused feature flag for assistant * Assistant code block test fix * Adjust preload * Cleanup index file and tests * Refactor terminal usage * Add back the lock * Remove unintended change * Remove unnecesary type for warp * Use bundled Ids * Cleanup event parameter --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> commit 4fac446 Author: Volodymyr Makukha <nei.css@gmail.com> Date: Mon May 26 20:19:35 2025 +0100 Update Ukrainian translations - May 26 (#1439) commit c7536ef Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Mon May 26 18:34:28 2025 +0100 Load LTR and RTL stylesheets conditionally (#1429) * 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 commit c80b70e Author: Bero <berislav.grgicak@gmail.com> Date: Mon May 26 19:20:42 2025 +0200 Update Playground packages to 1.0.38 and remove the Symlink manager (#1425) * Update Playground packages to 1.0.38 * Remove SymlinkManager * Activate Playground's followSymlinks feature * Remove @php-wasm/universal patch commit 5bfe676 Author: Wojtek Naruniec <wojtek.naruniec@automattic.com> Date: Mon May 26 15:40:18 2025 +0200 Sanitize regex in Win editor path (#1411) * Sanitize regex * Import only escapeRegExp function commit 2cd3e44 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Mon May 26 13:18:02 2025 +0200 Bump version from 1.5.2-beta4 to 1.5.2 (#1436) commit f16865e Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Mon May 26 12:38:24 2025 +0200 Add release notes for 1.5.2 (#1434) * Add release notes for 1.5.2 * Reorder release notes * Update release notes order and formatting * Added latest UI fix to the release notes * Consolidate Studio CLI fixes into a single bullet point commit f6e48d5 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Mon May 26 12:21:30 2025 +0200 Add translations for 1.5.2 (#1433) * Add translations for 1.5.2 * Add latest Polish and Spanish translations * Update spanish translations --------- Co-authored-by: Antonio Sejas <antonio@sejas.es> commit ae1d163 Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Mon May 26 10:58:22 2025 +0100 Share same styles between preview and sync tabs (#1435) commit d6a7905 Author: Roberto Aranda <roberto.aranda@automattic.com> Date: Fri May 23 15:23:14 2025 +0200 Return original URL param when it cannot be parsed (#1420) * Return the passed URL parameter when it cannot be parsed instead of an empty string commit 91d04be Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Fri May 23 14:22:34 2025 +0100 Update localized docs links for Studio Sync and Studio CLI (#1431) * Add translation link to new Spanish studio docs CLI * Add hash to Studio sync supported sites commit 6213094 Author: katinthehatsite <katerynakodonenko@gmail.com> Date: Fri May 23 14:27:53 2025 +0200 Add patch to fix the accessibility with modals (#1423) Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> commit b2724c0 Author: Rahul Gavande <rahul.gavande@automattic.com> Date: Fri May 23 14:45:11 2025 +0530 Use uri scheme to open Warp terminal app (#1428) commit 43c831b Author: Fredrik Rombach Ekelund <fredrik@f26d.dev> Date: Wed May 21 16:10:40 2025 +0200 CLI: Set UTF8 encoding for output on Windows (#1424) commit b1c0eeb Author: Volodymyr Makukha <nei.css@gmail.com> Date: Wed May 21 10:34:47 2025 +0100 Fix hiding plugins spinner (#1419) commit 48988ed Author: Fredrik Rombach Ekelund <fredrik@f26d.dev> Date: Wed May 21 10:31:33 2025 +0200 Add migration to rename launch uniques stat (#1415) * Add migration to rename launch uniques stat * Fix CLI zod schema commit f363144 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Tue May 20 18:24:00 2025 +0200 Bump version to 1.5.2-beta4 (#1421) commit 9768e67 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Tue May 20 15:29:33 2025 +0200 Pressable Sync: Fix remaining Sync modal issues (#1416) * Use absolute path for `WordPressLogoCircle` import * Use separate `isDisabled` to makde WP logo gray * Remove trailing space in site selector helper text * Decrease font size of sync sites modal learn more link commit 9fab398 Author: Ian G. Maia <iangmaia@users.noreply.github.com> Date: Tue May 20 13:15:23 2025 +0200 [Tooling] Update code to DRY the Windows build PS1 (#1408) * Update code to DRY the Windows build PS1 * Update case of `Exit` command * Use `windows` instead of just `win` to prefix windows-related scripts * Add $LastExitCode check after `npm run make` commit e5d4006 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Tue May 20 12:01:21 2025 +0200 Improve version comparison logic to handle prerelease transitions correctly (#1403) commit f0a282b Author: Rahul Gavande <rahul.gavande@automattic.com> Date: Tue May 20 15:15:25 2025 +0530 HTTPS: Convert domain name Unicode characters to ASCII characters (#1400) * Convert domain name unicode chars to ASCII * Do not use punnycode domain name for paths * Remove unncessary punnycode domain name commit 6cdc351 Author: Roberto Aranda <roberto.aranda@automattic.com> Date: Tue May 20 11:35:52 2025 +0200 Sync: Update notification to include Hostname (#1412) * Push: Update notification to include Hostname * Pull: Update notification to include hostname * Add hints for translators commit 69419a6 Author: Gergely Csécsey <gergely.csecsey@automattic.com> Date: Tue May 20 10:30:57 2025 +0100 Increase HTTP request timeout to 60 seconds (#1407) * Increase HTTP request timeout to 60 seconds * Increase curl timeout to 60 seconds * update comments commit 6bcbbff Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Tue May 20 09:36:18 2025 +0100 Update connect site text button when connecting another site (#1413) * Adapt the "Connect Site" button when connecting multiple sites on Sync. commit 60a9cab Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Tue May 20 09:10:37 2025 +0100 Avoid orphan in sync title (#1414) commit 3b103cc Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Mon May 19 10:39:12 2025 +0100 Release 1.5.2-beta3 (#1410) commit a109671 Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Mon May 19 09:45:17 2025 +0200 Sync: Update sync tab text and remove WordPress logo from title (#1405) * Update sync tab text and remove WordPress logo from title * Fix related test * Use comma * Update copy of the bullet points * Replace `WP.com` with `WordPress.com`. Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> * Replace WP.com with WordPress.com Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> * Delete unused WordPress short logo component --------- Co-authored-by: Antonio Sejas <antonio.sejas@automattic.com> commit 716bc7a Author: Ivan Ottinger <ivan.ottinger@automattic.com> Date: Fri May 16 16:15:16 2025 +0200 Sync: Update Sync modal content (#1406) * Update WordPress logo component `viewBox` * Update Sync modal heading * Update text below Sync search field * Update Sync modal site logos * Replace hardcoded arrows with `ArrowIcon` component in sync sites modal links * Localize sync modal Read more link using `getLocalizedLink` utility commit 11b4302 Author: Roberto Aranda <roberto.aranda@automattic.com> Date: Fri May 16 15:14:40 2025 +0200 Push: Read and update the progress from the sync endpoint (#1389) * Calls the GET /sync/import using the importId to obtain the progress * Use the progress from the /sync/import endpoint to update the progress in the importing state * Splits the progress of the importing state between backup and import commit 7423bdf Author: katinthehatsite <katerynakodonenko@gmail.com> Date: Fri May 16 11:40:18 2025 +0200 Studio: Fix no directory or file error on Windows (#1391) * Fix no directory or file error on Windows * Cleanup directories --------- Co-authored-by: Kateryna Kodonenko <kateryna@automattic.com> commit 1661ac4 Author: Antonio Sejas <antonio.sejas@automattic.com> Date: Fri May 16 10:04:32 2025 +0100 Force display of what's new for minor version (#1404) * Force what's new display for minor version * Skip test that compares the patch version

sejas added 17 commits May 22, 2025 19:48

swap "What's New" modal Next and Previous buttons on RTL languages

dd845f2

Move wordpress/components stylesheets to main_window using webpack

37f67e2

Remove index.css imports

fb6a605

Remove wordpress/components default style from index.css

ebf524b

create hook to import stylesheets dynamically

2272659

use Helmet to load the CSS files

3637e29

uninstall helmet

8ccc904

Create DynamicStylesheet custom component

054fe10

Use the DynamicStylesheet in app.tsx instead of Helmet

c6bb1e7

add tests

5e99e4d

add test cases to check if removes the styles after unmounting

ed1ef5c

move copy wordpress styles to webpack renderer

e16d7b5

Indent lines on renderer webpack

110ea7c

Move the copy plugin to push section

21e185e

Remove end of line on index css

22cdac3

undo brackets on webpack.main.config

4d856e7

remove renderer imports

de81155

sejas self-assigned this May 23, 2025

sejas commented May 23, 2025

View reviewed changes

sejas marked this pull request as draft May 23, 2025 09:39

Fix the loading assets issue when the binary is compiled.

047f386

sejas marked this pull request as ready for review May 23, 2025 09:48

sejas requested a review from a team May 23, 2025 09:49

ivan-ottinger approved these changes May 23, 2025

View reviewed changes

sejas added 2 commits May 26, 2025 18:11

Remove comments

5c81b7b

Remove repeated test

eb262be

sejas merged commit c7536ef into trunk May 26, 2025

sejas deleted the update/STU-352-rtl-whats-new-buttons branch May 26, 2025 17:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Load LTR and RTL stylesheets conditionally - #1429

Load LTR and RTL stylesheets conditionally#1429
sejas merged 20 commits into
trunkfrom
update/STU-352-rtl-whats-new-buttons

sejas commented May 23, 2025 •

edited

Loading

sejas May 23, 2025 •

edited

Loading

ivan-ottinger left a comment

Uh oh!

Uh oh!

ivan-ottinger May 23, 2025

Labels

2 participants

Uh oh!

Conversation

sejas commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issues

Proposed Changes

Testing Instructions

Pre-merge Checklist

sejas May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

ivan-ottinger left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ivan-ottinger May 23, 2025

Choose a reason for hiding this comment

Labels

2 participants

sejas commented May 23, 2025 •

edited

Loading

sejas May 23, 2025 •

edited

Loading