[wp-trac] [WordPress Trac] #54243: Inlined block styles that involve external assets (images/fonts) and relative URL's not working as expected

[WordPress Trac]

#54243: Inlined block styles that involve external assets (images/fonts) and
relative URL's not working as expected
-----------------------------+-----------------------------
 Reporter:  cdyerkes         |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Editor           |    Version:  5.8.1
 Severity:  normal           |   Keywords:
  Focuses:  javascript, css  |
-----------------------------+-----------------------------
 When using the tool `npx @wordpress/create-block` to create a custom block
 that references assets like images or fonts within scss files used in the
 build process (that generate `style-index.css` referenced in `block.json`
 that is rendered on the front and backend), the assets are inlined on the
 front-end with relative URL's which results in a 404 not found error for
 the referenced asset, rather than a direct url to the file using the
 plugin's filepath.

 The problem still occurs for me using default WordPress themes and no
 other plugins aside from the custom block created following the
 `@wordpress/create-block` official tutorial
 [https://developer.wordpress.org/block-editor/handbook/tutorials/create-
 block/].

 Steps to reproduce:
 1. In a local dev environment (like Local), create a block: `npx
 @wordpress/create-block wp-test-block` in the plugins directory.
 2. Copy any external asset you want (like an image) into the block
 plugin's `src` directory.
 3. In the file located here `src/style.scss` add some lines to the
 prebuilt block CSS class that references the image or other asset you
 copied into the `src` directory like this (and save it):

 {{{
 .wp-block-wp-test-block {
     background-color: #21759b;
     color: #fff;
     padding: 2px;
     background-image: url(image-asset.png);
     background-repeat: repeat;
 }
 }}}
 4. Run `npm run build` on the block folder to run the build process and
 then activate the plugin in your local environment within the WP
 Dashboard.
 5. Go to a page in your local site and add your new block and update the
 page.
 6. View the page on the front-end and open your dev tools. You will see an
 error in the console marking the image asset as 404 not found.
 7. Inspect the page's HTML code in the inspector and you will see the
 block's CSS was inlined in the page like so:

 {{{
 <style id='wp-block-wp-test-block-style-inline-css'>
 .wp-block-wp-test-block{background-color:#21759b;background-
 image:url(images/image-asset.f0104819.png);background-
 repeat:repeat;color:#fff;padding:2px}
 </style>
 }}}

 The `background-image: url(image-asset.png);` has been inlined using a
 relative URL that would be equivalent to https://localhost.site/sample-
 page/images/image-asset.f0104819.png.

 What I would expect to happen is for the image asset to use the plugin URL
 automatically in the build process so the 404 error does not happen. It
 should have been:

 {{{
 <style id='wp-block-wp-test-block-style-inline-css'>
 .wp-block-wp-test-block{background-color:#21759b;background-image:url(/wp-
 content/plugins/wp-test-block/build/images/image-asset.f0104819.png
 );background-repeat:repeat;color:#fff;padding:2px}
 </style>
 }}}

 Or allow us to load a stylesheet (like a `<link rel="stylesheet"
 href="https://domain.com/wp-content/plugins/wp-test-
 block/build/style.css">` with the proper plugin filepaths via `block.json`
 used in the front-end rather than have to use a PHP function to enqueue
 block assets.

 This is my first trac bug submission, so apologies if something isn't
 clear or correct.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/54243>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform