Pemicu Javascript di Gutenberg (Editor Blok) Simpan

Jadi saya memiliki metabox yang saya ingin memicu beberapa Javascript ketika sebuah posting disimpan (untuk menyegarkan halaman dalam use case ini.)

Di Editor Klasik, ini dapat dilakukan melalui pengalihan sederhana ke save_post(dengan prioritas tinggi)

Tetapi karena Gutenberg mengubah proses penyimpanan untuk metabox yang ada menjadi panggilan AJAX sekarang, itu perlu javascript, jadi bagaimana caranya:

Dengarkan acara di mana semua proses penyimpanan selesai dan kemudian memicu javascript? Jika demikian, apa sebutan acara ini? Apakah ada referensi untuk acara ini di mana saja? ATAU
Memicu javascript di dalam proses penyimpanan AJAX metabox, yang kemudian dapat memeriksa status proses penyimpanan halaman induk sebelum melanjutkan?

javascript metabox block-editor

— majik
sumber

Membuat Gutenberg memuat ulang hanya metabox Anda juga merupakan solusi potensial, seperti halnya mengimplementasikan UI metabox di JS dan mengandalkan wp.datapenyimpanan data

— Tom J Nowell

@ TomJNowell Saya telah menemukan referensi ini yang dapat saya gunakan untuk memeriksa beberapa negara, tetapi tidak yakin bagaimana mengaksesnya: wordpress.org/gutenberg/handbook/data/data-core-editor

— majick

sejauh ini saya punya: mis. wp.data.select('core/editor').isSavingPost()... jenis akses ini tidak didokumentasikan di mana pun saya bisa melihat ... dan tampaknya juga tidak dapat diandalkan karena kembali falsesetelah posting pertama kali disimpan (sebelum itu tidak ditentukan) apakah editor masih menyimpan atau tidak. facepalm

— majick

Anda dapat mengajukan masalah pada repo gutenberg untuk mendapatkan dukungan juga, ini pada topik di sini tetapi Anda mungkin mendapatkan lebih banyak orang berpengetahuan yang menjawab di sana. Juga sistem kait JS WP mungkin kemungkinan tetapi itu hanya tebakan

— Tom J Nowell

Anehnya, sesuatu yang sederhana seperti ini sudah diminta dan tidak didukung: github.com/WordPress/gutenberg/issues/10044 ... maka saya mencoba mencari cara untuk melakukannya sendiri.

— Majick

Jawaban:

Tidak yakin apakah ada cara yang lebih baik, tapi saya mendengarkan subscribedaripada menambahkan pendengar acara ke tombol:

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

  }
})

Dokumen resmi dari data Editor Pos: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

— tomyam
sumber

ini terlihat jauh lebih bersih, hanya ingin tahu dari mana subscribemetode itu berasal? apakah itu bagian dari wp.datafungsi? Saya tidak melihatnya disebutkan dalam dokumen.

— Majick

Ya, subscribeadalah metode modul wp.data . Buka konsol saat mengedit posting dengan Gutenberg dan jalankan wp.data. Ini mencantumkan semua metode modul data yang tersedia.

— tomyam

dilakukan dengan baik pada menemukan ini! sangat disayangkan bahwa dokumen-dokumen Gutenberg begitu tidak jelas dan tidak memiliki cukup contoh. ditambah harapan bahwa pengembang akan tahu dan / atau ingin belajar metode Bereaksi benar-benar terlalu banyak ... Saya yakin itu bisa menjadi penghemat waktu yang cukup jika Anda sudah mengetahuinya, tetapi itu adalah timewaster nyata jika Anda tidak - mengambil saya berjam-jam hanya untuk mengetahui cara mengakses sesuatu yang berguna dalam wp.datamodel. itu kembali ke PHP (dan editor klasik) untuk saya.

— Majick

Terima kasih telah berbagi ini! Bagaimana saya bisa mencegat dan berhenti memperbarui / mempublikasikan posting berdasarkan kondisi.

— Mohammad AlBanna

Tampaknya metode ini juga memicu kode ketika pengguna mengklik tombol "Pindahkan ke Sampah" (status posting berubah menjadi "sampah" dan nilai isSavingPost adalah "benar" terlepas dari ini). Juga, satu klik "Perbarui" memicu kode berlangganan 3 kali dalam kasus saya. Saya akhirnya mendengarkan klik pada .editor-post-publish-button, .editor-post-save-draft dan .editor-post-preview.

— Oksana Romaniv

Oke, jadi solusi hacking jauh lebih daripada yang saya inginkan, tetapi berhasil ...

Ini adalah cara yang sedikit disederhanakan dan abstrak untuk melakukannya dari kode saya, kalau-kalau ada yang perlu melakukan hal yang sama (karena saya yakin akan ada lebih banyak plugin dalam waktu dekat.)

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

... hanya perlu berubah metabox_input_iddan trigger_valuecocok sesuai kebutuhan. :-)

— majik
sumber

Ini berguna, satu-satunya contoh referensi yang dapat saya temukan untuk mengakses hierarki modul javascript gutenberg: github.com/front/gutenberg-js

— majick

Anda perlu mengumpulkan fungsi berhenti berlangganan dari berlangganan dan menelepon untuk menghindari panggilan berlipat kali.

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
sumber