Some blocks' RTL stylesheets not loading when RTL language is set

[zoonini]

When setting an RTL language under Settings > General, some RTL stylesheets are not loaded, meaning that some blocks are not displayed correctly.

To replicate

• Add navigation block to the header if there isn't one already
• Visit Settings > General
• Choose an RTL language
• View site on the front end

I tested with:

• Languages: Hebrew and Farsi
• WordPress 6.0.1
• No active plugins

Result

Some RTL stylesheets are not loaded; instead, the LTR stylesheets are loaded.

Examples of stylesheets being loaded:

/wp-includes/blocks/social-links/style.min.css?ver=6.0.1
/wp-includes/blocks/navigation/style.min.css?ver=6.0.1
/wp-includes/blocks/cover/style.min.css?ver=6.0.1

Expected

When selecting an RTL language, all appropriate RTL stylesheets should be loaded.

Examples of stylesheets that should be loaded:

/wp-includes/blocks/social-links/style-rtl.min.css?ver=6.0.1
/wp-includes/blocks/navigation/style-rtl.min.css?ver=6.0.1
/wp-includes/blocks/cover/style-rtl.min.css?ver=6.0.1

Note: These are three examples provided by the original reporter; there may also be other stylesheets not loading for other blocks.

Screenshots

Example of how the navigation menu looks with language set to Farsi is attached.

Report

​https://wordpress.org/support/topic/rtl-problem-bug/

[zoonini]

Screenshot - Farsi

[sabernhardt]

Thanks for the report!

These are editor stylesheets, and the same occurs with the TT1 Blocks theme, so the report belongs on GitHub. ​Gutenberg issue 41649 seems similar, and I'll comment there to ask whether it's related.

[maahrokh]

Please attention to this bug, Because all RTL web sites have problem in visibility of components
Thank you

[sabernhardt]

PR 3096, without the extra tabs

[sabernhardt]

Farhad Sakhaei's ​PR 3096 modifies wp-includes/blocks.php, so we might be able to fix this apart from the plugin. (props farhad0)

The editor fetches the minified RTL stylesheets when I apply the patch's change to my WordPress 6.0.1 installation with Gutenberg deactivated and SCRIPT_DEBUG set to false.

[SergeyBiryukov]

Thanks for the patch!

If my understanding is correct, these lines can be added to an existing conditional a few lines below, see 56325.2.diff​.

This would need a unit test for register_block_style_handle() and could use some manual testing, so I'm not quite comfortable committing this just yet, but there is still some time before 6.0.2 comes next Tuesday.

[SergeyBiryukov]

Looks like this did not get any further traction yet. With 6.0.2 coming today, moving to 6.1 for now.

[Ankit K Gupta]

Test Report

Env

• WordPress - 6.1-beta1-54282
• Chrome Version - 105.0.5195.125 (Official Build) (x86_64)
• OS - macOS Monterey V12.3.1
• Theme: Twenty Twenty Two
• PHP - 8.0.0
• Web Server - Apache
• Database - MySQL 5.7.28
• Used patch file - https://core.trac.wordpress.org/attachment/ticket/56325/56325.2.diff
• SCRIPT_DEBUG - false

Steps to test

1. Add Navigation Block to the header
2. Switch site to RTL language (Persian)
3. Open site in front-end and view source.
4. Check the source of CSS
5. Apply the patch file, refresh page and check the CSS source.
6. RTL CSS should load now.

Test result

• Performed some Manual Testing. RTL CSS is loading in RTL sites for navigation block after the patch.

Actual Results

• ✅ Issue resolved with patch.

Before Fix -

<link rel='stylesheet' id='wp-block-navigation-css'  href='https://core.local/src/wp-includes/blocks/navigation/style.min.css?ver=6.1-beta1-54282-src' media='all' />

After Fix -

<link rel='stylesheet' id='wp-block-navigation-rtl-css'  href='https://core.local/src/wp-includes/blocks/navigation/style-rtl.min.css?ver=6.1-beta1-54282-src' media='all' />

Thanks!

[SergeyBiryukov]

Refreshed after [54290]

[aristath]

Patch looks good to me :+1:

[SergeyBiryukov]

Refreshed after [54323]

[SergeyBiryukov]

In 54330:

Editor: Correctly load RTL stylesheets in register_block_style_handle().

When setting an RTL language under Settings → General, some RTL stylesheets were not loaded, with LTR stylesheets being loaded instead, meaning that some blocks were not displayed correctly.

This commit ensures that all appropriate RTL stylesheets are loaded when selecting an RTL language.

Additionally, this commit improves performance by only running a file_exists() check for an RTL stylesheet if is_rtl() returns true, i.e. an RTL locale is selected.

Follow-up to [49982], [50836].

Props zoonini, sabernhardt, maahrokh, ankit-k-gupta, aristath, poena, SergeyBiryukov.
See #56325.

[SergeyBiryukov]

Keeping the ticket open for now to add some unit tests.

[SergeyBiryukov]

In 54331:

Tests: Update block registration tests to account for RTL stylesheet loading changes.

The RTL data should only be added in register_block_style_handle() if an RTL locale is selected, so these test expectations do not appear to be correct.

Follow-up to [49982], [53091], [54330].

See #56325.

[audrasjb]

@SergeyBiryukov is it still in your todolist?

If not, we could probably close this as fixed and open a new ticket to handle the missing unit test. What do you think?

[SergeyBiryukov]

Replying to audrasjb:

we could probably close this as fixed and open a new ticket to handle the missing unit test. What do you think?

Sounds good :) Follow-up: #56797.