it-swarm-es.com

Activar Javascript en Gutenberg (Editor de bloques) Guardar

Así que tengo un metabox que quiero activar un poco de Javascript cuando se guarda una publicación (para actualizar la página en este caso de uso).

En Classic Editor, esto se puede hacer a través de un simple redireccionamiento conectado a save_post (con una prioridad alta)

Pero como Gutenberg convierte el proceso de guardado de metaboxes existentes en llamadas AJAX ahora, debe ser javascript, así que, ¿cómo puedo:

  • ¿Escuche un evento donde todos los procesos de guardado estén completos y luego active el javascript? Si es así, ¿cómo se llama este evento? ¿Hay alguna referencia a estos eventos en algún lugar todavía?O

  • ¿Activar javascript dentro del proceso de guardado de metabox AJAX, que luego puede verificar el estado del proceso de guardado de la página principal antes de continuar?

7
majick

De acuerdo, mucho más solución de hacky de la que quería, pero funcionó ...

Aquí hay una forma ligeramente simplificada y abstracta de hacerlo desde mi código, en caso de que alguien tenga que hacer lo mismo (ya que estoy seguro de que habrá más complementos en el futuro cercano).

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

... solo tiene que cambiar metabox_input_id y trigger_value para que coincidan según sea necesario. :-)

2
majick

No estoy seguro de si hay una mejor manera, pero estoy escuchando subscribe en lugar de agregar un detector de eventos al botón:

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

  }
})

Documentos oficiales de los datos del editor de publicaciones: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/

4
tomyam