block editor - How to trigger JS in gutenberg page load

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:

Thanks!

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!

• block-editor

Share Improve this question edited Jan 21, 2021 at 16:51 micky asked Jan 12, 2021 at 7:14 mickymicky 11366 bronze badges 5

• This might help github.com/WordPress/gutenberg/issues/… – cameronjonesweb Commented Jan 12, 2021 at 7:34
• 1 Put your sk_load_script and sk_gutenberg_script in here. – NextGenThemes Commented Jan 21, 2021 at 17:43
• Are your scripts supposed to load for all blocks? Because you should register them with a specific block otherwise. – NextGenThemes Commented Jan 21, 2021 at 17:44
• What are you trying to accomplish with the code that you would like to execute "when the Block Editor loads?" There are many entry points to Block Editor functionality, and a lot of them are specifically tailored for various purposes - there may well be one far more suited to your needs than a generic "load" event. Similarly, what do you want to do externally when the block's settings change that can't already be done in the edit() component? – bosco Commented Jun 17, 2021 at 4:52
• 2 note that in gutenberg the DOM elements/tags on the page are managed by React and could be destroyed and recreated at any time, so be careful about modifying them with jQuery, especially if you're storing data in those tags as they may be lost. WordPress/the block editor itself uses WP Data to store things then uses that data to create user interface. What you're trying to do is also unclear, any context as to the actual problem you're trying to face will help, as the answer to this question may not be the solution you hoped it to be. – Tom J Nowell ♦ Commented Jun 17, 2021 at 10:17

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

To achieve your goals in the Gutenberg editor (both when the block is initially loaded and when its settings are updated), you need to ensure your script (frontend.js) listens to events related to block rendering and block attribute changes. Here's how you can adjust your approach:

Ensure Script Compatibility with the Gutenberg Editor Lifecycle

Gutenberg renders blocks dynamically in the editor, so your JavaScript must hook into those rendering events. Leverage React State Updates for Attribute Changes

Gutenberg blocks update dynamically through React. If you want to handle changes, you should tie into React's lifecycle or block attributes.

Use wp.data.subscribe to detect changes in the Gutenberg editor state for blocks already in place.

Dispatch custom events in your edit function when specific attributes change.

Listen for those events in frontend.js to run your desired logic. By combining wp.data.subscribe with custom events, you can effectively handle both initial rendering and changes in the Gutenberg editor.