Gutenberg: como funciona o novo editor do WordPress

Caixa de tipos móveis em metal com logotipo do editor Gutenberg sobre

Em sua versão 5.0, Bebo, lançada no dia 6/12, o WordPress tornou padrão o seu novo editor de conteúdo, batizado de Gutenberg. Este novo editor é um marco para a plataforma, apresentando uma experiência de publicação totalmente diferente, a qual iremos nos aprofundar agora.

Por que o WordPress precisava de um novo editor?

Há muitos anos o WordPress já utilizava o editor clássico, baseado em uma única área de texto. Nesta área de texto inseríamos títulos, parágrafos, imagens e embeds que seriam convertidos no HTML a ser exibido em seu site.

Imagem mostrando o editor clássico do WordPress
Editor clássico do WordPress

Quer inserir dois parágrafos lado a lado no editor clássico? É preciso conhecimentos de HTML/CSS, ou que exista algum shortcode disponível, seja em seu tema ou via algum plugin. Este é apenas um dos exemplos de tarefas simples que se mostravam verdadeiros desafios que frustavam os usuários não-técnicos do WordPress.

O Gutenberg vem para permitir uma edição muito mais fluída do conteúdo, apresentando uma interface totalmente repaginada de editoração no WordPress, e solucionando problemas de construção do conteúdo como este, das múltiplas colunas. Como o Gutenberg resolve isso? Com blocos.

O que são blocos do Gutenberg

Toda interface de edição do Gutenberg é baseada em blocos. Esqueça o campo único do editor clássico. Você terá a disposição uma página em branco a ser construída com os blocos que desejar. E quais são estes blocos? Você tem a disposição blocos de parágrafo, título, imagem, lista, citação, áudio, tabelas e por aí vai.

Lista de blocos do Gutenberg em grade
Alguns dos tipos de blocos disponíveis no Gutenberg.

Como usar o Gutenberg?

Se você estiver usando a versão 5.0 do WordPress, o Gutenberg já será o seu editor nativo, se não estiver, basta atualizar o seu WordPress. Com a versão 5.0 instalada, vá em adicionar novo post/página e pronto, você verá a nova interface de edição.

Interface do Gutenberg, imagem do release da versão 5.0 do WordPress
Imagem do release da versão 5.0 do WordPress.

Título e configurações do post

Ao criar um novo post ou página, o primeiro bloco exibido no topo da página é o bloco de título da publicação. Ele é um bloco fixo, que serve apenas para inserção do título e configuração do permalink da página.

Animação demonstrando como inserir o título no Gutenberg

Inserindo blocos no Gutenberg

Para inserir blocos, você pode ir no ícone + no canto superior esquerdo da tela, será aberta a janela com todos os blocos disponíveis. Escolha o bloco desejado e ele será inserido.

Demonstração de como inserir um bloco no Gutenberg

Personalizando blocos

Cada bloco possui suas próprias configurações, por exemplo, cor do texto e cor do fundo são atributos que podem ser selecionados em blocos de parágrafo. Sempre que estiver editando um bloco, na barra lateral direita, na aba Bloco (Block), é onde ficarão as configurações do bloco ativo.

Demonstração de como mexer nas opções de blocos do Gutenberg

Reordenando blocos

Para reordenar blocos, basta estar com o mouse sobre o bloco, controles aparecerão flutuando na lateral esquerda do bloco. Você pode clicar nas setas ou clicar e segurar nos pontinhos para arrastar seu bloco para cima e para baixo.

Demonstração de como ordenar blocos no Gutenberg

Excluindo blocos

Para excluir um bloco basta clicar no ícone de três pontinhos que aparece no topo, na barra de ferramentas do bloco, um menu de opções aparecerá, clique em Remover bloco (Remove block).

Demonstração de como remover blocos no Gutenberg

Múltiplas colunas

Um dos grande benefícios de um construtor em blocos é poder adicionar colunas em seu layout, não mais necessitando de conhecimentos técnicos. Apesar da usabilidade ainda não ser muito boa, o recurso já se mostra bem interessante.

Para adicionar colunas, você deve inserir o bloco colunas (isso mesmo, as colunas são um bloco). O bloco colunas é um bloco que tem a configuração de quantas colunas você quer, e cada coluna aceita qualquer bloco a ser inserido.

Demonstração de como inserir múltiplas colunas no Gutenberg

Galeria de imagens

A inserção de galerias de imagens também não é nenhum mistério no Gutenberg, ele já oferece um bloco chamado galeria (gallery). Basta escolher o bloco e depois selecionar imagens de mídia já enviadas ou fazer upload de novas imagens.

Plugins que adicionam blocos ao Gutenberg

Alguns plugins podem adicionar novos blocos ao Gutenberg, ampliando as possibilidades de edição do seu conteúdo. Alguns plugins podem ter outras funções mas também adicionar blocos ao Gutenberg, ou podem ser plugins totalmente dedicados a estender o editor.

Aqui uma lista de alguns plugins dedicados a adicionar novos blocos ao Gutenberg:

Como manter o editor clássico no WordPress?

Para manter o editor clássico do WordPress há uma alternativa. Se por algum motivo você não pode e não quer utilizar o Gutenberg por agora, sem problemas, o time de desenvolvimento do WordPress irá dar suporte até 2022 a um plugin que ativa o editor clássico em seu site. Basta instalá-lo pelo painel do seu site, perfeito não?

E você, já está utilizando o Gutenberg? Conte pra gente o que achou nos comentários!

Precisando de auxílio para que seu site suporte o Gutenberg e sua equipe esteja preparada para utiliza-lo? Fale conosco.

Compartilhe

    • Olá Edison, para inserir um link em um bloco de imagem você precisa, com o bloco selecionado, ir na lateral direita, onde há as opções do bloco e modificar o campo “Apontar para”, selecionar “URL personalizado” e então aparecerá o campo abaixo para inserir a URL para a qual deseja apontar.

  • não consigo usar nada deste troço, primeiro que o “+” não funciona!
    o campo bloco não tem nada… não consigo adicionar
    que coisa ruim !!
    não consigo adicionar imagem, não tem como adicionar digitando /image
    não funciona nada!

  • consegui resolver o erro quado o botão não funcionar
    fui em
    usuario > seu perfil > e desativei o ” Desativar o editor visual ao escrever ”

    ai o botão Adicionar funcionou novamente

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *