Gutenberg

Gutenberg WordPress é o editor padrão do CMS desde a versão 5.0, lançada em dezembro de 2018. Substituiu o editor clássico baseado em TinyMCE por uma interface de blocos: cada parágrafo, imagem, vídeo, lista ou seção do conteúdo é um bloco independente, editável de forma visual. O nome vem de Johannes Gutenberg, inventor da prensa móvel — uma referência ao fato de o editor representar uma mudança fundamental na forma de criar conteúdo na web.

O que é o Gutenberg

O Gutenberg é um editor visual baseado em React que renderiza posts e páginas como uma sequência de blocos. Cada bloco é um componente independente: pode ser texto simples, título, imagem, galeria, vídeo, citação, código, tabela, botão, separador, espaçador, embed do YouTube, embed do Twitter. Você adiciona blocos clicando em + ou digitando / no editor.

O que é gutenberg na prática: ao criar um novo post, em vez de uma área única de texto formatado, você tem uma tela em branco que aceita blocos. Cada bloco tem suas próprias configurações de estilo (cor, alinhamento, margem, sombra), e pode ser movido, duplicado, transformado em outro tipo de bloco ou agrupado com outros. É WYSIWYG real — o que você vê no editor é o que aparece no site.

O lançamento foi controverso. Muitos usuários acostumados ao editor clássico resistiram, e plugins como Classic Editor mantiveram o velho editor disponível por anos. Mas a aposta da Automattic se confirmou: blocos virou padrão, expandiu para todo o site (Full Site Editing) a partir de 2022, e hoje é base do desenvolvimento moderno do WordPress.

O page builder tradicional como Elementor e Divi continua relevante para sites com layouts visuais complexos, mas o Gutenberg fechou boa parte do gap. Para blogs, sites institucionais simples e portfolios, hoje o Gutenberg cobre o caso sem precisar de plugin externo. Para landing pages e e-commerces, page builders ainda costumam ser preferidos.

Como funciona o editor de blocos

Tecnicamente, o Gutenberg usa React no frontend e armazena conteúdo no banco de dados como HTML com comentários especiais que demarcam cada bloco. Um bloco de parágrafo no banco aparece como: comentário-de-abertura wp:paragraph, depois p tag, depois comentário-de-fechamento /wp:paragraph. Esses comentários são invisíveis no HTML renderizado mas permitem ao Gutenberg recriar a estrutura editável quando você abre o post de novo.

Esse design tem uma vantagem importante: se você desativa o Gutenberg ou troca de tema, o conteúdo ainda é HTML limpo e legível. Diferente de page builders proprietários que armazenam conteúdo em shortcodes ou metadados próprios, o editor de blocos wordpress mantém o conteúdo portável. Isso é o que se chama de “graceful degradation”.

A interface do Gutenberg tem três áreas. À esquerda, o painel de inserção de blocos (botão +). No centro, a área de edição com o conteúdo. À direita, o painel de configurações do bloco selecionado, com abas “Bloco” (configurações específicas do tipo) e “Documento” (metadados do post: categoria, tag, imagem destacada, slug, autor).

Cada bloco aceita atalhos para acelerar trabalho. Digitar / abre menu rápido de blocos. Digitar # cria heading H1, ## cria H2, ### cria H3. Digitar > cria citação, * cria lista. Selecionar texto e digitar **negrito** aplica negrito direto. Esses atalhos vieram do Markdown e fazem o Gutenberg ser produtivo para quem escreve com frequência.

Principais blocos do Gutenberg

O bloco Parágrafo é o mais usado: texto comum, com formatação básica (negrito, itálico, link, alinhamento, cor, tamanho). Os blocos de Cabeçalho cobrem H1 a H6 (mas H1 é gerado automaticamente do título do post — você usa H2 a H6 dentro do conteúdo). Esses dois blocos cobrem 70% do conteúdo de um post típico.

O bloco Imagem permite upload, escolha da biblioteca de mídia ou inserção via URL. Configurações incluem alinhamento, tamanho, link, alt text e legenda. O bloco Galeria agrupa várias imagens em grade configurável. O bloco Imagem em Destaque (cover) cria um banner com imagem de fundo, texto sobreposto e botão call-to-action — usado em hero sections.

Os blocos Lista (ordenada e não ordenada), Citação, Tabela, Código e Pré-formatado cobrem necessidades de formatação editorial. O bloco Botão cria CTA com cor e arredondamento configuráveis. O bloco Separador insere divisor visual. O bloco Spacer adiciona espaço vertical configurável — útil para controlar respiração do layout.

Os blocos de Embed simplificam inserção de mídia externa. Cole URL do YouTube, Vimeo, Twitter, Spotify, Instagram, SoundCloud — o Gutenberg detecta o serviço e insere o embed correto automaticamente. É um dos pontos mais elegantes do editor: zero configuração técnica para algo que antes exigia HTML manual ou shortcodes.

Os blocos de Layout (Colunas, Grupo, Linha, Pilha) permitem agrupar outros blocos em estruturas. Uma seção de three-column layout é um bloco Colunas com três colunas, cada uma contendo blocos próprios. Combine com shortcodes e temas compatíveis com Full Site Editing para construir layouts inteiros sem page builder externo.

Gutenberg vs page builders

A discussão gutenberg vs elementor é a comparação mais comum no ecossistema. Cada um cobre um caso diferente. Gutenberg é leve, nativo, sem dependência de plugin externo, e suficiente para conteúdo editorial e sites simples. Elementor é mais flexível visualmente, com mais widgets e templates prontos, mas adiciona peso ao site e cria dependência.

Em performance, Gutenberg leva vantagem. O HTML gerado é limpo, sem CSS extra de plugin, e renderiza rápido. Sites baseados em Gutenberg costumam pontuar melhor em Lighthouse e Core Web Vitals que sites equivalentes em Elementor. Para blogs, sites de notícia e portfolios, isso pode ser diferença importante em SEO.

Em flexibilidade visual, page builders levam vantagem. Layouts complexos, animações, popups, formulários integrados, theme builder visual — tudo isso é mais simples em Elementor que em Gutenberg puro. Para landing pages e sites de marketing, page builders aceleram MUITO o trabalho.

Em controle, Gutenberg evolui rapidamente. Block patterns (templates de blocos prontos), Full Site Editing (edição visual de header, footer, templates), Block Themes (temas baseados 100% em blocos) — todas funcionalidades chegando ao core gradualmente. O gap com page builders está se fechando, embora ainda exista para certos casos.

O que muitos sites profissionais fazem hoje é combinar os dois: Gutenberg para conteúdo editorial (posts, páginas internas, área de conteúdo), e page builder para landing pages e seções específicas que exigem visual complexo. Isso é o melhor dos dois mundos. Para projetos que precisam dessa combinação bem montada, com page builder profissional, otimização de performance e templates prontos, a FULL Services entrega o Elementor PRO já licenciado e configurado dentro da stack profissional, junto com plugins de cache, otimização de assets e templates curados que rodam em harmonia com Gutenberg nativo. Em vez de escolher um lado, você usa o melhor de cada um nos pontos certos.