1

I'm using the following in PHP to register my custom block:

register_block_type( __DIR__, /* block.json */
  array(
    'render_callback' => 'render_my_block',
    'script' => 'my-custom-js',
  )
);

The block is registered but the my-custom-js JS file is loaded on the frontend and in the backend editor. How can I load it only on the frontend?

I tried 'view_script' => 'my-custom-js' and 'view-script' => 'my-custom-js' but it does not work.

I know that I can use is_admin() to check if it's in the editor and not load a js file but I'm trying to see how it can be done with register_block_type().

2
  • How do you register the my-custom-js script? Isn't the script indeed used only to enqueue the script on the front-end? (I mean, the documentation suggests it's so..) Could it be that you accidentally enqueued the script manually on the back-end?..
    – Sally CJ
    Jan 17, 2022 at 4:11
  • @SallyCJ this is for register_block_type. It loads the script in the backend in the editor as well as frontend.
    – CyberJ
    Jan 17, 2022 at 8:13

1 Answer 1

1

If you're using WordPress 5.8 (e.g. v5.8.3), then I'm afraid the answer to this:

I know that I can use is_admin() to check if it's in the editor and not load a js file but I'm trying to see how it can be done with register_block_type().

.. is it can't; not in WordPress 5.8.

More Details

Excerpt from https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script: (* note the "Since" part that I highlighted)

View Script

  • ...
  • Property: viewScript
  • Since: WordPress 5.9.0

1| { "viewScript": "file:./build/view.js" }

Block type frontend script definition. It will be enqueued only when viewing the content on the front of the site.

So the viewScript property (in block.json/JS) or the view-script in PHP, didn't work because the property/argument will only be supported in WordPress 5.9 ( props to https://jeremyfelt.com/2021/12/17/some-block-json-minutia/ ).

Alternate Solution

Apart from only registering the script handle if ( ! is_admin() ), you could also try these:

  1. Unregister the script right after you called register_block_type(). E.g.

    add_action( 'init', function () {
        register_block_type( __DIR__, /* block.json */
            array(
                'render_callback' => 'render_my_block',
                'script'          => 'my-custom-js',
            )
        );
    
        wp_deregister_script( 'my-custom-js' );
    } );
    
  2. And manually register the script using the wp_enqueue_scripts hook. E.g.

    add_action( 'wp_enqueue_scripts', function () {
        wp_register_script( 'my-custom-js', plugins_url( 'build/script.js', __FILE__ ) );
    }, 9 );
    

But make sure to use the proper script handle based on your block name. E.g. If the name is my-plugin/notice, then the handle would be my-plugin-notice-script, i.e. the / (slash) is replaced with - (dash), and then append a -script at the end.

Tried & tested working in WordPress v5.8.3.

2
  • Thanks!! I eventually used is_admin() and will wait for WP 5.9 support. I wish the official documentation added a note that viewScript was not yet supported lol!
    – CyberJ
    Jan 21, 2022 at 2:24
  • 1
    I actually also almost didn't notice that "Since" part.. :D And yes, it's easier to do 'script' => is_admin() ? '' : 'my-custom-js', .. but if you wanted the block metadata (e.g. in block.json) to always have a non-empty script property, then you could use the "unregister trick" in my answer :)
    – Sally CJ
    Jan 21, 2022 at 3:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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