Триггер Javascript на Гутенберге (редактор блоков) Сохранить


9

Таким образом, у меня есть метабокс, который я хочу активировать при включении поста в Javascript (чтобы обновить страницу в этом случае).

В Classic Editor это можно сделать с помощью простого перенаправления save_post(с высоким приоритетом)

Но поскольку Гутенберг теперь преобразует процесс сохранения существующих метабоксов в отдельные вызовы AJAX, он должен быть javascript, поэтому как мне это сделать:

  • Прислушаться к событию, когда все процессы сохранения завершены, а затем вызвать JavaScript? Если так, то как называется это событие? Есть ли еще ссылка на эти события? ИЛИ

  • Запустить javascript внутри AJAX-процесса сохранения метабокса, который затем может проверить состояние процесса сохранения родительской страницы перед продолжением?


1
Заставить Гутенберга перезагрузить только ваш метабокс также является потенциальным решением, как и реализация пользовательского интерфейса метабокса в JS и использование wp.dataхранилищ данных
Том Дж. Новелл

@ TomJNowell Я нашел эту ссылку, которую я могу использовать для проверки некоторых состояний, но не уверен, как получить к ним доступ: wordpress.org/gutenberg/handbook/data/data-core-editor
majick

пока у меня есть: например. wp.data.select('core/editor').isSavingPost()... этот вид доступа не документирован нигде, как я вижу ... и он также кажется ненадежным, так как он возвращает falseпосле первого сохранения поста (до того, как он не определен), сохраняет ли редактор по-прежнему или нет. Facepalm
majick

Вы также можете поднять вопрос о репо Гутенберга для поддержки, это здесь по теме, но вы можете получить больше знающих людей, отвечающих там. Также возможна система хуков JS WP, но это всего лишь предположение
Том Дж. Новелл

Безумно, что-то простое, подобное этому, уже запрашивается и не поддерживается: github.com/WordPress/gutenberg/issues/10044 ... поэтому я пытаюсь найти способ сделать это сам.
Маджик

Ответы:


9

Не уверен, что есть лучший способ, но я слушаю, subscribeа не добавляю прослушиватель событий к кнопке:

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

  }
})

Официальные документы с данными Редактора сообщений: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/


это выглядит намного чище, просто любопытно, откуда этот subscribeметод? это часть wp.dataфункции? Я не вижу упоминаний в документах.
Маджик

Да, subscribeэто метод модуля wp.data . Откройте консоль при редактировании поста с Гутенбергом и запустите wp.data. Здесь перечислены все доступные методы модуля данных.
Томьям

2
молодец, найдя это! К сожалению, документы Гутенберга так неясны и не имеют достаточного количества примеров. плюс ожидание того, что разработчики будут знать и / или хотят изучать методы React, слишком много ... Я уверен, что это может сэкономить время, если вы уже знаете это, но это настоящая трата времени, если вы не ... Мне часами, чтобы понять, как получить доступ к чему-либо полезному в wp.dataмодели. это возвращается к PHP (и классический редактор) для меня.
Маджик

Спасибо, что поделились этим! Как я могу перехватить и прекратить обновление / публикацию сообщения на основе условия.
Мохаммед АльБанна

Похоже, что этот метод также запускает код, когда пользователь нажимает кнопку «Переместить в корзину» (статус публикации изменяется на «корзину», а значение isSavingPost равно «true» независимо от этого). Кроме того, один щелчок «Обновить» вызвал код подписки 3 раза в моем случае. Я закончил тем, что слушал щелчок на кнопках .editor-post-publish, .editor-post-save-draft и .editor-post-preview.
Оксана Романова

2

Ладно, так гораздо более хакерское решение, чем я хотел, но оно заработало ...

Вот несколько упрощенный и абстрагированный способ сделать это из моего кода, на случай, если кому-то понадобится сделать то же самое (как я уверен, в ближайшем будущем будет больше плагинов).

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

... просто нужно изменить metabox_input_idи trigger_valueсоответствовать по мере необходимости. :-)


Это было полезно, единственный справочный пример, который я смог найти для доступа к иерархии модуля javascript
Гутенберга

0

Вам нужно собрать функцию отписки от подписки и вызова, чтобы избежать множественного времени вызова.

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

            }
        });
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.