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

Question

I am following the official WordPress "Create a Block Tutorial" located here: https://developer.wordpress.org/block-editor/handbook/tutorials/create-block/

I used this as a starting point for the plugin: npx @wordpress/create-block

I am using it in conjunction with Local by Flywheel for my dev environment. Mostly everything seems to be working except when I try to include other files in the block's CSS like a custom font file or an image. This is part of the tutorial: https://developer.wordpress.org/block-editor/handbook/tutorials/create-block/block-code/

Example:

@font-face {
    font-family: Gilbert;
    src: url(./Gilbert-color.otf);
    font-weight: bold;
}
.wp-block-create-block-tdblocks {
    font-family: Gilbert;
    font-size: 64px;
    font-weight: bold;
    background-image: url(./map_bg.png);
    background-repeat: repeat;
}

So after I insert the recommended code and run npm run build, the css file generated by the build process leaves the links to these files relative to the current web page's URL and not a link to its file location in the proper plugin folder.

Here is what it gives me for the image file for instance (which shows as a 404 error naturally):

https://taylor-design-starter-theme.local/sample-page/images/map_bg.f0104819.png

I'd expect it to give me this:

https://taylor-design-starter-theme.local/wp-content/plugins/tdblocks/build/images/map_bg.f0104819.png

I have tried adjusting the "url" value in the scss file to see if that would help. Like src: url(../map_bg.png); or src: url(map_bg.png); and that didn't seem to do anything.

Am I missing something? Or is there a way to get it to use the plugin directory?

Thank you.

EDIT: Here is the CSS generated by the build process when I run npm run build

@font-face{font-family:Gilbert;font-weight:700;src:url(fonts/Gilbert-color.02d3d364.otf)}.wp-block-create-block-tdblocks{background-image:url(images/map_bg.f0104819.png);background-repeat:repeat;font-family:sans-serif;font-size:64px;font-weight:700}

Where did the ./ come from? I don't see it or the bg image in the linked tutorial — Tom J Nowell
– Tom J Nowell ♦, Commented Oct 6, 2021 at 0:11
I copied some other examples I saw that did this. It was the same result either way for me. — Chris
– Chris, Commented Oct 6, 2021 at 19:25
absolute links would be bad practice as it means your block would be broken if you were in a sub-dir install or a subdomain install or installed WP in a subfolder. Likewise if the wp-content follder is custom or your plugin was renamed or installed in plugins-mu it would all break with absolute URLs — Tom J Nowell
– Tom J Nowell ♦, Commented Oct 6, 2021 at 19:43
what does the built CSS actually say if you look at the source and ignore what the browser thinks it should be? — Tom J Nowell
– Tom J Nowell ♦, Commented Oct 6, 2021 at 19:45
@TomJNowell Hi I added the CSS that is generated by the build process above. — Chris
– Chris, Commented Oct 6, 2021 at 21:01

Tom J Nowell · Accepted Answer · 2021-10-07 23:49:40Z

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.

Oh cool, thank you. I'll give some of this a try. I did see that other blocks did use PHP enqueue methods to do what I wanted in the area where you add register_block_type();, but like you said, it would be nice if you could just deal with this in block.json. I shall take a crack at filing a proper bug ticket and hope they don't ignore me haha. — Chris
– Chris, Commented Oct 8, 2021 at 20:56
I'd recommend block.json going forward, but it's frustrating to see this issue. It's well intentioned but doesn't account for all cases — Tom J Nowell
– Tom J Nowell ♦, Commented Oct 9, 2021 at 0:14

tiago calado · Accepted Answer · 2021-10-07 23:15:23Z

css will open the link where the page is, in this case is this one

https://taylor-design-starter-theme.local/sample-page/images

by adding ./image_name.png is the same as saying to look in that directory by an image called "image_name.png". if the image isnt there, it will not work.

i dont know how to give in css absolut path instead of an url, only in php. However if you put your image in that path, wordpress/wp-content/plugins/tdblocks/build/images/ that is the same as the first url. it will work. I know that it is not the answer desired, but it will work just fine.

Stack Exchange Network

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

2 Answers 2

Your Answer

Hot Network Questions

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions