Script File loads in Editor although it is not linked via "Editor Script"

Hey there,

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! :wink:

Thanks in Advance
Cheers
Wolfgang

@Wolfgang.Hartl looking closer at WP code:

  • the script is included on both front end and in the editor.
  • the editor script is included only in the editor

See docs for register_block_type() | Function | WordPress Developer Resources

The relevant parameters are

  • 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.

Added to PG WP plugin 0.1.1 BETA, out in the next PG release.

1 Like

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! :frowning:

I’m using that block only on one page though.

EDIT: Just realized that the same seems to happen for the CSS-File!

1 Like

Great, thanks for the fix! :slight_smile:

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! :slight_smile:

It’s probably possible by hooking in the WP Block editor with JS code. That would be beyond PG, though.

@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.

Thanks for your answer matjaz! :wink:

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!