Acompanho o projeto Gutenberg desde os primeiros testes apresentados à comunidade WordPress. Naquele momento, a discussão girava em torno de um novo editor. Hoje, blocos Gutenberg formam a base da experiência de criação de conteúdo e da edição visual de sites no WordPress.

Por isso, este guia não trata o Gutenberg como uma novidade ou um plugin necessário para editar posts. O editor de blocos faz parte do WordPress desde a versão 5.0. Além disso, o projeto Gutenberg continua desenvolvendo recursos que chegam ao core depois de testes no plugin.

O que são blocos Gutenberg?

Um bloco é uma unidade de conteúdo com estrutura, controles e configurações próprias. Um parágrafo, uma imagem, uma lista, uma galeria e um vídeo são exemplos simples. Também existem blocos estruturais, como Grupo, Colunas, Navegação e Consulta.

Esse modelo permite editar uma parte da página sem tratar todo o conteúdo como um único campo de texto. Assim, cada bloco pode ser inserido, movido, duplicado, transformado ou removido de forma independente.

Na interface, o editor combina três áreas principais:

• Inseridor: permite procurar blocos, padrões e itens de mídia.
• Canvas de conteúdo: mostra a composição do post, da página ou do template.
• Painel de configurações: reúne opções do documento e do bloco selecionado.

Para layouts com muitos blocos aninhados, a Visualização em lista ajuda a entender a hierarquia. Ela também torna mais fácil selecionar um bloco dentro de um Grupo, uma Coluna ou uma Capa.

Como os blocos são armazenados

O WordPress continua salvando o conteúdo principal no campo post_content. No entanto, o editor serializa a árvore de blocos como HTML delimitado por comentários especiais.

Um parágrafo simples pode ser armazenado assim:

<!-- wp:paragraph -->
<p>Este é um parágrafo criado no editor de blocos.</p>
<!-- /wp:paragraph -->Code language: HTML, XML (xml)

Esses comentários identificam o tipo e os limites do bloco. Quando necessário, também guardam atributos em JSON. No front-end, eles não aparecem visualmente para o visitante.

O formato preserva uma característica importante do WordPress: o conteúdo continua sendo HTML legível. Ao mesmo tempo, o editor consegue reconstruir uma árvore de blocos para oferecer controles específicos.

A documentação oficial detalha esse processo no guia sobre fluxo e formato dos dados.

Blocos estáticos e dinâmicos

Os blocos podem gerar sua marcação de duas formas principais.

Blocos estáticos

Um bloco estático salva seu HTML no momento em que o conteúdo é editado. Parágrafos e títulos são exemplos comuns. O conteúdo permanece igual até uma nova edição.

Para quem desenvolve blocos, a função save define essa marcação. Se a estrutura mudar em uma versão futura, o bloco pode precisar de uma estratégia de depreciação e migração.

Blocos dinâmicos

Um bloco dinâmico gera a saída no servidor quando a página é acessada. O bloco de Últimos posts, por exemplo, precisa consultar conteúdo recente mesmo que a página não tenha sido salva novamente.

No desenvolvimento, essa renderização costuma usar render.php ou um render_callback. A documentação sobre renderização estática e dinâmica explica quando escolher cada abordagem.

Padrões, padrões sincronizados e templates

Blocos são as unidades básicas. Porém, o WordPress oferece outras estruturas para compor e reutilizar layouts.

Padrões de blocos

Um padrão reúne blocos em um layout pronto. Depois da inserção, você pode alterar textos, imagens e configurações sem modificar o padrão original. Portanto, ele funciona como um ponto de partida.

Padrões sincronizados

Um padrão sincronizado mantém o conteúdo conectado entre diferentes usos. Quando você edita a versão sincronizada, a alteração aparece nos locais em que ela foi inserida.

Esse recurso substitui o nome antigo “blocos reutilizáveis”. A mudança de terminologia ajuda a separar dois comportamentos: padrões comuns servem como modelos editáveis, enquanto padrões sincronizados propagam alterações.

Templates e partes de template

Templates definem a estrutura de tipos de página, como post individual, arquivo, busca e página 404. Já as partes de template representam áreas recorrentes, como cabeçalho e rodapé.

Em um block theme, essas estruturas usam blocos e podem ser editadas visualmente. Por outro lado, temas clássicos continuam usando principalmente templates PHP e não oferecem toda a experiência do Site Editor.

Do editor de posts ao Site Editor

O Gutenberg começou mudando a edição de posts e páginas. Depois, o mesmo modelo avançou para outras áreas do site.

Com um block theme ativo, o menu Aparência > Editor abre o Site Editor. Nele, você pode trabalhar com navegação, estilos globais, páginas, templates e padrões. Dessa forma, os blocos deixam de representar apenas o conteúdo e passam a compor também cabeçalhos, rodapés e layouts.

Essa distinção evita uma confusão comum:

• O editor de blocos edita o conteúdo de posts e páginas, inclusive com temas clássicos.
• O Site Editor edita a estrutura e os estilos do site, mas depende de um block theme.
• O plugin Gutenberg antecipa recursos em desenvolvimento e não é obrigatório para usar o editor incluído no WordPress.

Consulte a documentação do Site Editor antes de migrar um tema. Para testar com segurança, use um ambiente separado e mantenha um backup do site.

O que muda para quem desenvolve WordPress

O editor de blocos criou uma camada de extensibilidade que combina JavaScript, React e APIs do WordPress. Contudo, você não precisa criar um bloco para toda necessidade.

Antes de desenvolver, avalie estas opções:

1. Verifique se um bloco nativo já resolve o problema.
2. Considere um padrão quando a necessidade for apenas um layout inicial.
3. Use um padrão sincronizado para conteúdo repetido que deve receber atualizações conjuntas.
4. Crie um bloco customizado quando houver comportamento, dados ou controles específicos.
5. Prefira renderização dinâmica quando a saída depender de dados que mudam com frequência.

Se a melhor opção for um bloco próprio, continue pelo tutorial Como criar seu próprio bloco Gutenberg. Depois, veja como trabalhar com atributos em blocos customizados.

Gutenberg é o editor ou o projeto?

No uso cotidiano, muita gente chama o editor de blocos de Gutenberg. O nome também identifica o projeto e o plugin onde novos recursos são desenvolvidos e testados.

Para documentação e suporte, vale usar o termo mais preciso. “Editor de blocos” descreve a interface incluída no WordPress. “Gutenberg” pode indicar o projeto mais amplo ou seu plugin experimental.

Próximos passos

Os blocos Gutenberg mudaram mais do que a tela de edição. Eles introduziram um modelo comum para conteúdo, layout e personalização do site.

Comece dominando os blocos nativos, a Visualização em lista e os padrões. Em seguida, teste um block theme para entender templates, estilos globais e o Site Editor. Por fim, avance para a Block API quando o projeto realmente exigir componentes customizados.