Usando PHP para renderizar um bloco no editor do WordPress (Gutenberg)

Ao criar um bloco no WordPress Block Editor (Gutenberg), você provavelmente está usando JavaScript para renderizar o bloco no conteúdo de sua postagem. Neste guia, veremos como usar o PHP para renderizar o bloco, criando o que é conhecido como ‘Bloco Dinâmico’.

Vamos simplificar neste guia e expandir o que já construímos em nosso guia de plugins WordPress Gutenberg. No entanto blocos dinâmicos são super úteis para apresentar informações mais complexas em um bloco, como um post loop.

Pré-requisitos

• Familiarize-se com a criação de plugins para WordPress Gutenberg

Criar PHP para o bloco dinâmico

Se você ainda não o fez, conclua as etapas no guia de plug-ins do WordPress Gutenberg, para ter uma área RichText editável.

Adicione o seguinte PHP ao seu plugin (neste exemplo wholesome-plugin.php), substituindo o bloco de código que começa com register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Atributos

A primeira coisa que você notará é que redefinimos os atributos neste arquivo, e eles são os mesmos que definimos no /src/index.jsarquivo em nosso guia anterior.

A razão pela qual precisamos fazer isso é para que nossa saída possa acessar os tipos de atributo e seu conteúdo padrão.

Renderizar retorno de chamada

No código acima, também adicionamos o argumento render_callbackà register_block_typefunção. Isso lida com a saída do bloco, substituindo a savefunção no /src/index.jsarquivo.

A render_callbackfunção recebe dois parâmetros. Estes são:

• $attributes— recebe os atributos que definimos tanto no attributesargumento desta função quanto nos do /src/index.jsarquivo
• $content— recebe o que foi salvo pelo savemétodo no /src/save.jsarquivo. Isso é útil se estivermos renderizando InnerBlocks, que de outra forma não seria passado para o método de renderização do PHP.

Neste exemplo, usamos uma função anônima para o render_callback, mas poderíamos facilmente ter passado uma referência a uma função aqui e defini-la em outro lugar.

Observe que não temos a capacidade de acessar as props no PHP render_callback, então tivemos que adicionar manualmente a classe HTML à <p>tag para que nossos estilos ainda funcionem (em teoria, poderíamos aproveitar o $contentparâmetro e fazer um pouco de encontrar e substituir truques se os quiséssemos, mas isso é algo para outro guia).

Remova o método de salvamento do JavaScript

Como mencionado anteriormente, o $contentparâmetro da render_callbackfunção armazena a saída do savemétodo JavaScript, mas observe que não estamos usando isso em nosso código.

No arquivo, /src/index.jssubstitua o savemétodo pelo seguinte:

Isso diz ao método save para não retornar nada.

Remover a saveimportação

Enquanto estamos nisso, remova também a seguinte linha de /src/index.js:

import save from './save';

Agora você pode excluir o /src/save.jsarquivo também.

Compilando o Plugin

Abra o terminal, verifique se você está no diretório raiz do seu plugin e execute o seguinte comando:

O script irá compilar. Se você tiver algum erro, o terminal deve informá-lo sobre o que são.

Use o bloco dinâmico

Agora você deve conseguir inserir o bloco em uma página, editar seu conteúdo e visualizá-lo no front-end.

O bloco dinâmico em ação

Neste exemplo básico, o bloco terá a mesma aparência e comportamento como se você tivesse usado um método de renderização JavaScript.

• Dê uma olhada na criação de blocos filho aninhados com o InnerBlockscomponente
• Explore o armazenamento de atributos do Gutenberg como meta campos de postagem