0

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}
10
  • Where did the ./ come from? I don't see it or the bg image in the linked tutorial
    – Tom J Nowell
    Oct 6 '21 at 0:11
  • I copied some other examples I saw that did this. It was the same result either way for me.
    – Chris
    Oct 6 '21 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
    Oct 6 '21 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
    Oct 6 '21 at 19:45
  • @TomJNowell Hi I added the CSS that is generated by the build process above.
    – Chris
    Oct 6 '21 at 21:01
0

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.

2
  • 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
    Oct 8 '21 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
    Oct 9 '21 at 0:14
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.