Gutenberg FSE: O Futuro do Design WordPress em 2026

A Edição Completa do Site (Full Site Editing - FSE) chegou ao WordPress 5.9. Três anos depois, a maioria das agências ainda não a utiliza corretamente — e aquelas que o fazem têm uma séria vantagem competitiva.

O que FSE realmente significa

Antes do FSE, os temas WordPress controlavam cabeçalhos, rodapés e layout global através de templates PHP. O Gutenberg cuidava apenas da área de conteúdo. Você podia editar seu post de blog com blocos, mas sua navegação estava travada em um arquivo PHP.

O FSE muda isso. Com um tema de blocos, cada parte do site — cabeçalho, rodapé, barra lateral, templates de arquivo, layout de post único — é editável no editor Gutenberg usando blocos. Não é necessário PHP para alterações de layout.

Isso é importante para a geração de IA porque significa que todo o site pode ser expresso como JSON de blocos. Não há um sistema híbrido onde algumas partes são templates PHP e outras são blocos. Tudo são blocos, tudo é JSON, tudo pode ser gerado e editado programaticamente.

Como o PAGEnza usa FSE

Quando o PAGEnza gera um site, ele não cria apenas uma página inicial. Ele cria um tema de blocos completo com:

• templates/index.html — o template padrão
• templates/single.html — layout de post único
• templates/archive.html — listagem de blog/categoria
• templates/404.html — página de erro
• parts/header.html — bloco de cabeçalho reutilizável
• parts/footer.html — bloco de rodapé reutilizável
• theme.json — estilos globais (cores, tipografia, espaçamento)

Todos esses são gerados a partir do mesmo Mandato de Design. A paleta de cores definida para a página inicial é a mesma usada nos estilos globais do theme.json. O trio de fontes escolhido para o hero é o mesmo carregado na folha de estilo do tema de blocos.

Esta é a vantagem chave do FSE para a geração de IA: a consistência é imposta pelo sistema, não pela esperança de que o designer se lembre de aplicar a mesma fonte em todos os lugares.

theme.json — o arquivo mais importante que você nunca editou

theme.json é um arquivo de configuração que define o sistema de design global para um tema de blocos. Ele controla:

• Paleta de cores — cores nomeadas que aparecem no seletor de cores do editor
• Tipografia — famílias de fontes, tamanhos, alturas de linha
• Espaçamento — a escala de espaçamento usada pelos controles de preenchimento e margem
• Raio da borda — valores padrão de raio de canto
• Layout — largura do conteúdo, largura ampla

Quando o PAGEnza gera um site, o theme.json é construído programaticamente a partir do Mandato de Design. As cores ink, bg1, bg2 e accent são registradas como cores nomeadas na paleta. O trio de fontes é registrado como famílias de fontes com os URLs @import corretos do Google Fonts.

O resultado é que, quando um cliente abre o editor Gutenberg para alterar um texto, o seletor de cores mostra exatamente as quatro cores da marca — nada mais. O seletor de fontes mostra as três fontes escolhidas. Os controles de espaçamento usam a escala do sistema. O sistema de design é imposto no nível do editor.

O que "editar ao vivo no Gutenberg" realmente significa

Todo site gerado pelo PAGEnza é uma instalação WordPress ativa com Gutenberg FSE ativado. O cliente pode:

• Clicar em qualquer texto e editá-lo diretamente
• Alterar fundos de seções clicando e selecionando na paleta de cores da marca
• Reordenar seções arrastando blocos
• Adicionar novas seções do inseridor de blocos
• Alterar imagens clicando no placeholder

Eles não podem quebrar acidentalmente o sistema de design escolhendo uma cor fora da marca, porque as únicas cores disponíveis são as quatro cores da marca. Eles não podem escolher uma fonte que não combine, porque apenas as três fontes da marca estão registradas.

É isso que torna os sites gerados por IA práticos para clientes reais — as restrições que fazem o design funcionar são preservadas após a entrega.

O problema da cobertura de blocos

O FSE é poderoso, mas tem um problema de cobertura. Nem todo padrão de design pode ser expresso de forma limpa em blocos Gutenberg principais. Layouts complexos, componentes interativos e exibições de dados personalizadas geralmente exigem blocos personalizados ou plugins de terceiros.

O PAGEnza lida com isso de duas maneiras:

Para layout: usamos uma combinação de blocos Group, Cover, Columns e Media & Text com atributos cuidadosamente controlados. Cerca de 95% dos layouts de páginas de marketing podem ser alcançados apenas com esses quatro tipos de blocos.

Para componentes interativos: o Plugin Builder gera blocos Gutenberg personalizados como plugins PHP. Uma tabela de preços, um formulário de reserva, um slider de depoimentos — estes são gerados como blocos registrados adequados que se integram ao editor FSE, não shortcodes anexados ao lado.

O objetivo é que tudo o que um cliente precisa editar seja editável no editor visual, sem tocar no código.