Javascript kích hoạt trên Gutenberg (Trình chỉnh sửa khối) Lưu

Vì vậy, tôi có một metabox mà tôi muốn kích hoạt một số Javascript khi bài đăng được lưu (để làm mới trang trong trường hợp sử dụng này.)

Trong Classic Editor, điều này có thể được thực hiện thông qua một chuyển hướng đơn giản được nối với save_post(với mức độ ưu tiên cao)

Nhưng vì Gutenberg chuyển đổi quy trình lưu cho các metabox hiện có thành các cuộc gọi AJAX riêng lẻ ngay bây giờ, nên nó cần phải là javascript, vậy tôi phải làm thế nào:

• Nghe một sự kiện trong đó tất cả các quá trình lưu đã hoàn tất và sau đó kích hoạt javascript? Nếu vậy sự kiện này được gọi là gì? Có một tài liệu tham khảo cho các sự kiện này bất cứ nơi nào chưa? HOẶC LÀ

• Kích hoạt javascript bên trong quy trình AJAX lưu metabox, sau đó có thể kiểm tra trạng thái của quy trình lưu trang mẹ trước khi tiếp tục?

Không chắc chắn nếu có một cách tốt hơn, nhưng tôi đang lắng nghe subscribehơn là thêm một trình lắng nghe sự kiện vào nút:

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

  }
})

Tài liệu chính thức của dữ liệu Trình chỉnh sửa bài: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

Được rồi, vì vậy cách giải quyết hack nhiều hơn tôi muốn, nhưng làm cho nó hoạt động ...

Đây là một cách đơn giản và trừu tượng để thực hiện nó từ mã của tôi, trong trường hợp bất kỳ ai cũng cần phải làm như vậy (vì tôi chắc chắn sẽ có nhiều plugin hơn trong tương lai gần.)

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

... Chỉ cần thay đổi metabox_input_idvà trigger_valueđể phù hợp khi cần thiết. :-)

Bạn cần thu thập chức năng hủy đăng ký từ đăng ký và gọi để tránh cuộc gọi nhiều lần.

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

            }
        });