Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial

WordPress is inlining the style as an optimisation:

When a page gets rendered, stylesheets that have opted-in to get inlined get added to an array. Their size is retrieved using a filesize call (which is why the path data is necessary), and the array is then ordered by ascending size (smaller to larger stylesheet). We then start inlining these assets by going from smallest to largest, until a 20kb limit is reached.

https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/

You have several options:

  • raise this as a bug with Trac
  • make your stylesheet bigger or add other stylesheets elsewhere that get inlined and reach the 20kb limit
  • disable style inlining
add_filter( 'styles_inline_size_limit', '__return_zero' );

Whatever you do, you should still raise a bug ticket on WP core. Specifically around inlining styles that have relative URLs.

I would also raise a bug on the Gutenberg Github too around block.json documenting as it would be best to have a way to use block.json and opt in or opt out, which doesn’t appear to be possible without writing PHP filters. It’s likely if you don’t raise this issue, nobody will be aware of the problem and more things like this will be done.