O Gutenberg é o editor de conteúdo padrão do WordPress. Ele foi introduzido no WordPress 5.0, lançado em dezembro de 2018, substituindo o Editor Clássico, que havia sido o padrão por mais de uma década. O nome é uma referência a Johannes Gutenberg, o inventor da prensa de impressão. A ideia central é simples: em vez de uma única área de texto onde você formata tudo de forma inline, cada parte do conteúdo é seu próprio "bloco", que você pode mover, configurar e estilizar de forma independente.
A história por trás do Gutenberg
Antes do Gutenberg, o WordPress utilizava o TinyMCE, um clássico editor de texto rico WYSIWYG (What You See Is What You Get). O TinyMCE atendeu bem ao WordPress por anos, mas tinha limitações. Adicionar layouts complexos, como seções de várias colunas ou caixas de chamada estilizadas, geralmente exigia shortcodes, HTML personalizado ou plugins de page builder. A equipe principal do WordPress iniciou o projeto Gutenberg em 2017 com o objetivo de tornar a criação de conteúdo rico acessível a todos, não apenas a desenvolvedores ou usuários dispostos a instalar page builders de terceiros. Quando o WordPress 5.0 foi lançado em dezembro de 2018, o Gutenberg tornou-se o editor padrão para todos os novos posts e páginas.
Como funciona o editor de blocos
Tudo no Gutenberg é um bloco. Um parágrafo é um bloco. Uma imagem é um bloco. Um título, uma lista, um vídeo incorporado, um botão, uma tabela; tudo é bloco. Você constrói uma página empilhando esses blocos verticalmente e configurando cada um por meio de sua própria barra de ferramentas e painel de configurações. Os blocos podem ser reorganizados arrastando-os ou usando as setas para cima/baixo. Cada bloco armazena seu conteúdo e configuração como uma combinação de HTML e comentários HTML especiais que o WordPress utiliza para reconstruir o bloco no editor.
Categorias e tipos de blocos
O WordPress vem com dezenas de blocos integrados, organizados em categorias:
- Blocos de texto: Parágrafo, Título, Lista, Citação, Código, Pré-formatado, Citação em destaque, Verso, Tabela.
- Blocos de mídia: Imagem, Galeria, Áudio, Vídeo, Capa, Arquivo, Mídia e Texto.
- Blocos de design: Colunas, Grupo, Linha, Pilha, Separador, Espaçador, Botões, Detalhes.
- Blocos de widget: Últimos Posts, Últimos Comentários, Arquivos, Categorias, Lista de Páginas, Pesquisar, Nuvem de Tags, Ícones Sociais, Calendário.
- Blocos de incorporação: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok e muitos outros serviços compatíveis com oEmbed.
Blocos reutilizáveis e padrões de blocos
Os blocos reutilizáveis (agora chamados de "Padrões Sincronizados" desde o WordPress 6.3) permitem salvar um bloco ou grupo de blocos e inseri-los em vários posts ou páginas. Quando você atualiza um padrão sincronizado, a alteração se propaga em todos os lugares em que ele é usado. Isso é útil para elementos como seções de chamada para ação, avisos legais ou caixas de biografia do autor que aparecem em muitas páginas. Os padrões de blocos são arranjos pré-projetados de blocos, por exemplo, uma seção hero com imagem de fundo, título e botão. O núcleo do WordPress inclui padrões integrados, os temas podem registrar os seus próprios e você pode navegar por centenas de outros no Diretório de Padrões do WordPress.
Edição completa do site e temas de bloco
O Gutenberg foi muito além do conteúdo de posts. A Edição Completa do Site (FSE), introduzida progressivamente a partir do WordPress 5.9, permite editar todo o layout do seu site com blocos: cabeçalhos, rodapés, barras laterais, modelos de arquivos, modelos de posts individuais, páginas 404 e muito mais. Para usar a FSE, você precisa de um "tema de bloco" (como os temas padrão Twenty Twenty-Four ou Twenty Twenty-Five). Os temas de bloco substituem a tradicional hierarquia de modelos PHP por modelos baseados em HTML que utilizam blocos. O Editor de Site (Aparência > Editor) oferece uma interface visual para personalizar todas as partes do seu site sem escrever nenhum código. Os "temas clássicos" tradicionais ainda funcionam, mas não suportam a FSE.
O plugin Classic Editor
Nem todos abraçaram a mudança. O plugin Classic Editor foi lançado pela equipe do WordPress como uma forma oficial de restaurar o antigo editor TinyMCE. Ele é um dos plugins mais instalados do WordPress, com milhões de instalações ativas. O WordPress originalmente se comprometeu a oferecer suporte ao Classic Editor até 2024, e o plugin continua a funcionar e a receber atualizações. Muitos sites de longa data, especialmente aqueles com configurações TinyMCE altamente personalizadas ou layouts complexos baseados em shortcodes, ainda o utilizam. Para novos sites, no entanto, o editor de blocos é o caminho claro para o qual o WordPress está se direcionando.
Plugin Gutenberg vs WordPress core
Há uma distinção importante entre o plugin Gutenberg e o editor de blocos integrado ao núcleo do WordPress. O plugin Gutenberg é um plugin independente disponível em wordpress.org que serve como campo de testes para recursos planejados para futuras versões do WordPress. Ele recebe novas atualizações aproximadamente a cada duas semanas e inclui recursos experimentais que ainda não estão estáveis o suficiente para o núcleo. Quando um recurso amadurece no plugin, ele é mesclado à próxima versão principal do WordPress. Se você é um desenvolvedor ou adotante inicial que deseja testar recursos futuros, pode instalar o plugin Gutenberg. Para a maioria dos proprietários de sites, a versão incluída no núcleo do WordPress é a escolha certa.
Considerações de desempenho
O Gutenberg é construído com React no lado do editor e adiciona CSS e JavaScript específicos de blocos ao frontend. Cada tipo de bloco pode enfileirar sua própria folha de estilo, então uma página que utiliza muitos tipos diferentes de blocos pode carregar mais arquivos CSS do que uma página construída com o Editor Clássico. O WordPress trabalhou para resolver isso: desde a versão 5.8, os estilos de blocos são carregados por bloco, em vez de como uma única folha de estilo grande. Ainda assim, sites com muitos blocos ou uso intenso de plugins de blocos de terceiros podem acabar com uma sobrecarga perceptível no frontend. Proprietários de sites focados em desempenho costumam combinar o Gutenberg com um plugin de cache e uma ferramenta de otimização de CSS para manter os tempos de carregamento baixos.
Plugins populares de biblioteca de blocos
Os blocos integrados cobrem o básico, mas muitos proprietários de sites estendem o editor com bibliotecas de blocos de terceiros para layouts e componentes mais avançados:
- Spectra (da Brainstorm Force): Adiciona blocos para tabelas de preços, grids de posts, formulários, contagens regressivas, classificações por estrelas e muito mais. Popular entre usuários do tema Astra.
- Stackable: Oferece blocos orientados ao design com opções avançadas de estilo, configurações globais e sua própria biblioteca de design.
- GenerateBlocks: Um plugin leve da equipe do GeneratePress. Oferece apenas quatro blocos altamente flexíveis (Container, Headline, Buttons, Grid) que podem substituir dezenas de blocos especializados por meio de suas opções de configuração.
- Kadence Blocks: Inclui um bloco avançado de linha/layout, listas de ícones, caixas de informações, depoimentos e um bloco de formulário. Conhecido pelo bom desempenho e por uma generosa versão gratuita.
- CoBlocks: Da GoDaddy, oferecendo blocos para receitas culinárias, tabelas de preços, compartilhamento social, click-to-tweet e muito mais.
Criando blocos personalizados para desenvolvedores
Os desenvolvedores podem criar blocos personalizados utilizando a API de Blocos do WordPress. A ferramenta oficial para gerar a estrutura de um plugin de bloco é @wordpress/create-block, que gera a estrutura de arquivos, a configuração de build e o código boilerplate. Os blocos personalizados são construídos com JavaScript (geralmente JSX com React) para o lado do editor e podem ser renderizados via JavaScript ou PHP no lado do servidor no frontend. O arquivo block.json define metadados como o nome do bloco, categoria, atributos e recursos suportados. Para desenvolvedores que preferem fluxos de trabalho baseados em PHP, o plugin Advanced Custom Fields (ACF) oferece os ACF Blocks, que permitem criar blocos personalizados utilizando templates PHP e campos ACF, sem escrever nenhum código React.
O que o InspectWP verifica
O InspectWP detecta se o seu site WordPress utiliza o editor Gutenberg, varrendo o código-fonte da página em busca de comentários HTML específicos de blocos (como <!-- wp:paragraph -->, <!-- wp:image --> e outros), bem como arquivos CSS e JavaScript relacionados ao Gutenberg. Isso ajuda você a entender se um site adotou o editor de blocos ou ainda está rodando o Editor Clássico.