Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When Gutenberg is active, RTL styles are not loading correctly on the front. #41649

Closed
carolinan opened this issue Jun 10, 2022 · 4 comments · Fixed by #41762
Closed

When Gutenberg is active, RTL styles are not loading correctly on the front. #41649

carolinan opened this issue Jun 10, 2022 · 4 comments · Fixed by #41762
Assignees
Labels
Internationalization (i18n) Issues or PRs related to internationalization efforts

Comments

@carolinan
Copy link
Contributor

carolinan commented Jun 10, 2022

Description

Different RTL files and styles are loaded on the front of the website depending on if Gutenberg is active or not.
This breaks some RTL styles, for example for the query pagination and comment query pagination blocks.

The example page I am using to reproduce this is the front page of Twenty Twenty-Two, with enough posts to show the query pagination in the query loop.

WordPress trunk, without Gutenberg, loads the following rtl files:

<link rel='stylesheet' id='wp-block-navigation-rtl-css'  href='http://localhost:8889/wp-includes/blocks/navigation/style-rtl.css?ver=6.1-alpha-53344-src' media='all' />
<link rel='stylesheet' id='wp-block-image-rtl-css'  href='http://localhost:8889/wp-includes/blocks/image/style-rtl.css?ver=6.1-alpha-53344-src' media='all' />
<link rel='stylesheet' id='wp-block-columns-rtl-css'  href='http://localhost:8889/wp-includes/blocks/columns/style-rtl.css?ver=6.1-alpha-53344-src' media='all' />
<link rel='stylesheet' id='wp-block-library-rtl-css'  href='http://localhost:8889/wp-includes/css/dist/block-library/common-rtl.css?ver=6.1-alpha-53344-src' media='all' />

Inline styles are replaced with their rtl versions. - For example to rotate the query pagination arrows.

With Gutenberg 13.4.0 active, the following rtl file is loaded, but it is the only one:
<link rel='stylesheet' id='wp-block-navigation-rtl-css' href='http://localhost:8889/wp-content/plugins/gutenberg/build/block-library/blocks/navigation/style-rtl.css?ver=1654842440' media='all' />
Inline styles are not replaced with their rtl versions, and the query pagination arrows are not rotated.

See #40684 (comment)

Step-by-step reproduction instructions

  1. Activate Gutenberg trunk or 13.4.0.
  2. Activate an RTL language. I tested with Arabic.
  3. Add or select a query pagination block and enable the arrow option. Save,
  4. Compare the position and direction of the arrows in the editor and the front, confirm that the views do not match.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress trunk
Gutenberg trunk or 13.4-0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@carolinan carolinan added Needs Testing Needs further testing to be confirmed. Internationalization (i18n) Issues or PRs related to internationalization efforts labels Jun 10, 2022
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jun 16, 2022
@carolinan carolinan removed the Needs Testing Needs further testing to be confirmed. label Jun 22, 2022
@sabernhardt
Copy link
Contributor

Is the bug reported in Trac 56325 related? When I had SCRIPT_DEBUG on, the RTL files loaded as they should. However, it did not fetch the RTL versions of minified files with the debug turned off.

@kathrynwp
Copy link

Thanks, @sabernhardt! Just wanted to point out that in my Trac report, I was able to replicate even without Gutenberg active.

@kathrynwp
Copy link

@jorgefilipecosta Hi, would you be able to take a look to see if the Trac ticket I reported is the same issue as this one? If so, is it possible to get this fix reviewed, as this bug seems to be is affecting all block themes? Thanks!

farhadsakhaei added a commit to farhadsakhaei/wordpress-develop that referenced this issue Aug 16, 2022
There is a problem on all RTL sites using block themes and block CSS files
This fixes loading all RTL CSS files and also add suffix to the styles object

This fixes:
https://wordpress.org/support/topic/rtl-problem-bug/
WordPress/gutenberg#41649
WordPress/gutenberg#41762

CC to locale managers:
@naokomc
@tobifjellner
@jorgefilipecosta
Copy link
Member

The trac thicked seems to be the same issue. I reviewed and approved PR #41762, which should fix it.

@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label May 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Internationalization (i18n) Issues or PRs related to internationalization efforts
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants