Триггер 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.