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

9

J'ai donc une métabox que je veux déclencher du Javascript quand un post est enregistré (pour rafraîchir la page dans ce cas d'utilisation.)

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

Mais puisque Gutenberg convertit le processus d'enregistrement des métaboxes existantes en appels AJAX individuels maintenant, il doit être javascript, alors comment puis-je:

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

  • Déclencher javascript dans le processus AJAX d'enregistrement de la métaboxe, qui peut ensuite vérifier l'état du processus d'enregistrement de la page parent avant de continuer?

majick
la source
1
Faire recharger Gutenberg uniquement votre métabox est également une solution potentielle, tout comme l'implémentation de l'interface métabox dans JS et en s'appuyant sur wp.datales magasins de données
Tom J Nowell
@TomJNowell J'ai trouvé cette référence que je peux utiliser pour vérifier certains états, mais je ne sais pas comment y accéder: wordpress.org/gutenberg/handbook/data/data-core-editor
majick
jusqu'à présent, j'ai: par exemple. wp.data.select('core/editor').isSavingPost()... ce type d'accès n'est pas documenté partout où je peux voir ... et il semble également peu fiable car il revient falseaprès la première sauvegarde du message (avant qu'il ne soit pas défini), que l'éditeur soit toujours en train de sauvegarder ou non. facepalm
majick
Vous pouvez également soulever un problème sur le référentiel gutenberg pour le support, c'est sur le sujet ici, mais vous pourriez obtenir plus de personnes compétentes qui y répondent. Le système de crochets JS WP pourrait également être une possibilité, mais ce n'est qu'une supposition
Tom J Nowell
Fou, quelque chose de simple comme celui-ci est déjà demandé et non pris en charge: github.com/WordPress/gutenberg/issues/10044 ... donc j'essaie de trouver un moyen de le faire moi-même.
majick

Réponses:

9

Je ne sais pas s'il y a une meilleure façon, mais j'écoute subscribeplutôt que d'ajouter un écouteur d'événements 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 des données du Post Editor: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

tomyam
la source
cela semble beaucoup plus propre, juste curieux d'où vient la subscribeméthode? fait-il partie de la wp.datafonction? Je ne le vois pas mentionné dans les documents.
majick
Oui, subscribeest une méthode du module wp.data . Ouvrez la console lorsque vous éditez un article avec Gutenberg et exécutez wp.data. Ceci répertorie toutes les méthodes de module de données disponibles.
tomyam
2
bravo pour trouver ça! il est regrettable que les documents de gutenberg soient si obscurément disposés et n'aient pas suffisamment d'exemples. plus l'attente que les développeurs connaissent et / ou veulent apprendre les méthodes React est vraiment trop ... Je suis sûr que cela peut être un gain de temps considérable si vous le savez déjà, mais c'est un véritable gaspillage de temps si vous ne le faites pas - me heures juste pour savoir comment accéder à tout ce qui est utile dans le wp.datamodèle. c'est de retour à PHP (et à l'éditeur classique) pour moi.
majick
Merci d'avoir partagé ça! Comment puis-je intercepter et arrêter la mise à jour / publication du message en fonction d'une condition.
Mohammad AlBanna
Il semble que cette méthode déclenche également le code lorsqu'un utilisateur clique sur le bouton "Déplacer vers la corbeille" (l'état de la publication passe à "corbeille" et la valeur isSavingPost est "vraie" malgré cela). De plus, un clic de mise à jour a déclenché le code d'abonnement 3 fois dans mon cas. J'ai fini par écouter le clic sur le bouton .editor-post-publish, .editor-post-save-draft et .editor-post-preview.
Oksana Romaniv
2

D'accord, donc beaucoup plus de solution hacky que je ne le voulais, mais ça a fonctionné ...

Voici une façon 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 (comme je suis sûr que plus de plugins le feront 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);
    });

... il suffit de changer metabox_input_idet de trigger_valuefaire correspondre au besoin. :-)

majick
la source
C'était utile, le seul exemple de référence que j'ai pu trouver pour accéder à la hiérarchie du module javascript gutenberg: github.com/front/gutenberg-js
majick
0

Vous devez collecter la fonction de désabonnement de l'abonnement et de l'appel pour éviter les appels multiples.

const unsubscribe = wp.data.subscribe(function () {
            let select = wp.data.select('core/editor');
            var isSavingPost = select.isSavingPost();
            var isAutosavingPost = select.isAutosavingPost();
            var didPostSaveRequestSucceed = select.didPostSaveRequestSucceed();
            if (isSavingPost && !isAutosavingPost && didPostSaveRequestSucceed) {
                console.log("isSavingPost && !isAutosavingPost && didPostSaveRequestSucceed");
                unsubscribe();


                // your AJAX HERE();

            }
        });
Phillip Kamikaze
la source