[wp-trac] [WordPress Trac] #61625: Styles enqueued from block.json are not correctly configured for RTL

[WordPress Trac]

#61625: Styles enqueued from block.json are not correctly configured for RTL
---------------------------+--------------------------
 Reporter:  ryelle         |       Owner:  westonruter
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  7.0
Component:  Script Loader  |     Version:
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  rtl
---------------------------+--------------------------
Changes (by westonruter):

 * owner:  (none) => westonruter
 * status:  new => accepted
 * milestone:  Awaiting Review => 7.0


Comment:

 What I see in RC1 using @ryelle's [https://github.com/ryelle/rtl-style-
 example 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
 <?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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61625#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform