Looking for callback function after Gutenberg is rendered?

On post/page editing screen, I want to call my functions as soon Gutenberg editor/whole page is fully rendered and visible. On WP 5.2.2, I have tried jQuery(document).ready(function () {}); and wp.domReady(function() {}); but both of these functions are called before components are rendered.

Are there any similar function or callbacks are available that we can use in this situation?

Edit:
Scenario is, I am working on a plugin that allows the user to password protect children of a password protected parent page. For this, on page editing screen, I need to show a checkbox just below the password field which will allow user to select whether child pages of this page should also be locked or not.

I had it working for WordPress versions earlier than 5.0, but since Gutenberg, it is broken. If there is a better way to do it, I would love to learn.

Thanks

1 Answer
1

Well, its very hard to find developer documented posts about Gutenberg and the block editor. This solution works for us, and as Gutenberg is using javascript for everything, we do the same, but wraps it up in jQuery, as we hate react API.

;( function( $ ) {
    $(document).ready(function(){
        
        // EVERYTHING HERE IS A UNIQUE SCOPE
        
        function this_init(){
            // Start calling your functions from here:
            do_something();
            do_something_else();
        }

        let blockLoaded = false;
        let blockLoadedInterval = setInterval(function(){
            if(document.getElementById('post-title-0')){
                blockLoaded = true;
                this_init();
            }
            if(blockLoaded){
                clearInterval(blockLoadedInterval);
            }
        }, 500);
        
        function do_something(){
            alert('Hallo Gutenberg, lets do some performance');
        }
        
        function do_something_else(){
            alert('Hallo Gutenberg, lets do some performance');
        }

    });
})(jQuery);

In PHP/ functions.php use the hook for backend only to load your script file:

add_action('enqueue_block_editor_assets', 'your_enqueue_scripts_php_function');

I suppose there will be a Gutenberg “API” update on this issue just like TinyMce before render etc etc. And No, its not a hack, its just like Gutenberg, as the block editor is just a huge client script hack.

Tip:
In case you need actions after all the lazy load going on in the edit screed. just use jquery as ajaxStop() functions as so on.

Leave a Comment