Guia do Editor Gutenberg do WordPress

O que é o editor Gutenberg

O Gutenberg é o editor de blocos que substituiu o editor clássico do WordPress (TinyMCE) a partir do WordPress 5.0. Em vez de um grande campo de texto, o Gutenberg usa um sistema de blocos em que cada elemento de conteúdo — parágrafo, imagem, título, lista, vídeo — é um bloco separado que pode editar, mover e estilizar de forma independente.

Foi batizado em homenagem a Johannes Gutenberg, inventor da prensa de tipos móveis. Tal como a prensa de Gutenberg revolucionou a criação de conteúdo no século XV, o editor Gutenberg do WordPress revoluciona a forma como criamos conteúdo web.

Se vem do editor clássico, a mudança para o Gutenberg pode parecer confusa ao início. O nosso guia para criar um site WordPress aborda as noções básicas que o vão ajudar. Mas, depois de dominar o básico, o Gutenberg oferece muito mais flexibilidade e controlo sobre o aspeto do seu conteúdo sem precisar de HTML ou CSS.

Trabalhar com blocos — noções básicas

Adicionar blocos

Para adicionar um novo bloco, clique no botão azul "+" que aparece entre os blocos ou no canto superior esquerdo do editor. Abre-se um menu com todos os blocos disponíveis, organizados por categoria: Texto, Multimédia, Design, Widgets, Tema e Incorporações. Também pode simplesmente escrever "/" num parágrafo vazio para procurar blocos rapidamente.

Os blocos mais comuns

• Parágrafo: O bloco de texto básico. Suporta negrito, itálico, links e formatação inline.
• Título: Títulos de H2 a H6. Use-os para estruturar o conteúdo (o H1 é normalmente o título do artigo).
• Imagem: Inserção de imagens com opções de tamanho, alinhamento, texto alternativo e link.
• Lista: Listas com marcadores e numeradas, com itens aninhados.
• Citação: Citações destacadas com aspeto estilizado.
• Galeria: Uma galeria de imagens com layout automático e visualização em lightbox.
• Capa: Uma imagem com texto por cima — ótima para secções com imagem de fundo.
• Colunas: Organize o conteúdo em colunas (2, 3 ou mais) para layouts mais complexos.

Editar e mover blocos

Cada bloco tem uma barra de ferramentas que aparece por cima quando está selecionado. A barra contém opções específicas desse tipo de bloco. No lado direito do editor, um painel de definições oferece opções adicionais para o bloco selecionado (cores, tipografia, espaçamento).

Pode mover blocos por drag-and-drop ou usando as setas para cima/baixo na barra de ferramentas. Também pode agrupar, copiar, duplicar ou converter blocos noutro tipo (por exemplo, parágrafo em título).

Blocos avançados

Bloco Grupo

O bloco Grupo permite-lhe combinar vários blocos numa só unidade. Isto é útil para aplicar uma cor de fundo, espaçamento ou contorno comum a um conjunto de blocos. Por exemplo, pode agrupar um título, um parágrafo e um botão num "cartão" com cor de fundo e cantos arredondados.

Bloco Colunas

O bloco Colunas cria um layout de várias colunas. Pode escolher entre variantes predefinidas (50/50, 33/33/33, 25/50/25, etc.) ou definir manualmente a largura de cada coluna. Dentro de cada coluna pode adicionar quaisquer blocos. No telemóvel, as colunas empilham-se automaticamente na vertical.

Bloco Tabela

Para dados tabulares, o bloco Tabela oferece uma forma simples de criar tabelas sem HTML. Pode definir o número de linhas e colunas, estilizar o cabeçalho e o rodapé da tabela e aplicar um estilo às riscas para melhor legibilidade. Para tabelas mais complexas, considere um plugin como o TablePress.

Blocos reutilizáveis (Padrões Sincronizados)

Desde o WordPress 6.3, os blocos reutilizáveis passaram a chamar-se "Padrões Sincronizados". Esta é uma das funcionalidades mais poderosas do Gutenberg. Pode guardar qualquer bloco ou conjunto de blocos como padrão e depois usá-lo em várias páginas.

Diferença fundamental: quando altera um padrão sincronizado, a alteração é aplicada automaticamente a TODAS as páginas onde esse padrão é usado. Isto é ideal para elementos que se repetem nas páginas — chamadas à ação (CTAs), informações de contacto, banners promocionais, formulários de newsletter.

Para criar um padrão sincronizado: selecione o bloco ou os blocos, clique nos três pontos na barra de ferramentas, escolha "Criar padrão" e dê-lhe um nome. Para o inserir noutra página, encontre-o na secção Padrões do inseridor de blocos.

Atalhos de teclado

Os atalhos de teclado aceleram drasticamente o trabalho no Gutenberg. Os mais úteis:

• / (barra): Num parágrafo vazio, abre a pesquisa rápida de blocos.
• Ctrl+Shift+D: Duplica o bloco selecionado.
• Ctrl+Alt+T: Adiciona um novo bloco acima do atual.
• Ctrl+Alt+Y: Adiciona um novo bloco abaixo do atual.
• Ctrl+Shift+Z: Refazer.
• Ctrl+Z: Desfazer.
• Escape: Seleciona o bloco (passa do modo de edição para o modo de seleção).
• Enter: Cria um novo bloco abaixo.
• Ctrl+Shift+,: Oculta/mostra o painel de definições da barra lateral.
• Shift+Alt+H: Mostra todos os atalhos de teclado disponíveis.

No Mac, use Cmd em vez de Ctrl. Estes atalhos funcionam em todas as versões modernas do WordPress.

Dicas para um trabalho mais eficiente

Use a "Vista de Lista" (Ctrl+Alt+O) para ver a estrutura de todos os blocos numa vista hierárquica — especialmente útil para páginas longas. Experimente o modo "Ecrã inteiro" para trabalhar sem distrações. Use a opção "Barra de ferramentas no topo" se não gostar que a barra apareça por cima de cada bloco. Organize os blocos usados com frequência em padrões para uma criação de conteúdo mais rápida.

Conclusão

O editor Gutenberg é uma ferramenta poderosa que transforma a forma como cria conteúdo no WordPress. A abordagem por blocos dá-lhe controlo visual sem código, os padrões sincronizados poupam tempo em conteúdo repetido e os atalhos de teclado aceleram o trabalho diário. Invista tempo a aprender o Gutenberg — vai compensar muitas vezes. Para um desempenho ideal do editor, use alojamento otimizado para WordPress para uma criação de conteúdo mais rápida e melhor.