Passou 20 minutos a criar um bloco de call-to-action com estilo. Ajustou as cores, as margens e o texto. Uma semana depois, dá por si a construir o mesmo bloco de raiz noutro site. Parece-lhe familiar?

Copiar blocos manualmente entre sites WordPress consome horas que não tem. Mas o Gutenberg resolveu este problema há muito tempo: os blocos reutilizáveis juntamente com a exportação JSON permitem-lhe mover qualquer bloco para outro site em menos de um minuto. Sem plugins, sem exportações completas da base de dados, sem dificuldades com importações XML.

Este guia acompanha-o em cada passo, desde a criação de um bloco reutilizável até à sua importação num site separado. Inclui ainda um plugin alternativo que torna o processo ainda mais simples.

💡 Visão geral rápida:

• Crie um bloco no editor Gutenberg e converta-o para reutilizável
• Exporte-o como um ficheiro JSON através da interface de gestão de blocos
• Importe o JSON no site WordPress de destino e o bloco fica pronto a usar
• Como alternativa, o plugin Blocks Export Import permite exportar quaisquer blocos, não apenas os reutilizáveis

O que são blocos reutilizáveis e porque precisa deles

Um bloco reutilizável no Gutenberg é um modelo de conteúdo guardado que cria uma vez e depois insere em qualquer artigo ou página. Edite o bloco original e as alterações propagam-se para todos os locais onde é utilizado.

Casos de uso típicos:

• Uma nota de agradecimento ou assinatura no final de cada artigo
• Um banner com uma promoção ou formulário de subscrição
• Um bloco com detalhes de contacto, informações legais ou direitos de autor
• Um slider ou galeria de imagens reutilizado em várias páginas

Antes do Gutenberg, guardaria esses fragmentos num ficheiro de texto no seu ambiente de trabalho e colava-os a partir da área de transferência. Agora, isto funciona ao nível do núcleo do WordPress e transfere-se entre sites.

Nota importante: se um bloco depender de um plugin de terceiros (por exemplo, blocos do Getwid ou Stackable), esse mesmo plugin tem de estar instalado no site de destino. Caso contrário, o bloco abrirá com um erro ou perderá alguns dos seus estilos.

1. Criar um bloco reutilizável

Abra o editor Gutenberg através de Artigos → Adicionar Novo. Clique no ícone Adicionar Bloco (+) na barra de ferramentas superior e escolha o tipo de bloco de que precisa. No exemplo abaixo, é um simples bloco de parágrafo:

Configure o bloco: adicione texto, links, cor de fundo, preenchimento, tudo o que precisa para o aspeto final. No nosso exemplo, o resultado é um bloco de agradecimento com links para redes sociais e um fundo colorido:

Eis o aspeto do bloco finalizado após os ajustes de estilo e texto:

Até aqui, este é um bloco normal. Para o tornar reutilizável, clique no ícone Mais opções (três pontos) na barra de ferramentas do bloco e selecione Adicionar aos blocos reutilizáveis:

Atribua um nome ao bloco e clique em Guardar. Pronto: o bloco aparece agora na biblioteca de blocos reutilizáveis do seu site.

2. Utilizar um bloco reutilizável nas publicações

Adicionar um bloco guardado a qualquer artigo ou página demora apenas alguns cliques. No editor Gutenberg, clique em Adicionar Bloco (+), mude para o separador Blocos reutilizáveis e escolha o que precisa:

Depois de inserir o bloco, clique em Pré-visualizar ou Publicar e verifique o resultado no front-end:

O bloco funciona em todos os tipos de publicação que suportam o editor Gutenberg: artigos, páginas, tipos de publicação personalizados. Crie uma vez, utilize em qualquer lugar.

3. Exportar o bloco para JSON

Quando o bloco estiver pronto e testado, pode exportá-lo para transferir para outro site. No editor Gutenberg, clique no ícone Mais ferramentas e opções (três pontos no canto superior direito) e selecione Gerir todos os blocos reutilizáveis:

Abrirá um ecrã com a lista de todos os blocos reutilizáveis do site. Para já, existe apenas um, a nota de agradecimento. À medida que criar mais blocos, a lista aumentará:

Passe o cursor sobre o nome do bloco e verá um link Exportar como JSON. Clique nele:

O seu navegador fará o download de um ficheiro com a extensão .json. Guarde-o numa pasta conveniente no seu computador:

Dentro do JSON está a estrutura completa do bloco: marcação HTML, estilos, atributos, blocos aninhados. É um ficheiro autossuficiente, pronto a importar em qualquer site WordPress com o Gutenberg ativo.

4. Importar o bloco noutro site

No site WordPress de destino, abra o editor Gutenberg (Artigos → Adicionar Novo). Clique novamente em Mais ferramentas e opções e selecione Gerir todos os blocos reutilizáveis:

No ecrã dos blocos, clique no botão Importar de JSON, escolha o ficheiro que transferiu anteriormente e clique em Importar:

Pronto. O bloco importado aparece na lista e fica imediatamente disponível para inserção nas publicações:

A partir deste momento, pode utilizar o bloco no segundo site exatamente como faria no primeiro. Repita o procedimento para quantos blocos desejar; não existem restrições.

Método alternativo: o plugin Blocks Export Import

O método manual que envolve a conversão para reutilizável funciona na maioria dos cenários, mas tem uma limitação: apenas pode exportar blocos reutilizáveis. Um bloco normal que acabou de desenhar tem de ser primeiro convertido e só depois exportado.

O plugin Blocks Export Import da ThemeIsle elimina esta limitação. Acrescenta um botão de exportação diretamente no menu de qualquer bloco, sem qualquer passo intermédio de conversão.

Instale e ative o plugin, depois abra o editor Gutenberg e crie um bloco. Uma nova opção Export JSON aparece no menu Mais opções:

Um ficheiro JSON com a estrutura completa do bloco é transferido para o seu computador. Para o importar noutro site, clique em Adicionar Bloco (+), mude para o separador Widgets e selecione Import Blocks from JSON:

Depois clique em Choose File, indique o ficheiro JSON no seu computador e clique em Upload:

O método do plugin tem uma limitação: os blocos importados desta forma não são guardados na biblioteca de blocos reutilizáveis do site. Existem apenas como um ficheiro JSON no seu computador. O método manual (secções 1 a 4), por outro lado, armazena o bloco na base de dados do WordPress, pelo que permanece acessível através da interface padrão de gestão de blocos.

O método a escolher depende do seu cenário: para uma transferência pontual entre os seus próprios sites, use o plugin (é mais rápido); para um trabalho contínuo com uma biblioteca de blocos em vários sites, aprenda a exportação nativa de reutilizáveis.

Vídeo: exportar e importar blocos Gutenberg na prática

Veja um pequeno tutorial em vídeo que mostra o ciclo completo, desde a criação de um bloco reutilizável até à sua importação noutro site WordPress:

⁉️🤔 Perguntas frequentes

Posso exportar vários blocos num único ficheiro?

Sim. Selecione vários blocos no editor (mantenha a tecla Shift pressionada e clique em cada um), agrupe-os através de Adicionar a blocos reutilizáveis e exporte o grupo resultante como um único JSON. O plugin Blocks Export Import também suporta exportações múltiplas: selecione os blocos e escolha Exportar JSON, e todos os blocos selecionados ficam num só ficheiro.

O que devo fazer se um bloco importado for exibido incorretamente?

Três causas prováveis. Primeira: o plugin de que dependem os blocos do conteúdo importado (Getwid, Stackable, Kadence Blocks ou similar) não está instalado no site de destino. Instale o plugin e volte a importar. Segunda: os temas dos dois sites diferem significativamente em CSS, pelo que o bloco pode herdar fontes ou espaçamentos errados. Ajuste nas definições do bloco ou adicione CSS personalizado. Terceira: o ficheiro JSON foi corrompido durante a transferência; transfira-o e importe-o novamente.

Como posso distinguir um bloco normal de um reutilizável no editor?

Um bloco reutilizável no editor Gutenberg é destacado com uma borda roxa e tem um ícone de reutilização (duas setas em loop) na barra de ferramentas. Um bloco normal tem uma borda azul sem ícone especial. Ao passar o cursor sobre um bloco reutilizável, é exibido o seu nome.

Os estilos do tema são preservados quando um bloco é exportado?

Parcialmente. O JSON inclui a marcação inline e os atributos do bloco (cor de fundo, tamanho do texto, gradientes, tudo o que for definido através das configurações do Gutenberg). Os estilos definidos no style.css do tema ativo não são incluídos no JSON: pertencem ao tema, não ao bloco. Por isso, noutro site com um tema diferente, o bloco pode ter um aspeto diferente. Para blocos em que o design é crítico, defina os estilos principais através das definições do próprio bloco e não através do CSS do tema.

Existe um limite de tamanho para o JSON exportado?

Tecnicamente não, mas blocos muito grandes com dezenas de elementos aninhados podem produzir um ficheiro JSON de vários megabytes. Ao importar um ficheiro desses, a diretiva upload_max_filesize na configuração PHP do servidor é aplicada (o valor predefinido é 2 MB). Se o JSON exceder o limite, aumente a diretiva no php.ini ou divida o bloco em partes mais pequenas.

Quando a exportação manual supera um plugin

O método manual através de blocos reutilizáveis está integrado no núcleo do WordPress. Não depende de atualizações de terceiros, não adiciona código extra ao seu site e guarda os blocos na base de dados, para que os possa ver na interface de gestão padrão.

O plugin Blocks Export Import ganha em rapidez quando só precisa de obter um bloco e transferi-lo de imediato sem o guardar na biblioteca. Mas se trabalha sistematicamente com um conjunto de blocos padrão em vários sites, aprenda a exportação reutilizável nativa. Uma biblioteca de blocos acessível a partir de qualquer artigo acaba por compensar aquele clique extra de conversão.

Experimente ambos os métodos num par de sites de teste e escolha o que melhor se adapta ao seu fluxo de trabalho. Dez minutos de configuração hoje poupam dezenas de horas ao longo de um ano.