Gutenberg: Event or callback after block loaded on editor

[adekherry]

I'm making a block that using ServerSideRender. In this case, i will need to trigger some javascript (jquery) function when the element finish loaded on the backend editor. Is there any event listener or hook for gutenberg for this case?

[buzzclue]

@adekherry have you found the solution?

el( ServerSideRender, {
    block: 'meetongo/meetup-slider',
    attributes: props.attributes,
    onChange: sliderIsUpdated()
} ),

I have tried onChange but its triggered before render or right after block settings are changed.

[adekherry]

@buzzclue, previously i create a new components (extends the ServerSideRender components), then i override componentDidUpdate method. It's looks like this:

componentDidUpdate( prevProps, prevState ) {
        super.componentDidUpdate(prevProps);
        if ( this.state.response !== prevState.response ) {
            console.log('hit here')
        }
    }

[designsimply]

@adekherry I am closing this issue because it appears that you have found a solution already. If I have misread that or if you are suggesting a change to componentDidUpdate would you please leave a comment letting me know so I can re-open the issue in that case?

[premitheme]

Hi, I'm still a beginner in React and learning about all the new stuff about WP editor.

I searched a lot but didn't find any related issues other than this, so I chose to reopen it instead of creating another one.

I'm trying to create a custom image slider block/carousel, and I faced the same problem: I need an event to hook the slider init function to.

Whether the block renders the structure directly or using ServerSideRender for doing this, I think it's helpful and very important to have a built-in block-specific event that is fired directly after the block is loaded (each block has its own event, maybe using block name as an identifier).

For example, I used to create custom widgets for Elementor, it provides such an event for every widget so I can make sure that my custom scripts initialized at the right moment.

If there's already such a way for doing this, or I'm missing anything, please direct me.

[dgwyer]

I also need this.

I have a block that runs some vanilla JS (i.e. not React) as soon as the page is ready. At the moment it's contained inside a jQuery ready block.

jQuery(document).ready(function ($) {
  // code here...
}

This works fine on the front end but not for the block editor as the code should run as soon as the page/editor is ready.

Incidentally, if the code was waiting for some interaction from the user such as a form submission or a mouse-click then it would work fine as the editor would have fully loaded before this could take place.

Ideally, the code should run immediately as soon as the editor is loaded and all blocks have been mounted.

[mohsinrasool]

@designsimply Any news on this? I want to call some functions as soon editor is visible and whole page is rendered. On WP 5.2.2, jQuery(document).ready(function () { and wp.domReady(function() { both called the function before components are rendered.

Are there any similar function or events that we can use to accomplish this situation?

Thanks

[designsimply]

@mohsinrasool I'm sorry but this is a bit outside of my expertise. May I ask that you please try asking for help at https://wordpress.stackexchange.com/ and include a code sample for them if possible.

[codersantosh]

I was also looking for the same options but could not find any solutions anywhere. It seems like no event trigger after block loaded.

I have created following function and it works.

let blockLoaded = false;
let blockLoadedInterval = setInterval(function() {
    if (document.getElementById('post-title-0')) {/*post-title-0 is ID of Post Title Textarea*/
        //Actual functions goes here

        blockLoaded = true;
    }
    if ( blockLoaded ) {
        clearInterval( blockLoadedInterval );
    }
}, 500);

[mohsinrasool]

It will work in some cases only. Because, React render each component based on its states. So, what I want to do, this snippet can't help me. Thanks for sharing, anyway.

[BrunoIvanAmadori]

I was also looking for the same options but could not find any solutions anywhere. It seems like no event trigger after block loaded.

I have created following function and it works.

let blockLoaded = false;
let blockLoadedInterval = setInterval(function() {
    if (document.getElementById('post-title-0')) {/*post-title-0 is ID of Post Title Textarea*/
        //Actual functions goes here

        blockLoaded = true;
    }
    if ( blockLoaded ) {
        clearInterval( blockLoadedInterval );
    }
}, 500);

Thank you so much for this snippet. Definitely saved the day. Great workaround.

Although I'm still dissatisfied... It seems there's no way to attach code after all the Gutenberg editor is loaded, being "outside" of Gutenberg. (I wanted to assign 'featured image url' as a background of a styled post_title block)

All solutions I got on google point to "componentDidMount", but I can't access to that unless I'm coding a Gutenberg React plugin I understand... which is not the case.

I need to continue studying.