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

[ryelle]

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

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
Local nav

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.

[ryelle]

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.

[sippis]

We just ran into this with @tnke and another colleague. Can confirm it's still an issue with 6.8.3 but partially fixed on 6.9-RC1-61214.

In 6.9-RC1-61214 RTL styles are inlined correctly, but style tag still suggests non RTL file as sourceURL.

register_block_style_handle sets the file path correctly for RTL, leaving src untouched. This leads to RTL file being inlined correctly as well, while src being non RTL version and making its way to sourceURL of inlined styles.

[westonruter]

What I see in RC1 using @ryelle's ​test plugin, when a site is set to have Arabic as its language.

With add_filter( 'styles_inline_size_limit', '__return_zero' )

SCRIPT_DEBUG is true:

<link
  rel="stylesheet"
  id="ryelle-rtl-style-example-style-rtl-css"
  href="http://localhost:8000/wp-content/plugins/rtl-style-example/build/style-index-rtl.css?ver=1762973381"
  media="all"
/>

SCRIPT_DEBUG is false:

<link
  rel="stylesheet"
  id="ryelle-rtl-style-example-style-rtl-css"
  href="http://localhost:8000/wp-content/plugins/rtl-style-example/build/style-index.css?ver=0.1.0"
  media="all"
/>

Note that in the latter the stylesheet lacks the -rtl suffix in the filename.

Without add_filter( 'styles_inline_size_limit', '__return_zero' )

SCRIPT_DEBUG is true:

<style id='ryelle-rtl-style-example-style-inline-css'>
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-ryelle-rtl-style-example {
  border-right: 10px solid #21759b;
  padding: 10px;
}

/*# sourceURL=http://localhost:8000/wp-content/plugins/rtl-style-example/build/style-index.css */
</style>

SCRIPT_DEBUG is false:

<style id='ryelle-rtl-style-example-style-inline-css'>
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-ryelle-rtl-style-example {
  border-right: 10px solid #21759b;
  padding: 10px;
}

/*# sourceURL=http://localhost:8000/wp-content/plugins/rtl-style-example/build/style-index.css */
</style>

---

The inlined CSS is correct regardless of SCRIPT_DEBUG, but when the CSS is not inlined, then it is incorrect. This is reflected in the example plugin:

<?php
// Prevent the site from inlining any CSS, inlined CSS uses
// the `path` data which is set correctly.
add_filter( 'styles_inline_size_limit', '__return_zero' );

Nevertheless, the sourceURL is remains incorrect, which reflects the underlying issue for non-inlined styles.

Note that as of #63018 more CSS will get inlined since the limit has been increased from 20K to 40K.