Activar Javascript en Gutenberg (Editor de bloques) Guardar


9

Por lo tanto, tengo un metabox que quiero activar 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 una simple redirección conectada a save_post(con alta prioridad)

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

  • ¿Escucha un evento donde todos los procesos de guardado están completos y luego activa el javascript? Si es así, ¿cómo se llama este evento? ¿Hay alguna referencia a estos eventos en alguna parte todavía? O

  • Activa JavaScript en el proceso AJAX de guardado de metabox, que luego puede verificar el estado del proceso de guardado de la página principal antes de continuar.


1
Hacer que Gutenberg vuelva a cargar solo su metabox también es una solución potencial, como lo sería implementar la interfaz de usuario de metabox en JS y confiar en wp.datalos almacenes de datos
Tom J Nowell

@TomJNowell He encontrado esta referencia que puedo usar para verificar algunos estados, pero no estoy seguro de cómo acceder a ellos: wordpress.org/gutenberg/handbook/data/data-core-editor
majick

hasta ahora tengo: por ejemplo. wp.data.select('core/editor').isSavingPost()... este tipo de acceso no está documentado en ningún lugar que pueda ver ... y también parece poco confiable, ya que regresa falsedespués de que la publicación se guarda por primera vez (antes de que no esté definida) si el editor todavía está guardando o no. facepalm
majick

También puede plantear un problema en el repositorio de gutenberg para obtener asistencia, es un tema aquí, pero es posible que haya más personas conocedoras que respondan allí. También el sistema de ganchos JS WP podría ser una posibilidad, pero eso es solo una suposición
Tom J Nowell

Loco, algo simple como esto ya se solicita y no es compatible: github.com/WordPress/gutenberg/issues/10044 ... por lo tanto, estoy tratando de encontrar una manera de hacerlo yo mismo.
majick

Respuestas:


9

No estoy seguro de si hay una mejor manera, pero estoy escuchando en subscribelugar 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/


esto se ve mucho más limpio, solo curiosidad de dónde subscribeviene el método? ¿Es parte de la wp.datafunción? No lo veo mencionado en los documentos.
majick

Sí, subscribees un método del módulo wp.data . Abra la consola cuando edite una publicación con Gutenberg y ejecútela wp.data. Esto enumera todos los métodos de módulos de datos disponibles.
tomyam

2
bien hecho en encontrar esto! Es lamentable que los documentos de Gutenberg estén tan oscuramente presentados y no tengan suficientes ejemplos. Además, la expectativa de que los desarrolladores sepan y / o quieran aprender los métodos React es realmente demasiado ... Estoy seguro de que puede ahorrar bastante tiempo si ya lo sabes, pero es una pérdida de tiempo real si no lo haces - tomó Horas solo para averiguar cómo acceder a algo útil en el wp.datamodelo. vuelve a PHP (y editor clásico) para mí.
majick

¡Gracias por compartir esto! ¿Cómo puedo interceptar y dejar de actualizar / publicar la publicación en función de una condición?
Mohammad AlBanna

Parece que este método también activa el código cuando un usuario hace clic en el botón "Mover a la papelera" (el estado de la publicación cambia a "papelera" y el valor isSavingPost es "verdadero" independientemente de esto). Además, un clic en "Actualizar" activó el código de suscripción 3 veces en mi caso. Terminé escuchando para hacer clic en el botón .editor-post-Publique, .editor-post-save-draft y .editor-post-preview.
Oksana Romaniv

2

Bien, entonces una solución mucho más 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 necesite hacer lo mismo (como estoy seguro de que más complementos lo harán 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 necesita cambiar metabox_input_idy trigger_valuecombinar según sea necesario. :-)


Esto fue útil, el único ejemplo de referencia que pude encontrar para acceder a la jerarquía del módulo JavaScript de Gutenberg
majick

0

Necesita recopilar la función de cancelación de suscripción de suscribirse y llamar para evitar llamadas de tiempo múltiple.

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

            }
        });
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.