I am facing a weird Issue, I want to create a simple image carousel using splide.js! In the block-editor I show the images as a scrollable list via “overflow: scroll”. I’ve added the splide.min.js as dependency using the “script” option at block-level. For some reason it also loads the script inside the block-editor!
Another Question I have regarding script files is: Is there any possibility to conditionally load the scripts, meaning only load them when the block is used on that page. I think I read somewhere that it is possible with one of the newest WP-Features, which would be pretty cool because now all assets get loaded on every single page, which can lead to a very bloated site in my opinion!
editor_script_handles string Block type editor only script handles.
script_handles string Block type front end and editor script handles.
So, the tooltip text in PG is wrong.
That said, there is also the view_script_handles parameter that includes the script only on the front end. I added the “View script” parameter to the Block action.
AFIK, this is default behavior for both block styles and scripts. Only those of used blocks are included on the displayed page.
Just double checked it and it seems that this doesn’t work for me. When I remove the script file from here it doesn’t get loaded on pages, where I don’t use that block. When the script file is linked here it get’s loaded on all pages!
One more question. Is it also possible somehow to execute code whenever the block changes? Is there something like an onChange() method on GB-Blocks? Would be cool for several more complex blocks!
@Wolfgang.Hartl is this a theme or plugin? If it is a theme and the JS file is included on one of the source template files in HTML, it will get enqueued in the theme. In such cases add Don’t export action to that script tag.
I’ve tried all that but it still get loaded. The template is set to “do not export”, the script itself is also set to “do not enqueue”, so it shouldn’t get loaded in my opinion, right?
I’ve tested to unlink it from the block action, and when I remove it there it doesn’t get loaded on the frontend any longer. So it’s really only available if I use it on the block level itself.
I’m gonna double-check again if it get’s loaded on any other page when I’m back on the pc. But on the index.html (which is the only html-template that get’s exported on that theme) it is definitely not set!
@matjaz I’ve now checked it again and the splide.min.js File is only used on 1 HTML-File. That specific file is set to “don’t export this page” and the script itself is set to “do not enqueue”.
So the only place where it could get enqueued is the block itself!
I face the same problem as @Wolfgang.Hartl here. Script ans CSS of Blocks is loaded even if the block is not added to the page (Hybrid Block in my case).
By default, WordPress loads styles and scripts of all registered blocks on the front-end, regardless if blocks are used on the page or not. It appears the change happened in WP 5.8.
To load only assets of blocks that are used on the page, add the following code to inc/custom.php:
Starting from Pinegrow Web Editor 7.8, WordPress plugin 1.0.15 and Theme Converter 2.2 (next updates) the WordPress builder can do this for you if you enable the Load only styles and scripts of blocks that are displayed on the front-end checkbox in project settings:
I added the above to our docs on block styling and scripts:
