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 | 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.
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.