Como trabalhar com blocos do WordPress fora do Gutenberg com Node.js

O editor de blocos do WordPress está mudando tudo relacionado à forma como criamos conteúdo com esta plataforma. São muitas as novidades que os novos lançamentos do WordPress trazem em relação aos blocos, e ainda há um longo caminho a percorrer no futuro.

Por esse motivo, os desenvolvedores que trabalham com o WordPress como plataforma de desenvolvimento devem se sentir cada vez mais à vontade trabalhando com blocos. No entanto, dar o salto de PHP para tecnologias baseadas em JavaScript pode ser difícil.

De qualquer forma, você precisa atualizar suas habilidades e não ter medo da nova pilha de desenvolvimento do WordPress. Quanto mais cedo estivermos confortáveis ​​com isso, mais oportunidades teremos para inovar.

Hoje vamos ver como podemos trabalhar com blocos Gutenberg sem precisar estar dentro do editor do WordPress. Por quê? Por várias razões…

A primeira e mais óbvia é porque podemos. Há algum tempo, a definição dos blocos principais no editor Gutenberg está disponível como um pacote de código separado. Isso significa que podemos usá-los fora do WordPress graças ao gerenciador de pacotes NPM.

Além disso, há toda uma série de funções para gerenciar blocos e trabalhar com eles. E eles também estão contidos em seu próprio pacote. Portanto, se quisermos trabalhar com os blocos padrão do WordPress, basta importar esses dois pacotes como dependências em nosso projeto.

Para conseguir isso, devemos criar uma pasta para nosso projeto, executar npm init para criar um arquivo package.json com os dados do projeto e, em seguida, executar o seguinte comando para instalar essas duas dependências:

 npm install @wordpress/block-library @wordpress/blocks

A próxima etapa é criar um arquivo index.js com o código que queremos executar. Esse código é escrito em Node.js, uma variante do JavaScript que é executada em servidores. Para o exemplo de hoje, o conteúdo de index.js pode ser o seguinte:

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

As duas primeiras instruções que aparecem no código anterior são instruções require para importar as dependências. Como eu disse antes, queremos importar a definição de bloco padrão do WordPress. Fazemos isso com require('@wordpress/block-library') . Como queremos apenas importar a função registerCoreBlocks deste pacote, no lado esquerdo do símbolo de igualdade desestruturamos essa função.

Da mesma forma, importamos o pacote @wordpress/blocks como dependência. Este pacote é o que tem as funções para trabalhar com blocos. Existem muitas funções definidas no pacote (você as tem aqui), mas para este exemplo queremos apenas que createBlock crie novos blocos e serialize para convertê-los em strings que podemos salvar no conteúdo de um post do WordPress.

Agora que temos as dependências importadas, chamamos a função registerCoreBlocks , que carrega a definição dos tipos de blocos padrão do WordPress para que possamos usá-los. A partir daí podemos criar blocos, como você pode ver quando chamamos a função createBlock passando como parâmetro o nome do tipo de bloco que queremos criar e um objeto com seus atributos.

No exemplo anterior vamos criar um bloco de parágrafo, então passamos o nome 'core/paragraph' e dentro do objeto de atributos passamos o conteúdo do parágrafo a ser criado como uma string dentro da chave de content .

Finalmente, chamamos a função serialize , passando o bloco que acabamos de criar. Como resultado, teremos uma string que podemos produzir com a função console.log .

Agora podemos executar o node index.js no terminal. Se fizermos isso, acontece o seguinte:

Há um erro na execução! O motivo é que precisamos ter a variável window disponível, que não está definida. Mas o que é essa variável e por que precisamos dela?

Window é um objeto JavaScript que o navegador define e representa a própria janela do navegador. Como estamos executando o código em nosso terminal (ou se estiver rodando em produção, em um servidor), não temos um navegador com essa variável. Isso significa que não podemos usar blocos do WordPress fora de um navegador? Claro que não!

O Node.js possui vários pacotes que nos permitem simular que estamos executando nosso código em um ambiente de navegador. Neste caso, vamos usar o pacote browser-env. Nós apenas temos que instalá-lo como fizemos antes com os pacotes do WordPress:

 npm install browser-env

Em nosso arquivo index.js , temos que adicionar um novo require para importar a dependência browser-env . Mas também temos que “consertar” o objeto window , pois ele não vem com o método matchMedia necessário. Se você copiar o código a seguir e adicioná-lo ao início do arquivo index.js , o problema será resolvido:

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Agora você pode executar o código novamente e verá que ele não falha e que retorna a representação textual do bloco de parágrafo que acabamos de criar usando a função createBlock :

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

Você tem todo o código neste repositório do GitHub. As possibilidades de trabalhar com blocos de fora do editor são enormes. Você pode criar blocos, cloná-los, transformá-los em um tipo diferente de bloco e muito mais.

Poder trabalhar com blocos fora do editor do WordPress nos permite manipular o conteúdo do nosso WordPress e trabalhar com eles de qualquer lugar. Isso abre um mundo de enormes possibilidades para desenvolvedores que estamos apenas começando a explorar.

Nós da Nélio já estamos fazendo uso dessas possibilidades. Em breve lançaremos um novo serviço que você achará muito interessante. Fique atento às novidades que vamos lançar nas próximas semanas?.

Imagem em destaque por Kelly Sikkema no Unsplash .