Quer aprender na prática? Conheça o Marketing Digital Expert
Dias
Horas
Min
Seg

Editor clássico X Gutenberg

Entenda o que é o Gutenberg do WordPress. Veja o passo a passo de como explorar todos os recursos do novo editor!

O editor clássico do WordPress já passou por algumas mudanças ao longo dos anos, mas nada comparado com a chegada do Gutenberg. O que mudou?

Este artigo faz parte do Curso WordPress Básico – Gratuito e Online. Para se aprofundar no tema, acesse a página do curso.

Conheça o curso

Primeiramente, vamos entender um pouco das motivações para remodelar completamente o editor.

Muitas plataformas já oferecem experiências muito mais modernas e agradáveis para publicação de conteúdo. Por exemplo, o Medium, o Tumblr, e Ghost são plataformas que oferecem experiências mais fluídas no quesito editor de texto.

Editor Clássico

O editor clássico ajudou muita gente em todos esses anos. Por isso mesmo, muitos ficaram receosos quando foi anunciada a chegada do Gutenberg. Mas o fato é que o Gutenberg realmente oferece uma experiência superior.

O editor clássico se parece muito com o editor do Microsoft Word. Justamente por isso, ele dificultava algumas tarefas que deveria ser simples. Por exemplo: tente inserir duas imagens, uma ao lado da outra, usando o editor clássico.

Difícil não? Esse foi apenas um exemplo, mas assim como este existem diversas outras tarefas simples que são bem difíceis de executar no antigo editor.

Apesar de oferecer uma experiência muito mais rápida, fácil e agradável, existem aqueles que ainda preferem utilizar o editor clássico. As novas versões do WordPress já não possuem mais esse editor e vem com o Gutenberg já definido como editor padrão. Se você quer utilizar o editor clássico, precisa saber de duas coisas:

O que é o Gutenberg?

O Gutenberg é o novo editor do WordPress baseado em blocos. Logo depois da sua chegada no fim de 2018, começou a ser disponibilizado para testes, em forma de plugin. Quem utilizasse versões do WordPress superiores a 4.8 já podia instalar e testar o Gutenberg.

A partir da versão 5.0 do WP o Gutenberg passou a ser então o editor padrão. A nova experiência baseada em blocos é muito mais fluída e simples.

E como funciona essa nova experiência?

Além de estruturar seus posts e páginas em blocos, o que muda basicamente é forma como o WordPress organiza esses blocos. Sendo assim, ele passou a utilizar comentários HTML como forma de organizar esses blocos.

Gutenberg na versão Visual
Gutenberg na versão Visual

Veja no exemplo acima, a versão visual do editor em blocos e em seguida a versão código desse mesmo conteúdo. Note que ele usa comentários HTML para marcar o início e o fim de um bloco.

Gutenberg na versão Código
Gutenberg na versão Código

Como usar o Gutenberg

Para usar todo o potencial do Gutenberg é importante conhecer os recursos e saber onde encontrar cada um deles. Vamos por partes.

Opções de edição no Gutenberg
Opções de edição no Gutenberg

1. Ferramentas do Documento

Nesse canto superior esquerdo você encontra as seguintes opções:

  • ⊕ Adicionar bloco: Inserção de novos blocos no documento
  • ↩ Desfazer: o famoso CTRL + Z / CMD + Z (que também funciona no teclado)
  • ↪ Refazer: refaz a última ação
  • ⓘ Estrutura de conteúdo: exibe muitas informações importantes a respeito do seu conteúdo como a contagem de palavras, títulos, parágrafos e blocos.
  • ≡ Navegação dos blocos: exibe todos os blocos contidos no seu documento
Estrutura de conteúdo no Gutenberg
Estrutura de conteúdo

2. Configurações e Publicação

Os itens encontrados nessa seção são relacionados a configuração e publicação.

  • Salvar como rascunho / Mudar para rascunho: permite que você salve o conteúdo como rascunho e caso já o tenha publicado, que você retorne ele para o status de rascunho.
  • Visualizar: permite a pré-visualização do seu conteúdo já no frontend.
  • Publicar / Atualizar: permite que você publique seu conteúdo, ou caso já o tenha publicado, que você salve as atualizações.
  • ⚙ Configurações: exibe/oculta o painel de configurações.
  • ⋮ Mostrar mais ferramentas e opções: exibe opções de Visualização, do Editor, de Ferramentas e Opções gerais.
Opções e Ferramentas do Gutenberg
Opções e Ferramentas do Gutenberg

3. Configurações do Documento

Na guia Documento você pode realizar todas as configurações necessárias do documento que está editando (post/página/post type). As configurações que tradicionalmente já existiam, agora ficam organizadas nesta lateral direita. Você encontrará as opções de:

  • Status e visibilidade: edite as opções de visibilidade, data de publicação e mover para lixeira.
  • Revisões: caso tenha salvo mais de uma versão, você poderá encontrar aqui as revisões e as versões anteriores.
  • Link permanente: altere a slug da URL e consequentemente seu permalink.
  • Categorias e Tags: no caso de posts, defina quais categorias e tags serão associadas ao conteúdo.
  • Imagem destacada: selecione a imagem destacada deste conteúdo.
  • Resumo: o resumo (excerpt) pode ser preenchido neste campo.
  • Discussão: habilite e desabilite os comentários e trackbacks.
  • Atributos da página: se estiver editando uma página, você encontrará aqui as opções de modelo, ordem e página ascendente.

4. Configurações do Bloco

Cada bloco adicionado em seu documento também pode ser configurado. Para alterar essas configurações você deve clicar em um bloco e na lateral direita serão exibidas as opções de configuração.

É importante lembrar que cada tipo de bloco oferece opções diferentes.

Opções do Bloco no Gutenberg
Opções do Bloco no Gutenberg

Experimente o Gutenberg

Você pode experimentar o Gutenberg ao vivo, assim você já vê como tudo isso funciona na prática.

Professor
Dúvidas
Fórum de dúvidas disponível apenas para assinantes.

Você deve concluir pelo menos 50% do curso para avaliá-lo.

Exclusivo para Assinantes

Comece Gratuitamente

Crie sua conta Grátis e tenha acesso aos cursos ao vivo e muito mais.

Seja um Assinante

Tenha acesso ilimitado aos cursos, materiais, certificados e muito mais.

Utilizamos seus dados para oferecer uma experiência mais relevante ao analisar e personalizar conteúdos e anúncios em nossa plataforma e em serviços de terceiros. Ao navegar pelo site, você autoriza a Mirago a coletar estes dados e utiliza-los para estes fins. Consulte nossa Política de Privacidade em caso de dúvidas.