CSS and JS files for the block - what is the recommended way to implement it?

[dominikkucharski]

Hi

Thank you for this great plugin.

I would like to ask what is the recommended way of adding CSS/JS files to the block created with this plugin?

[palmiak]

Hi @dominikkucharski

It really depends on the situation :)

There are two main ways:

• You create a one monolith CSS and JS and there you create styles and scripts for your blocks. Than you just have to enqueue them and that's all.
• You create separate styles / scripts for each block and use those EnqueueStyle, EnqueueScript, EnqueueAssets

I prefer the first one - I have a separate style for frontend and editor (with SASS I import most of the stuff from the frontend one and apply some fixes if needed). The same goes for the JS.

But if you're using it for a plugin it's much better to use the second method.

[dominikkucharski]

Hi

I prefer the second method because WordPress will build each page only from the necessary JS and CSS files assigned to the currently used blocks. Later I can use Autooptimize to concatenate them. As a result, I'm getting the smallest possible asset files.

I've checked documentation again and I found

EnqueueStyle:
EnqueueScript:
EnqueueAssets:

options at the end of the comment. This is what I need!

I think I missed it before because it's not present on this page - https://palmiak.github.io/timber-acf-wp-blocks/

[palmiak]

You're right about loading only nessesary stuff. On the other hand having a browser cached monolith CSS/JS also is a good way. pon., 20 sty 2020, 16:44 użytkownik Dominik Kucharski < notifications@github.com> napisał:

…

Hi I prefer the second method because WordPress will build each page only from the necessary JS and CSS files assigned to the currently used blocks. Later I can use Autooptimize to concatenate them. As a result, I'm getting the smallest possible asset files. I've checked documentation again and I found EnqueueStyle: EnqueueScript: EnqueueAssets: options at the end of the comment. This is what I need! I think I missed it before because it's not present on this page - https://palmiak.github.io/timber-acf-wp-blocks/ — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#17?email_source=notifications&email_token=AAR34OQWSEVADO7XHHIQH5DQ6XBFLA5CNFSM4KIGJRYKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJNBMPA#issuecomment-576329276>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAR34OVEXT544PJOVESXO73Q6XBFLANCNFSM4KIGJRYA> .

[dominikkucharski]

Hi @palmiak

Could you tell me if there is some option to insert a variable into the URL to point to the theme?

This is what I've tried:

EnqueueStyle: /testing.css

Result in the source code:
<link rel='stylesheet' id='block-acf-testimonial-css' href='http://____.onlocal/testing.css?ver=5.3.2' type='text/css' media='all' />

I would like to use something like:
EnqueueStyle: {{ current_theme }}/assets/css/testing.css

[hacknug]

@dominikkucharski would get_template_directory_uri() or get_stylesheet_directory_uri() solve your issue?

[dominikkucharski]

Yes. That would be great. Is it possible to use it somehow in the comment section of the Twig file?

[hacknug]

I'm not sure what you mean by the comment section of the Twig file but you can use PHP functions on your template as shown here: https://timber.github.io/docs/guides/functions/#function

[palmiak]

Hi @dominikkucharski - won't {{ theme.link }} work?

If not maybe try a filter to pass a variable - either using timber/acf-gutenberg-blocks-data/{block_id} (if you need it just for some blocks) or by passing to context.

[palmiak]

@dominikkucharski - I'll mark it as solved for now. If you have more question - just ask :)

[ghost]

Not really sure what I am missing here, but none of these work for me:

Enqueue Script: {{ get_theme_file_uri('public/js/blocks/media-item.js') }}
Enqueue Script: /public/js/blocks/media-item.js
Enqueue Script: {{ theme.link }}/public/js/blocks/media-item.js

An example of using these is not present in the docs. What am I missing? Thanks.

[palmiak]

Hi @apersky

I'll check this out today. I mostly use one style for all blocks rather than this option so can't tell from top of my head.

[palmiak]

Hi @apersky after checking I must admit there was a small bug :) It will be fixed in today's push with few more minor changes

EDIT:
Just pushed the new version. Now it checks if EnqueueStyle or EnqueueScript is an absolute url. If not it will add your theme url.

[ghost]

@palmiak thanks for the quick response. I will check out the update soon, thanks!

[palmiak]

Closing it for now :)