it-swarm-vi.tech

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 Trình chỉnh sửa Cổ điển, đ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ẻ, 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 quá trình lưu trữ metabox AJAX, 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?

7
majick

Được rồi, vì vậy cách giải quyết hacky 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_idtrigger_value để khớp khi cần. :-)

2
majick

Không chắc có cách nào tốt hơn không, nhưng tôi đang lắng nghe subscribe thay vì 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/

4
tomyam