it-swarm.com.de

Triggern Sie Javascript auf Gutenberg (Blockeditor) Speichern

Ich habe also eine Metabox, die ich beim Speichern eines Beitrags aktivieren möchte (um die Seite in diesem Anwendungsfall zu aktualisieren).

Im Classic Editor kann dies über eine einfache Weiterleitung erfolgen, die an save_post angehängt ist (mit hoher Priorität).

Da Gutenberg den Speichervorgang für vorhandene Metaboxen jetzt in einzelne AJAX Aufrufe umwandelt, muss Javascript aktiviert sein. Wie kann ich also entweder:

  • Auf ein Ereignis warten, bei dem alle Speichervorgänge abgeschlossen sind und dann das Javascript auslösen? Wenn ja, wie heißt dieses Ereignis? Gibt es noch irgendwo einen Hinweis auf diese Ereignisse? ODER

  • Javascript im Metabox-Speichervorgang AJAX auslösen, der dann den Status des Speichervorgangs der übergeordneten Seite überprüfen kann, bevor er fortfährt?

7
majick

Okay, so viel mehr hackige Lösung als ich wollte, aber es hat funktioniert ...

Hier ist eine etwas vereinfachte und abstrahierte Methode, um dies aus meinem Code heraus zu tun, falls jemand das Gleiche tun muss (da ich sicher bin, dass in naher Zukunft weitere Plugins verfügbar sein werden.)

    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);
    });

... müssen nur metabox_input_id und trigger_value nach Bedarf ändern. :-)

2
majick

Ich bin mir nicht sicher, ob es einen besseren Weg gibt, aber ich höre subscribe, anstatt der Schaltfläche einen Ereignis-Listener hinzuzufügen:

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 ......

  }
})

Offizielle Dokumente der Post Editor-Daten: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

4
tomyam