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!

was this fixed in the meantime?

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

@Wolfgang.Hartl and @MichelyWeb please send your project to support@pinegrow.com so that I can investigate. Thanks!

Done! Thanks in advance.

On a page without any blocks added to it: all my Hybrid Blocks css is loaded:

@MichelyWeb @Wolfgang.Hartl, well, this was enlightening :slight_smile:

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:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

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:

4 Likes

Damn! That’s strange!

Thank you @matjaz for investigating and providing a solution.

1 Like

The above mentioned setting is now available in Pinegrow 7.72:

1 Like