How to trigger JS in gutenberg page load

by

I’ve loaded a jQuery script with enqueue_block_editor_assets for gutenberg and wp_print_scripts for frontend which is loaded fine.

add_action( 'wp_print_scripts', 'sk_load_script' );
add_action( 'enqueue_block_editor_assets', 'sk_load_script' );
add_action( 'enqueue_block_editor_assets', 'sk_gutenberg_script' );

The sk_load_script function loads both the frontend.js for both frontend and gutenberg whereas sk_gutenberg_script function loads block.js

However when I do in frontend.js:

jQuery(document).ready(function ($) {
    var place = jQuery('.sk-place');
    console.log(place);
}

That does not print anything on the console in the Gutenberg area. But it prints in the frontend.

In the block.js edit function, I have the custom event.

constructor() {
    const event = new Event( 'skLoad' );
    document.dispatchEvent( event );
}

With that, when I do in frontend.js,

document.addEventListener( 'skLoad', function( e ) {
     var place = jQuery('.sk-place');
    console.log(place);
}, false );

This runs fine as well, but only while adding the block.

How do I run that when the already preset block is in place on loading Gutenberg area, or when loading the block (not on edit only)?

Actually, I also need that on change of other inputs in the Gutenberg block settings, I mean in the edit() in block.js such as on change of this: https://ibb.co/SXkbhc6

Thanks!

0

Leave a Comment