Make WordPress Core

Opened 4 months ago

Last modified 4 months ago

#61625 new defect (bug)

Styles enqueued from block.json are not correctly configured for RTL

Reported by: ryelle's profile ryelle Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Script Loader Keywords:
Focuses: rtl Cc:

Description

When viewing a site using an RTL language, the RTL CSS files are not loaded for custom blocks using block.json. For example, a block might say "style": "file:./style-index.css", which is then loaded as-is on LTR sites. On RTL sites, the style-index.css file is still loaded, despite style-index-rtl.css existing.

This seems to be due to the register_block_style_handle function — it does correctly add data for the RTL file, style-index-rtl.css, but it also adds a suffix value (when SCRIPT_DEBUG = false).

When the style tag is printed, WP tries to update the file's url to the RTL file, but it's searching for .min.css to replace, and that isn't the right filename. The url is not updated, so it still loads the LTR style-index.css.

This can be replicated with the default create-block block, I've also created a simple demo plugin to explain: https://github.com/ryelle/rtl-style-example

Change History (2)

This ticket was mentioned in PR #638 on WordPress/wporg-mu-plugins by @ryelle.


4 months ago
#1

  • Keywords has-patch added

CSS registered from block.json are incorrectly configured with a suffix for RTL sites, but the files don't use a suffix. This prevents the files from being replaced correctly, causing visual issues on RTL sites.

The "simple" fix here is to just wipe out the suffix on all wporg-added styles. Checking for the rtl extra data should also prevent replacing anything that isn't using the block.json registration. We don't use .min or separate minified files anywhere (IIRC), so this shouldn't have any negative impacts.

See https://core.trac.wordpress.org/ticket/61625.

Before After
Query filters https://github.com/WordPress/wporg-mu-plugins/assets/541093/241bb2c2-8cd8-4113-8224-6f333caf0935 https://github.com/WordPress/wporg-mu-plugins/assets/541093/89d507ab-667b-4271-adb8-a1bdceee6737
Local nav https://github.com/WordPress/wporg-mu-plugins/assets/541093/89f68240-ee2b-4aed-9cd3-a48c29e5451f https://github.com/WordPress/wporg-mu-plugins/assets/541093/cd2bf803-9ae5-473c-a1ac-3c689f896e59

To test

This is easiest to test on a sandbox, so that you can view a real RTL site. When applied, this should fix a lot of the issues flagged on https://github.com/WordPress/Learn/issues/2483.

#2 @ryelle
4 months ago

  • Keywords has-patch removed

Removing the has-patch tag, the above PR is not for core & shouldn't have been attached. It's just a workaround for RTL on wordpress.org.

Note: See TracTickets for help on using tickets.