Gutenberg: como usar o editor de blocos do WordPress

Um cliente abre o painel do WordPress para corrigir um preço numa página. Encontra três jeitos de editar a mesma tela: o editor de blocos, o botão do Elementor e um painel de opções do tema. Ele não sabe qual deles manda no layout, e o preço continua errado.

O Gutenberg chegou como editor padrão há anos, mas muito site ainda roda com tema clássico e construtor visual instalados por cima. Cada camada disputa o controle da página, e o editor de blocos acaba virando mais uma delas.

O Gutenberg vale a pena quando o tema também é de blocos. Usar o editor de blocos com um tema clássico e um page builder por cima é pagar três vezes pela mesma camada, porque tema, construtor e editor carregam estilo próprio e disputam o layout.

O que é o Gutenberg, afinal

O WordPress 5.0 saiu em 6 de dezembro de 2018 e trocou a caixa de texto única por um editor feito de blocos. O anúncio oficial da versão descreve a mudança assim: cada pedaço de conteúdo fica no seu próprio bloco. O mesmo texto prometia que os visitantes não veriam diferença na aparência do conteúdo.

Gutenberg é o nome do projeto por trás desse editor. A documentação para desenvolvedores diz que o editor de blocos é o resultado do trabalho feito no projeto Gutenberg. O nome também aparece no plugin de testes, o que gera boa parte da confusão.

O projeto tem quatro fases, segundo a página do plugin Gutenberg: edição, personalização, colaboração e suporte multilíngue. A primeira trouxe o editor de posts. A segunda levou os blocos para o site inteiro.

Se você está começando agora, o post sobre o que é WordPress explica a base antes de entrar no editor.

Blocos, padrões e blocos sincronizados

O bloco é a unidade de tudo. Parágrafo, título, imagem, botão, coluna e vídeo incorporado são blocos, e cada um tem a sua barra de ferramentas e o seu painel de configuração na lateral. Você insere um bloco digitando / seguido do nome, ou pelo botão de mais.

O padrão (pattern) é um grupo de blocos salvo para reaproveitar. Um bloco de chamada com título, texto e botão, por exemplo, vira um padrão que qualquer pessoa da equipe insere com dois cliques.

O WordPress 6.3, lançado em agosto de 2023, juntou duas ideias que antes viviam separadas. O anúncio da versão 6.3 explica que o padrão sincronizado é o que antes se chamava bloco reutilizável. A diferença entre os dois tipos é simples:

• Padrão sincronizado: você altera num lugar e a mudança aparece em todas as páginas que usam esse padrão.
• Padrão não sincronizado: serve de ponto de partida, e cada cópia segue a vida própria depois de inserida.

Use o sincronizado para o que precisa ser igual em todo lugar, como um aviso legal ou um bloco de contato. Use o não sincronizado para estrutura de página que muda de conteúdo a cada uso.

Editor de site, templates e theme.json

O WordPress 5.9, de janeiro de 2022, trouxe a edição completa do site e o Twenty Twenty-Two, que o anúncio da versão 5.9 chama de primeiro tema padrão de blocos da história do WordPress. Com tema de blocos, o editor de site substitui o Personalizador: cores, fontes e templates mudam na interface de estilos.

O template é o molde de um tipo de página. O template de post define onde ficam título, imagem destacada, conteúdo e comentários. A parte de template cuida das peças repetidas, como cabeçalho e rodapé. Tudo isso se edita com os mesmos blocos do post.

O arquivo theme.json guarda as definições globais do tema: paleta de cores, tamanhos de fonte, espaçamentos e quais controles aparecem para quem edita. Ele também permite limitar opções. Você esconde a paleta livre e deixa só as cores da marca, por exemplo, e a equipe para de inventar azul novo em cada página.

Com tema de blocos, o editor cuida do conteúdo e do layout do site. Com tema clássico, nada disso aparece: o editor cuida do conteúdo e o tema cuida do resto, em PHP.

O plugin Gutenberg e o Classic Editor

O plugin é a versão beta do editor. A página dele diz que cada versão do WordPress inclui os recursos estáveis do plugin, e que ele existe para quem quer testar os recursos mais recentes de edição de blocos e de site. A página registra mais de 400 mil instalações ativas.

Na maioria dos sites, não instale o plugin em produção. Ele muda com frequência e traz recurso que ainda pode mudar de forma. É útil para desenvolvedor de tema, para agência que quer se antecipar ao que vem e para ambiente de teste.

O Classic Editor é o caminho oposto. A página do Classic Editor ainda informa suporte e manutenção até 2024 ou pelo tempo que for necessário, e mostra mais de 8 milhões de instalações ativas. Em 2018, o anúncio do 5.0 falava em suporte até 2021, e o prazo já foi esticado.

Trate o Classic Editor como saída de emergência. Ele resolve o site legado que quebra com blocos, mas nenhum recurso novo do WordPress chega por ele. Quanto mais tempo o site fica nele, maior a migração depois. As mudanças mais recentes do editor estão no post sobre as novidades do WordPress 6.9.

Gutenberg, Classic Editor, Elementor e Divi lado a lado

Page builder como Elementor e Divi nasceu quando o editor do WordPress não fazia layout. Ele resolveu um problema real e cobrou um preço: o construtor carrega o próprio código de estilo e de script, e guarda o layout num formato que só ele entende.

A linha que mais pesa é a da portabilidade. O bloco é salvo como HTML comum com marcações em comentário, e o conteúdo continua legível se você trocar de tema. Com construtor, desativar o plugin costuma deixar a página sem layout ou cheia de código do próprio construtor.

O problema do custo triplo aparece quando o site mistura tudo. O tema clássico carrega o estilo dele, o construtor carrega o dele e o núcleo carrega o dos blocos. Isso pesa no carregamento, e cache ajuda só em parte, como mostra o guia de configuração do LiteSpeed Cache no WordPress.

Como começar a usar o Gutenberg sem quebrar o site

A ordem importa: quem troca o editor antes de trocar o tema fica no meio do caminho.

1. Liste o que roda hoje. Anote tema, construtor visual e plugins que mexem no layout. Se houver construtor, conte quantas páginas dependem dele.
2. Monte um clone do site. Faça a migração em ambiente de teste, nunca em produção. O passo a passo de como criar um blog WordPress cobre a instalação básica que serve de base.
3. Escolha um tema de blocos. Comece pelo tema padrão mais recente ou por um tema de blocos leve. Ajuste cores e fontes no editor de site, e trave as opções no theme.json.
4. Crie os padrões antes das páginas. Cabeçalho de página, bloco de chamada, depoimento e tabela de preço viram padrões. Defina quais são sincronizados.
5. Migre página por página. Comece pelas páginas mais simples. Deixe para o fim as que usam recursos exclusivos do construtor, como formulários e pop-ups.
6. Desative o construtor por último. Só depois que nenhuma página depende dele. Confira as páginas antigas uma a uma após desativar.
7. Revise plugins e SEO. Veja quais plugins ficaram sem função e confira títulos, metadados e redirecionamentos. A lista de melhores plugins para WordPress ajuda a escolher o que fica.

Quando o construtor ainda faz sentido

Há casos em que manter o Elementor ou o Divi é a decisão certa. Site grande, com centenas de páginas montadas no construtor e uma equipe treinada nele, tem custo alto de migração. Recursos como criador de pop-up e formulário avançado vêm prontos no construtor e exigiriam plugin separado no editor de blocos.

O erro está em instalar as três camadas num site novo. Para um projeto que começa hoje, o editor de blocos com tema de blocos cobre layout, templates e estilos globais sem plugin extra. O construtor entra só se houver um recurso específico que justifique a dependência.

O que muda para quem só escreve

Para quem publica post e não mexe em layout, a diferença é pequena. Você escreve no bloco de parágrafo, digita / para inserir título ou imagem e usa os padrões que a equipe deixou prontos. O editor salva revisões automáticas, e você compara versões antes de publicar.

O ganho, nesse caso, é consistência. Com padrões e theme.json bem definidos, o redator não precisa escolher cor, fonte ou espaçamento, e cada post sai com a mesma cara do anterior.

Quem ainda roda tema clássico com construtor por cima está a quase cinco anos do primeiro tema padrão de blocos do WordPress, o Twenty Twenty-Two, lançado com a versão 5.9 em janeiro de 2022.