Usando Post Meta Fields para armazenar atributos no WordPress Block Editor (Gutenberg)

Ao registrar e armazenar atributos no editor de blocos do WordPress (Gutenberg), você tem a opção de armazená-los como post meta, em vez dos atributos de bloco usuais.

Usando este método, você pode ter uma configuração em seu bloco que pode controlar algo de largura de postagem ou no modelo.

Uma observação importante sobre a renderização de meta-atributos de postagem

Você não pode renderizar meta atributos de postagem usando um método de salvamento de JavaScript. Uma decisão foi tomada pela equipe de Gutenberg para evitar isso, porque os blocos que renderizam os meta campos do post podem ser facilmente quebrados devido à mudança do meta do post em outro lugar no post.

Neste guia, vamos expandir o que já construímos em nosso guia de plugins WordPress Gutenberg, e também o guia Dynamic Block.

Pré-requisitos

• Familiarize-se com a criação de plugins para WordPress Gutenberg
• Familiarize-se com blocos dinâmicos e renderização do lado do servidor

Registrando o Post Meta em PHP

Antes de podermos usar um meta campo post em JavaScript, temos que ter certeza de que o registramos no PHP usando register_metae que o show_in_restargumento foi definido como true.

Seguindo o guia do Bloco Dinâmico, abra o arquivo PHP raiz do plug-in (neste caso wholesome-plugin.php) e adicione o seguinte código ao final desse arquivo após todas as outras funções:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_block_text',
        [
            'auth_callback' => '__return_true',
            'default'       => __( 'Wholesome Plugin – hello from the editor!', 'wholesome-plugin' ),
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Este código registra um metacampo chamado _wholesomecode_wholesome_plugin_block_textpara o posttipo de postagem. Também garante que a API REST possa acessar esse metacampo com o show_in_restvalor definido como true.

Também estamos passando a função __return_truepara o auth_callbackargumento para garantir que temos as permissões para acessar esse parâmetro. Se quiséssemos melhor segurança para este parâmetro, alteraríamos isso para uma função personalizada que verifica uma determinada função de usuário.

Registrando os Atributos Meta do Post em JavaScript

Novamente, seguindo o guia anterior, abra /src/index.jse substitua attributespelo seguinte:

attributes: {
  blockText: {
    meta: '_wholesomecode_wholesome_plugin_block_text',
    source: 'meta',
  },
},

Em vez de informar o tipo de atributo e atribuir um valor padrão, definimos a meta-chave da qual o atributo de dados virá e indicamos que sourceo atributo é meta.

Conforme indicado no aviso na parte superior deste guia, você não pode acessar os atributos do campo meta do post por meio do savemétodo JavaScript, então compile o plug-in npm starte vamos ver como podemos gerar o meta.

Renderizando o Post Meta

Como salvamos nosso atributo como post meta, podemos gerar isso em qualquer lugar no WordPress usando get_post_meta(desde que tenhamos o $post_id):

get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );

Continuando o guia do Bloco Dinâmico, vamos ver como podemos acessar este atributo no lado do servidor em PHP.

O meta não está disponível através do $attributesparâmetro do render_callback, pois os atributos meta do post não passam seu valor para este parâmetro, mas podemos acessar o $postobjeto global para obter o ID do post.

Com isso em mente, vamos atualizar nosso register_block_typepara gerar a meta do post:

register_block_type(
  'wholesomecode/wholesome-plugin',
  array(
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      global $post;
      $block_text = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_block_text', true );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',) );

Observe que não precisamos mais registrar o attributesaqui, pois estamos acessando apenas o metacampo post através da get_post_metafunção.

Usando o bloco

Este não é o melhor caso de uso deste tipo de meta, porém quando usamos o bloco, podemos ver que por estarmos armazenando os atributos como post meta, se atualizarmos o atributo em um bloco, ele atualiza todos os blocos, pois a meta da postagem é armazenada na postagem, não no bloco individual:

Postar meta atributos em ação

• Dê uma olhada na criação de blocos filho aninhados com o InnerBlockscomponente
• Use o post meta no Gutenberg ainda mais criando Meta Boxes personalizadas no Gutenberg
• Dê uma olhada no uso de configurações para armazenar dados na tabela de opções em Gutenberg