web-dev-qa-db-fra.com

Déclencher le Javascript sur Gutenberg (éditeur de blocs)

J'ai donc une metabox avec laquelle je veux déclencher du Javascript quand un article est sauvegardé (pour rafraîchir la page dans ce cas d'utilisation).

Dans Classic Editor, cela peut être fait via une simple redirection raccordée à save_post (avec une priorité élevée)

Mais puisque Gutenberg convertit le processus de sauvegarde des métaboxes existantes en appels individuels AJAX, il doit maintenant être javascript. Comment procéder pour:

  • Écoutez un événement où tous les processus de sauvegarde sont terminés, puis déclenchez le javascript? Si oui, comment s'appelle cet événement? Y a-t-il une référence à ces événements ailleurs? OU

  • Activer javascript dans le processus d’enregistrement de la metabox AJAX, qui peut ensuite vérifier l’état du processus d’enregistrement de la page parent avant de poursuivre?

javascriptmetaboxblock-editor
7
majick

Ok, beaucoup plus de solution que je ne le voulais, mais ça marche ...

Voici une manière légèrement simplifiée et abstraite de le faire à partir de mon code, au cas où quelqu'un aurait besoin de faire de même (car je suis sûr que davantage de plugins le seront dans un avenir proche.)

    var reload_check = false; var publish_button_click = false;
    jQuery(document).ready(function($) {
        add_publish_button_click = setInterval(function() {
            $publish_button = jQuery('.edit-post-header__settings .editor-post-publish-button');
            if ($publish_button && !publish_button_click) {
                publish_button_click = true;
                $publish_button.on('click', function() {
                    var reloader = setInterval(function() {
                        if (reload_check) {return;} else {reload_check = true;}
                        postsaving = wp.data.select('core/editor').isSavingPost();
                        autosaving = wp.data.select('core/editor').isAutosavingPost();
                        success = wp.data.select('core/editor').didPostSaveRequestSucceed();
                        console.log('Saving: '+postsaving+' - Autosaving: '+autosaving+' - Success: '+success);
                        if (postsaving || autosaving || !success) {classic_reload_check = false; return;}
                        clearInterval(reloader);

                        value = document.getElementById('metabox_input_id').value;
                        if (value == 'trigger_value') {
                            if (confirm('Page reload required. Refresh the page now?')) {
                                window.location.href = window.location.href+'&refreshed=1';
                            }
                        }
                    }, 1000);
                });
            }
        }, 500);
    });

... juste besoin de changer metabox_input_id et trigger_value pour correspondre au besoin. :-)

2
majick

Je ne sais pas s'il existe un meilleur moyen, mais j'écoute subscribe plutôt que d'ajouter un écouteur d'événement au bouton:

wp.data.subscribe(function () {
  var isSavingPost = wp.data.select('core/editor').isSavingPost();
  var isAutosavingPost = wp.data.select('core/editor').isAutosavingPost();

  if (isSavingPost && !isAutosavingPost) {
    // Here goes your AJAX code ......

  }
})

Documents officiels de l'éditeur de données: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

4
tomyam