Acionar Javascript no Gutenberg (Editor de Blocos) Salvar


9

Portanto, eu tenho uma metabox que desejo acionar algum Javascript quando uma postagem é salva (para atualizar a página nesse caso de uso).

No Classic Editor, isso pode ser feito por meio de um redirecionamento simples conectado a save_post(com alta prioridade)

Mas como o Gutenberg converte o processo de economia de metaboxes existentes em chamadas individuais AJAX agora, ele precisa ser javascript, então como faço para:

  • Ouvir um evento em que todos os processos de salvamento estão completos e acionar o javascript? Se sim, como esse evento é chamado? Existe uma referência a esses eventos em algum lugar ainda? OU

  • Desencadear javascript dentro do processo AJAX de economia de metabox, que pode verificar o estado do processo de economia da página pai antes de continuar?


1
Fazendo Gutenberg recarga apenas seu METABOX é também uma solução potencial, como seria implementar a interface do usuário METABOX em JS e contando com wp.dataarmazenamentos de dados
Tom J Nowell

@ TomJNowell Eu encontrei esta referência que posso usar para verificar alguns estados, mas não sei como acessá-los: wordpress.org/gutenberg/handbook/data/data-core-editor #
majick

até agora eu tenho: por exemplo. wp.data.select('core/editor').isSavingPost()... esse tipo de acesso não está documentado em nenhum lugar que eu possa ver ... e também parece não confiável, pois retorna falsedepois que a postagem é salva pela primeira vez (antes que seja indefinida) se o editor ainda está salvando ou não. facepalm
majick

Você também pode levantar uma questão sobre o repositório Gutenberg, que está no tópico aqui, mas pode haver pessoas mais qualificadas respondendo lá. Também o sistema JS WP ganchos poderia ser uma possibilidade, mas isso é apenas uma suposição
Tom J Nowell

Loucamente, algo simples como esse já é solicitado e não é suportado: github.com/WordPress/gutenberg/issues/10044 ... portanto, estou tentando encontrar uma maneira de fazer isso sozinho.
1319

Respostas:


9

Não tenho certeza se existe uma maneira melhor, mas estou ouvindo, em subscribevez de adicionar um ouvinte de evento ao botão:

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 oficiais dos dados do editor de postagem: https://wordpress.org/gutenberg/handbook/designers-developers/developers/data/data-core-editor/


isso parece muito mais limpo, apenas curioso de onde vem o subscribemétodo? isso faz parte da wp.datafunção? Não o vejo mencionado nos documentos.
22919

Sim, subscribeé um método do módulo wp.data . Abra o console ao editar uma postagem no Gutenberg e execute wp.data. Isso lista todos os métodos disponíveis do módulo de dados.
tomyam

2
bem feito em encontrar isso! é lamentável que os documentos de Gutenberg sejam tão obscuros e não tenham exemplos suficientes. mais a expectativa de que os desenvolvedores conheçam e / ou queiram aprender métodos React é realmente demais ... Tenho certeza de que pode poupar bastante tempo, se você já o conhece, mas é uma verdadeira mudança de tempo, se você não souber. horas para descobrir como acessar qualquer coisa útil no wp.datamodelo. está de volta ao PHP (e editor clássico) para mim.
193

Obrigado por compartilhar isso! Como interceptar e parar de atualizar / publicar a postagem com base em uma condição.
Mohammad AlBanna 12/12/19

Parece que esse método também aciona o código quando um usuário clica no botão "Mover para a Lixeira" (o status da postagem é alterado para "lixeira" e o valor isSavingPost é "true", independentemente disso). Além disso, um clique em "Atualizar" acionou o código de assinatura 3 vezes no meu caso. Acabei ouvindo os cliques em .editor-post-publish-button, .editor-post-save-draft e .editor-post-preview.
Oksana Romaniv 6/03

2

Ok, muito mais solução hacky do que eu queria, mas funcionou ...

Aqui está uma maneira um pouco simplificada e abstrata de fazer isso do meu código, caso alguém precise fazer o mesmo (como eu tenho certeza que mais plugins farão no futuro próximo).

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

... só precisa mudar metabox_input_ide trigger_valuecombinar conforme necessário. :-)


Este foi útil, o único exemplo de referência que eu poderia encontrar para acessar a Gutenberg javascript módulo de hierarquia: github.com/front/gutenberg-js
majick

0

Você precisa coletar a função de cancelamento de assinatura da assinatura e da chamada para evitar a chamada em tempo múltiplo.

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

            }
        });
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.