Mudou de tema e o seu editor familiar transformou-se numa tela desconhecida de blocos? Todos os que abriram o Gutenberg pela primeira vez passam por este bloqueio. Os botões familiares desapareceram, os campos das Metabox mudaram de sítio e criar um simples artigo demora o dobro do tempo.

Mas a verdade é esta: o editor de blocos do WordPress é a forma mais rápida de compor conteúdo sem código. Na prática, constatámos que, após algumas horas a trabalhar com blocos, não vai querer voltar ao editor clássico. E se souber os atalhos de teclado e alguns truques, o Gutenberg começa a ser mais rápido do que qualquer page builder.

Neste guia, encontrará uma análise completa do editor de blocos: do primeiro arranque às teclas de atalho. Nada de teoria pela teoria, apenas passos concretos que pode repetir no seu próprio site.

💡 Visão geral rápida:

• Abra o editor: Artigos → Adicionar novo e aterrará na interface de blocos do Gutenberg
• Adicione conteúdo usando blocos: cada parágrafo, título, imagem ou botão é um bloco móvel independente
• Insira blocos através do ícone "+" ou da tecla /, escrevendo o nome do bloco de que precisa
• Configure os blocos através da barra lateral: as opções de formatação e estilo mudam consoante o tipo de bloco selecionado
• Aprenda as teclas de atalho: Shift + Alt + H (Windows) abre uma folha de consulta com todos os atalhos

O que é o editor Gutenberg

O Gutenberg é o editor de conteúdo por blocos integrado no núcleo do WordPress a partir da versão 5.0. Ao contrário do editor clássico TinyMCE, onde todo o artigo era um único campo de texto, o Gutenberg divide o conteúdo em blocos independentes: parágrafos, títulos, imagens, galerias, botões, colunas e dezenas de outros elementos.

Cada bloco pode ser movido, configurado e estilizado independentemente dos outros. O resultado é visível de imediato: trata-se de um editor visual, não de um campo de texto com um botão "Pré-visualizar".

Em 2026, o Gutenberg evoluiu de uma novidade controversa para um page builder completo. Com a introdução da Edição Completa do Site (FSE), o editor de blocos ultrapassou os artigos e as páginas. Agora pode editar cabeçalhos, rodapés, modelos de artigos e arquivos através dele. O editor clássico ainda está disponível como um plugin separado, mas a WordPress terminou oficialmente o seu suporte em 2022. Continuam a ser lançadas atualizações de segurança, mas não são adicionadas novas funcionalidades.

Se leva a sério o trabalho com WordPress, o Gutenberg não é uma opção, mas sim a ferramenta principal. Aprender a usá-lo vale o esforço, nem que seja pela rapidez: quando se habitua, os artigos ficam prontos 2 a 3 vezes mais depressa do que no editor clássico com a sua pilha de campos metabox.

Interface: primeiro arranque

Para abrir o editor, vá a Artigos → Adicionar novo (ou Páginas → Adicionar novo para páginas). O WordPress carregará o Gutenberg com um ecrã de boas-vindas e um campo de título em branco.

À direita está uma barra lateral com dois separadores: Artigo (ou Página) e Bloco. O separador Artigo contém as definições globais: link permanente, categorias, etiquetas, imagem de destaque, excerto e estado de publicação. O separador Bloco mostra as definições do bloco específico selecionado.

Note que o campo do link permanente está disponível de imediato, sem um clique separado no título. Isto poupa alguns segundos em cada artigo.

Trabalhar com blocos de texto

Título do artigo

O primeiro bloco no editor é o título. Basta introduzir o texto, e este torna-se automaticamente o H1 do artigo. Ao lado do título está um botão Editar que abre a edição do link permanente diretamente no bloco.

Prima Enter e surge um novo bloco de parágrafo abaixo do título. O Gutenberg mantém a navegação de teclado familiar do editor clássico: Enter cria um novo bloco, Backspace funde com o anterior.

Parágrafos e a barra de formatação

O novo bloco predefinido é o Parágrafo. Mas antes de introduzir texto, o Gutenberg mostra opções: o bloco pode ser transformado num título, imagem, galeria, capa e dezenas de outros tipos.

Após introduzir texto, a barra de formatação aparece:

A barra de ferramentas permite-lhe:

• Transformar um parágrafo numa citação, título, lista, código ou texto pré-formatado
• Aplicar negrito, itálico, rasurado e sublinhado
• Alinhar o texto à esquerda, à direita, ao centro ou justificado
• Adicionar um link com a opção de abrir num novo separador
• Inserir uma imagem em linha diretamente na linha
• Duplicar, mover ou eliminar o bloco
• Editar o bloco como HTML
• Guardar o bloco em Blocos Reutilizáveis

No separador Bloco da barra lateral, encontra definições avançadas: tamanho da fonte, capitular, cor de fundo e do texto, preenchimento e classe CSS personalizada. As cores podem ser definidas para qualquer valor; a paleta não está limitada às predefinições do tema.

Adicionar imagens

As imagens podem ser inseridas de três formas: através do ícone "+" → separador Imagem, arrastando um ficheiro do seu ambiente de trabalho diretamente para o editor, ou com o comando de teclado /image dentro de um parágrafo.

Clique em qualquer ícone "+", selecione o separador Imagem e aparece um bloco com três origens: carregar do computador, selecionar da biblioteca de media ou colar por URL.

Selecionar um bloco através do menu de inserção é o método mais visual, especialmente no início. Quando se habituar, passará a usar /image, mas o menu visual permanece sempre disponível.

Após inserir uma imagem, a barra lateral oferece: texto alternativo (essencial para SEO e acessibilidade), tamanho, proporção e estilos (arredondamento, duotone, sombras e bordas).

A janela padrão de ficheiros de media é familiar do editor clássico; aqui pode definir o título e a descrição. Mas as definições principais estão agora concentradas na barra lateral do Bloco.

Na prática, recomendamos que preencha sempre o texto alternativo: ajuda tanto os motores de busca como os utilizadores de leitores de ecrã. A descrição deve ser específica, com 4 a 8 palavras, e incluir a palavra-chave da secção.

Ficheiros para download

O bloco Ficheiro permite anexar um PDF, ZIP, imagem ou qualquer outro ficheiro para os leitores descarregarem.

Carregue um ficheiro ou selecione-o da biblioteca de media; o Gutenberg criará automaticamente um botão de download.

O texto do botão e o nome do ficheiro são editáveis. Pode adicionar uma classe CSS para estilização personalizada. Por predefinição, o botão abre num novo separador.

Citações e destaques

O bloco Citação adiciona uma citação com estilo. Ao contrário de um parágrafo normal, a citação é visualmente destacada; o tema aplica-lhe uma formatação especial.

A barra lateral do bloco Citação permite configurar a cor de fundo, o tipo de letra e o espaçamento interior. A citação pode parecer parte da sua identidade visual, em vez de um bloco cinzento padrão.

Uma citação aceita o mesmo texto que um parágrafo, mas destaca-se visualmente. Além da Citação padrão, existe o Destaque de Citação (um bloco de maior impacto visual) e o Verso (um bloco para poesia que preserva espaços e quebras de linha).

Incorporar vídeo e conteúdo externo

O Gutenberg suporta a incorporação de conteúdo de mais de 30 plataformas: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare, entre outras. O processo é igual para todas: insira um bloco Incorporar, selecione a plataforma, cole o URL e clique em Incorporar.

Cole o URL, clique em Incorporar e está pronto. O Gutenberg obtém automaticamente a pré-visualização, o título e a miniatura do vídeo do YouTube.

O vídeo aparece diretamente no editor; pode ver a pré-visualização sem sair do painel de administração. Para o YouTube, estão disponíveis definições: ocultar controlos, ativar a reprodução automática ou definir uma hora de início.

Botões e chamadas para ação

O bloco Botões cria um ou mais botões alinhados. Ideal para CTAs: «Transferir», «Inscrever-se», «Ir para WordPress.org».

Introduza o texto, cole o URL e configure o estilo: preenchido, contorno, arredondamento dos cantos, tamanho. Os botões adaptam-se automaticamente ao telemóvel; em ecrãs estreitos, esticam para ocupar toda a largura.

O Gutenberg verifica o contraste entre o texto do botão e o fundo: se a combinação de cores for ilegível, o editor mostra um aviso. Um pequeno detalhe, mas que poupa tempo nas verificações de acessibilidade.

Colunas e grelhas

O bloco Colunas cria uma grelha de 2 a 6 colunas. Pode inserir qualquer outro bloco dentro de cada coluna: um parágrafo, imagem, botão ou citação.

Por predefinição, são criadas duas colunas, mas pode alterar o número e a largura de cada uma nas definições do bloco.

Em dispositivos móveis, as colunas empilham-se automaticamente na vertical; o conteúdo não se desfaz e permanece legível. Isto costumava exigir media queries em CSS, mas agora funciona de raiz.

Media + texto: imagem ao lado do texto

O bloco Media & Texto é um dos mais úteis para formatação: uma imagem ou vídeo à esquerda (ou à direita), texto com um botão à direita (ou à esquerda).

Carregue uma imagem, adicione texto e, opcionalmente, um botão. Os lados podem ser trocados com um único clique.

E eis como aparece no front-end:

Tem um aspeto profissional e demora apenas um minuto a criar. Não é necessário nenhum page builder para este tipo de layout.

Blocos de terceiros: os plugins expandem o Gutenberg

Muitos plugins adicionam os seus próprios blocos ao Gutenberg. O WooCommerce é o exemplo mais proeminente: após instalar o plugin, aparecem no editor blocos para inserir produtos, carrinhos, filtros e categorias de loja.

O Jetpack adiciona blocos para formulários, subscrições e ícones de redes sociais. O Yoast SEO incorpora análise de legibilidade e dicas de SEO diretamente na barra lateral do editor. O Contact Form 7 disponibiliza um bloco de formulário de contacto.

O princípio é o mesmo em todos os casos: instale o plugin e os blocos aparecem no menu de inserção. Não é necessário código adicional.

Atalhos de teclado e dicas

A dica mais útil do Gutenberg é a tecla /. Em qualquer parágrafo, escreva / e comece a introduzir o nome do bloco. O editor mostra as opções correspondentes; selecione com as teclas de seta e prima Enter.

Por exemplo: /image → bloco de imagem, /heading → título, /table → tabela, /column → colunas. Após uma semana de utilização, este truque acelera significativamente o seu trabalho.

Lista completa de atalhos de teclado: Shift + Alt + H (Windows) ou Opt + Ctrl + H (Mac). Isto abre uma folha de consulta com todos os atalhos, desde mover blocos até alternar entre modos de edição.

Mais algumas técnicas que usamos na prática:

• Ctrl + Shift + D: duplicar o bloco selecionado
• Ctrl + Alt + T: inserir um novo bloco antes do atual
• Ctrl + Alt + Y: inserir um novo bloco depois do atual
• Clique no ícone i na barra de ferramentas superior: mostra a estrutura do documento (títulos, contagem de palavras, parágrafos)
• Vista de Lista (ícone de três linhas no canto superior esquerdo): navegue por todos os blocos do artigo como uma árvore, prático para artigos longos

E por fim: o erro «Falha na atualização» é geralmente causado por uma ligação à internet instável, não por um problema com o editor. Verifique a sua ligação e tente guardar novamente.

Vídeo: Gutenberg em 15 minutos

Quer ver tudo isto em ação? Este pequeno vídeo do WPBeginner mostra o ciclo completo de criação de um artigo no Gutenberg, do primeiro bloco à publicação:

⁉️🤔 Perguntas frequentes

Preciso de instalar o Gutenberg separadamente?

Não, o editor de blocos está integrado no núcleo do WordPress desde a versão 5.0 (lançada em dezembro de 2018). Se tem uma versão recente do WordPress, o Gutenberg já está a funcionar. O plugin Gutenberg separado existe apenas para quem quer testar novos blocos antes de serem incluídos no núcleo.

Posso voltar ao editor clássico?

Sim, instale o plugin gratuito Classic Editor. Ele desativa completamente o Gutenberg e restaura o familiar TinyMCE. Mas tenha em atenção: a WordPress terminou oficialmente o suporte ao editor clássico em 2022. As versões atuais do WordPress (6.x em 2026) ainda funcionam com o Classic Editor, mas as novas funcionalidades (Edição Completa do Site, Temas de Blocos, Padrões) só estão disponíveis no Gutenberg.

Em que é que o Gutenberg difere do Elementor ou do Divi?

O Gutenberg é o editor de conteúdo integrado do WordPress: gratuito e sem dependências externas. O Elementor e o Divi são construtores de páginas comerciais com capacidades de design mais amplas: popups, sliders, integrações de marketing. Para um blogue ou site empresarial típico, o Gutenberg cobre as principais tarefas de layout. Se ganha dinheiro com o seu site (loja, landing pages, funis), um construtor de páginas oferece mais flexibilidade. Boas notícias: o Gutenberg e os construtores de páginas funcionam em simultâneo. Pode construir páginas no Elementor enquanto gere artigos no editor de blocos.

E se os blocos se sobrepuserem ou quebrarem no telemóvel?

Normalmente, o problema é do tema, não do Gutenberg. Verifique: (1) se o seu tema ativo suporta o editor de blocos (os Temas de Blocos garantem um layout correto); (2) se CSS personalizado está a substituir o preenchimento e a largura dos blocos. Mude para o tema padrão Twenty Twenty-Four para testar; se os blocos forem exibidos corretamente, o problema é do seu tema.

Como adiciono um bloco que não está no conjunto padrão?

Duas opções: (1) procure um plugin que adicione o bloco de que precisa (por exemplo, Otter Blocks ou Spectra fornecem dezenas de blocos adicionais), ou (2) crie um bloco personalizado através do Advanced Custom Fields (ACF), o que é mais fácil do que escrever um bloco em React. Para a maioria das tarefas, os plugins são suficientes: instale e utilize.

O Gutenberg funciona com tipos de publicação personalizados (CPT)?

Sim, totalmente. Ao registar um CPT, especifique 'show_in_rest' => true e 'supports' => array('editor'), e o editor de blocos será ativado automaticamente. Para CPTs existentes sem suporte à API REST, existem plugins adaptadores, mas é melhor atualizar o registo do tipo de publicação.

O que escolher: Gutenberg ou construtor de páginas

O Gutenberg evoluiu de uma «funcionalidade» experimental para um editor maduro que alimenta milhões de sites. Para criadores de conteúdo, isto significa um aumento direto de produtividade: o layout visual, a pré-visualização instantânea e os atalhos de teclado poupam 30 a 60 minutos em cada artigo, em comparação com o editor clássico e os plugins de shortcodes.

Se gere um blogue, site de notícias ou portal empresarial, o Gutenberg cobre as principais tarefas. Gratuito, sem código externo e sem carga extra no servidor.

Se está a construir landing pages complexas, uma loja online com layouts personalizados ou funis de marketing, veja os construtores de páginas. Para o trabalho diário com conteúdo, inicie o Gutenberg, escreva /heading e comece simplesmente a escrever.