plugin development - Looking for callback function after Gutenberg is rendered?

admin管理员组

文章数量:1203411

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

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

• plugin-development
• javascript
• block-editor

Share Improve this question edited Aug 4, 2019 at 21:32 M-R asked Aug 3, 2019 at 23:33 M-RM-R 2,6162121 silver badges3131 bronze badges 5

• What problem are you trying to solve by doing this? What are the functions you're trying to call? There's an extremely high chance that you need to do this in a completely different way, or that there are APIs that do what you need to do without going down this particular route, but because there's no context to your question it's impossible to properly answer it – Tom J Nowell ♦ Commented Aug 3, 2019 at 23:47
• @TomJNowell Thanks for asking, I have updated the question. – M-R Commented Aug 4, 2019 at 21:33
• Ah thanks for the edit, in that case your approach will not work, Whereas previously you had a HTML dom that you modified with javascript/jQuery to add more HTML, Virtual Dom based frameworks such as React and Vue work the other way around. Based on data they render their HTML, so anything you add via jQuery will disappear when that component changes and the DOM is replaced. Instead, you should follow the docs and add the relevant panels for the additional options you desire to add, or, just use a standard PHP metabox if you want a straight forward approach – Tom J Nowell ♦ Commented Aug 5, 2019 at 0:13
• @TomJNowell I have worked in React and aware of the issue you raised with this approach. But, I do not want to add another block, I want my checkbox to appear right below the password field. May be, I should look for extending the built-in React component. Is that possible? – M-R Commented Aug 5, 2019 at 17:26
• 1 I made no mention of a block, there are APIs for adding additional panels and controls to these sections. Besides, in a React application it never really finishes rendering as long as interaction and state change is possible, your checkbox would dissapear as soon as that panel was adjusted in any way, and you'd have no way to plumb it into the data structures so the value could be saved on the appropriate calls. As for overriding the react component, no, not without replacing the editor or monkey patching, better to just use the provided APIs – Tom J Nowell ♦ Commented Aug 5, 2019 at 22:50

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -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.

本文标签： plugin developmentLooking for callback function after Gutenberg is rendered