O atual editor visual do WordPress não sofreu grandes alterações ao longo dos anos e em grande parte, permaneceu idêntico. Apesar disso não ser algo negativo, são muitos que consideram ter chegado a hora de uma mudança. Outras plataformas como a Medium ou a Ghost oferecem uma experiência refrescante para os redatores, então por que motivo o WordPress não faz o mesmo? Bom, nos últimos 6 meses, muitos colaboradores e voluntários têm vindo a trabalhar no novo editor Gutenberg para WordPress. O objetivo? Fazer com que a adição de conteúdo rico no WordPress seja algo simples e agradável. Hoje iremos conhecer o novo editor e discutir algumas vantagens e desvantagens.
- O que é o Gutenberg?
- Como Instalar o Gutenberg
- Explorando o Gutenberg
- Vantagens do Editor Gutenberg para WordPress
- Desvantagens do Editor Gutenberg para WordPress
- Experimente a Demo do Gutenberg
O qué é o Gutenberg?
Gutenberg é uma versão de um novo editor para o WordPress. O seu nome deriva de Johannes Gutenberg, que há mais de 500 anos inventou a impressora mecânica de perfil móvel. O atual editor visual exige que muitos de nós usamos shortcodes (códigos curtos) HTML para que as coisas funcionem corretamente. O seu objetivo é fazer com que isso seja mais simples, especialmente para quem está apenas começando a utilizar o WordPress. Eles estão abraçando os “little blocks” (pequenos blocos) e esperam adicionar mais opções avançadas de layout. Você pode conferir o exemplo oficial.
Sendo justo com os desenvolvedores e a equipe que está trabalhando nesse projeto, devemos sublinhar que ele está atualmente na sua fase beta e de testes, não está ainda preparado para ser executado em sites de produção. Mas quisemos ver como ele funciona com os nossos olhos e compreender o porquê de toda essa popularidade. Manteremos esse artigo atualizado com as mais recentes melhorias e alterações, assim que elas forem publicadas. Ao que parece, Matt Mullenweg (o fundador) tem como objetivo chegar nas 100,000 instalações ativas antes de o Gutenberg ser oficialmente adicionado ao núcleo do WordPress. O que faz todo sentido, já que isso permitirá solucionar muitos bugs, problemas, ao mesmo tempo que possibilita o processamento de novas ideias e solicitações de recursos.
“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU
— Bridget Willard (@YouTooCanBeGuru) June 17, 2017
Tendo em consideração que o Gutenberg está ainda em fase de testes, a equipe que está trabalhando nele está incentivando as pessoas para escreverem seus comentários e feedback no fórum de suporte do WordPress ou abrir uma questão no GitHub. Ou podem participar nas discussões que acontecem no #core-editor no Slack do core do WordPress. O Gutenberg já sairá integrado no WordPress 5.0.
Como Instalar o Gutenberg
No momento em que esse artigo é redigido, o plugin do Gutenberg tem um pouco mais de 20,000 instalações ativas com mais de 290,000 downloads totais e 2.5 estrelas em um total de 5. Também exige a versão 4.8 do WordPress para ser usado.
Você pode baixar a versão mais recente do Gutenberg no repositório do WordPress ou procurando por ele no seu painel WordPress em “Adicionar Novos” plugins. Recomendamos uma vez mais a sua instalação em um site de testes ou então no ambiente de testes do seu host.

Instalar o Plugin Gutenberg do WordPress
Explorando o Gutenberg
Depois da instalação, debaixo de Posts você encontrará links que lhe permitem abrir o editor Gutenberg. Eles não substituem o editor padrão do WordPress, o que é algo positivo na nossa opinião, já que isso lhe permite trocar entre ambos durante a fase de testes. De acordo com a mais recente versão no repositório, o Gutenberg agora também suporta tipos de páginas personalizadas e páginas.

Link do Gutenberg em um Post
Importante: Assim que o WordPress 5.0 for lançado, o Gutenberg será o editor padrão (#41316), mas você ainda tem a opção de instalar o editor clássico se encontrar problemas de compatibilidade (como observado no novo aviso que mostraremos abaixo).

Aviso sobre o Gutenberg no WordPress 5.0
Gutenberg acrescenta um novo menu no seu painel do WordPress que apresenta uma versão demo (como pode ser observado abaixo) e a possibilidade de criar um novo post. Uma vez mais, a finalidade desse menu está possivelmente apenas relacionada com testes. Como pode ver, o editor visual parece ser muito diferente do que aquilo a que está provavelmente acostumado. Tem uma sensação muito parecida com o Medium, o que é excelente.

Editor demo do Gutenberg
Se colocar o editor Gutenberg e o atual editor visual lado a lado (clique para ampliar), você pode ver que o Gutenberg oferece muito mais espaço para a escrita, especialmente em telas menores. Para pessoas escrevendo em laptops, o Gutenberg será uma agradável mudança de ritmo! Ele está focado na “escrita acima de tudo” e tenta oferecer um ambiente menos desorientador.

Comparando o Gutenberg com o editor atual
No editor Gutenberg do WordPress, você pode clicar em “Configurações de Post” para remover a barra lateral direita. E apesar de isso lhe dar acesso a uma tela ainda mais espaçosa, é algo intermédio quando comparado com o modo de escrita livre de distrações atualmente disponível. Tentámos que ele fosse acionado no editor Gutenberg através do atalho Shift+Alt+W, mas por enquanto parece não funcionar. É possível que ainda não tenham adicionado isso. Mas temos a certeza de que o farão, já que provavelmente existe um número razoável de pessoas que utiliza esse recurso.

Ocultar configurações de post (uma opção intermédia em comparação com o modo de escrita livre de distrações)
Para alternar entre o modo do editor visual e o editor de texto (código), existe agora um menu pendente no canto superior esquerdo. Você vai notar que agora existem comentários HTML no início e no fim de cada bloco. Por exemplo, esse colocado abaixo permitirá que você crie um bloco de texto.
<!-- wp:core/text --> <!-- /wp:core/text -->
Isso permite que você crie os blocos diretamente no editor de texto. Contudo, também acrescenta muito mais confusão do que aquilo a que provavelmente está acostumado se você edita nesse modo.

Editor de texto do Gutenberg
Quando você destaca um bloco, existem opções que permitem facilmente movê-lo para cima ou para baixo com as setas, excluí-lo, ou entrar nas configurações do bloco. Isso é muito semelhante aos controles disponíveis no Medium.

Trabalhando com os blocos do Gutenberg
Também ficámos surpreendidos com o seu imediato bom funcionamento em dispositivos móveis. Se você pretende adicionar rapidamente uma imagem ou parágrafo antes de publicar um post, o Gutenberg parece tornar essas tarefas muito simples.

Editor móvel do Gutenberg
Uma das primeiras coisas que provavelmente irá notar é que a barra de ferramentas TinyMCE desapareceu após vários anos. Ela foi substituída por um menu pendente se clicar no botão “Inserir”. Bom, isso parece estar associado à intenção do Gutenberg de colocar um ponto final na sua dependência da integração do TinyMCE. Mas será que é mesmo assim?

É o fim do TinyMCE
Eis o que Matt Mullenweg tem a dizer sobre isso.
Estamos tentando garantir que você só precisará de uma tentativa para aprender o que são blocos, após adquirir esse conhecimento sobre blocos de imagem, que podem surgir em um post, barra lateral, página, tipo de post personalizado, tudo funcionará exatamente da mesma forma. Seja qual for o elemento integrado, por exemplo um plugin que acrescenta o seu Google Photos ou Dropbox, ele passará também a funcionar em todos os lugares.” – Matt Mullenweg (fonte: WP Tavern)
Contudo, Andrew Roberts, líder do projeto na equipe do TinyMCE também entrou em contato para nos esclarecer sobre algumas coisas em relação ao que acontece com o TinyMCE e o Gutenberg.
Eu estive na equipe do Gutenberg desde o início. Foi um esforço conjunto. É interessante notar que o motor de edição do core do TinyMCE está alimentando o componente “editável”, que por sua vez alimenta a maioria dos blocos. Por exemplo, o bloco Tabela. É provável que isso continue acontecendo no futuro próximo.
Além disso, o bloco Texto Clássico é essencialmente o editor do TinyMCE. O destaque que ele recebe está dependente do feedback da comunidade. Existe realmente um Pedido de Integração (#1394) sendo trabalhado que essencialmente transforma o Gutenberg em uma capa para o editor ‘antigo’, com isso os plugins e botões do TinyMCE continuariam funcionando. Veremos se isso será incluído.
Ainda assim é provável que as equipes Core do WP e TinyMCE trabalhem em conjunto para garantir a continuidade de uma experiência de usuário WordPress mais focada no processador de texto. Mesmo que isso seja eventualmente transformado em um plugin.
Na mesma linha, uma das razões pelas quais temos trabalhado no projeto Gutenberg com a excelente equipe do Gutenberg tem que ver com o objetivo de levar esses conceitos até à comunidade mais ampla do TinyMCE ao longo dos próximos 12 meses. Isso permitirá a você transportar conceitos de edição baseados em blocos para o seu próprio aplicativo personalizado. – Andrew RobertsAbaixo encontramos algumas novas adições de blocos que consideramos serem muito boas.
Bloco de Tabela e Bloco de Coluna de Texto
As tabelas simples são agora muito mais fáceis, pois você pode inseri-las em blocos dentro do editor. Antes você tinha de usar um plugin de terceiros ou código HTML. Atualmente pode simplesmente adicionar uma tabela 2×2 através da opção inserir e não poderá fazer a personalização sem entrar na visão de texto. Contudo, podemos assumir que você será capaz de fazer todas essas coisas no editor visual.

Tabelas do Gutenberg
Eles adicionaram a capacidade para adicionar blocos de colunas de texto responsivo, o que é ótimo! Atualmente, você pode escolher entre 2, 3 e 4 colunas de layout. As colunas responsivas no WordPress sempre foram uma dificuldade e geralmente exigem um plugin de terceiros para funcionarem corretamente.

Colunas de Gutenberg
Bloco de HTML ao vivo
Também adicionaram aquilo que nós designamos por bloco de HTML ao vivo. Você pode inserir o seu código e depois ver uma pré-visualização diretamente dentro do bloco. Essa é uma ideia muito boa e realmente pode impedir que alguns de nós ficamos alternando entre os modos de editor visual e de editor de texto.

Bloco de HTML no editor Gutenberg
Arrastar e Soltar Imagens
Na versão 0.5.0 do Gutenberg, você pode agora arrastar e soltar imagens diretamente em um bloco de imagem, como está habituado a fazer no editor visual. Contudo, quando você faz isso, existe um efeito de desvanecimento bastante estranho. Conseguimos facilmente perceber que isso pode ser um problema.

Arrastar e Soltar Imagens
Agora pode também adicionar outras classes de CSS para determinados blocos.

adicionar classe css
Blocos Recentes
Com todos os blocos sendo construídos dentro do editor Gutenberg e provavelmente com muitos mais no futuro, eles adicionaram o recurso “Blocos recentes” para tentar ajudar a acelerar o processo de inserção.

adicionar classe css
Opções de Texto de Capa
Na versão 0.9.0 do Gutenberg, também foram introduzidos alguns novos estilos visuais e opções para o texto de capa. Você pode facilmente alterar o tamanho da fonte, transformá-la em uma Capitular e alterar a cor com o novo componente de palete de cores personalizadas.

Texto de Capa do Gutenberg
Slash de Preenchimento Automático
Um interessante recurso adicionado ao Gutenberg 1.1.0 é a capacidade de usar o preenchimento automático para inserir blocos. Para aqueles que usam diariamente o Slack, essa é uma forma muito familiar de formatar rapidamente o conteúdo como quiser. Ter a opção de minimizar cliques e utilizar mais do teclado é sempre algo positivo!

Preenchimento automático do Gutenberg (Fonte da imagem: WordPress.org)
Índice e Suporte para Âncoras
Também adicionaram um Índice na barra lateral. Ele é composto por links clicáveis, através dos quais pode rapidamente saltar para uma seção específica do seu artigo. Isso pode ser útil quando escreve conteúdo extenso.

Índice do Gutenberg

Índice do Gutenberg
As âncoras são outro recurso que pode agora usar nos blocos. Isso é muito interessante e algo que já era há muito necessário no core. Adicionar âncoras permite que você crie um link direto para uma determinada seção ou cabeçalho do artigo. Isso é ótimo para fins de compartilhamento e para criar atalhos para menus nas SERPs.
Contadores de Palavras e Blocos
A maioria está habituada a encontrar a contagem de palavra total na parte inferior do editor WYSIWYG. Bom, no Gutenberg 1.2.1 eles acrescentaram isso na forma de um pequeno pop-up informativo que pode rapidamente visualizar. Você pode ver a contagem total de palavras, número de blocos e número de cabeçalhos.

Contagem de palavras e blocos do Gutenberg
Bloco de Pull Quotes e Novas Opções de Alinhamento
Além do bloco de citação padrão que usamos há vários anos, eles também adicionaram um novo pull quote. E sim, os pull quotes são diferentes. Também é bom encontrar variações em relação ao posicionamento dos blocos. Durante anos, o editor visual padrão tem dado para você a capacidade de alinhar à esquerda, alinhar ao centro, alinhar à direita e não atribuir qualquer alinhamento. Com o editor Gutenberg para WordPress, você também pode alinhar à largura (como mostrado abaixo) e alinhar à largura total.

Pull quote do Gutenberg alinhado à largura
Botão
Também existe um método integrado para adicionar um botão simples. Apesar de ainda não ter muitas opções é bom ver que ele existe, já que muitos blogueiros e editores precisam de métodos mais fáceis para adicionar chamadas para ação aos seus posts. Atualmente você tem de usar o HTML ou depender de um botão/plugin de código curto de terceiros.

Botão do Gutenberg
Opções de Embutimento
Se você pretende um acesso mais simples às opções de embutimento, então o seu desejo foi ouvido! O Gutenberg faz com que o embutimento de conteúdo de mídia seja muito fácil, no YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit e muitos mais. Ainda que você já pudesse embutir todos esses anteriormente, muita gente não tinha essa perceção, já que não existia qualquer menção no editor visual. Juntamente com a nova experiência de blocos e opções de alinhamento, dificilmente podemos considerar que fosse possível fazer algo melhor. Contudo, eles poderão ter de reorganizar as coisas em breve, pois essa opção pode rapidamente ficar confusa.

Opções de embutimento do Gutenberg
Vantagens do Editor Gutenberg para WordPress
Aqui ficam algumas vantagens que vemos no atual Editor Gutenberg.
- Diminuir *alguma* dependência do TinyMC é algo positivo na nossa opinião. Gostaríamos de ver uma maior integração entre o core, os desenvolvedores de temas, os plugins e o editor.
'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU
— Alex Denning (@AlexDenning) June 17, 2017
- Para editores que preferem a experiência de edição mais recente do Medium, eles irão provavelmente adorar o editor Gutenberg para WordPress.
- O Gutenberg oferece uma experiência menos distrativa com mais espaço na tela.
- Os blocos são divertidos de usar e as novas opções de alinhamento são um passo à frente para telas de maior resolução e websites responsivos e de template com largura máxima.
- Já funciona muito bem em dispositivos móveis e conseguimos perceber que muita gente vai começar usando essa vertente. Precisa de fazer uma edição rápida em seu telefone enquanto está no trânsito? Sem problema.
- A capacidade oferecida aos desenvolvedores de temas e plugins para criarem seus próprios blocos.
- Mais fácil de usar para iniciantes.
Outra coisa que chamou nossa atenção é que no, Gutenberg 0.4.0, eles referiram nos seus registros de desenvolvimento a adição de uma API para manipulação de conteúdo colado. (O objetivo é ter um tratamento especial para a conversão de Word, Markdown, Google Docs em blocos nativos do WordPress.) Isso seria incrível. Atualmente a possibilidade de copiar do Google Docs para WordPress está totalmente inoperacional.
Desvantagens do Editor Gutenberg para WordPress
E aqui ficam algumas desvantagens que vemos no atual editor Gutenberg. É bom lembrar que ainda estamos na fase de testes, portanto muito dessas coisas podem ser corrigidas ou adicionadas.
- Atualmente não existe suporte para Markdown.
- Apesar de termos referido que ele é mais fácil de usar por principiantes, também podemos perceber que algumas pessoas irão considerar a aprendizagem difícil.
- De acordo com informações de outubro de 2017, o Gutenberg agora suporta caixas meta. Contudo, esse é apenas o suporte inicial e exigirá a participação dos desenvolvedores. No entanto, é um passo na direção certa. Pelo menos agora pode adaptar as configurações do seu Yoast SEO. 😄

Caixas meta do Gutenberg
- Com tantos temas e plugins, a compatibilidade retroativa será um enorme problema no futuro. Na verdade é provável que milhares de desenvolvedores tenham agora imenso trabalho pela frente, por exemplo aqueles que possuem integrações com o TinyMCE. Além de todas as atualizações do WordPress, será provavelmente o mais exigente para a maioria dos desenvolvedores. Embora possa existir em breve um adaptador ao TinyMCE capaz de garantir compatibilidade com versões anteriores. Ver pedido de integração #1394.
- Tem gente preocupada com a acessibilidade do Gutenberg. Joost de Valk, o desenvolvedor do Yoast SEO, mencionou essa preocupação. Veja também essa publicação sobre como utilizar o Gutenberg com um leitor de tela.
Os desenvolvedores também começaram emitindo suas preocupações com o Gutenberg. Ahmad Awais também lançou um padrão do Gutenberg para ajudar os desenvolvedores de temas e plugins de WordPress a iniciarem o seu desenvolvimento com o Gutenberg. Vale a pena conferir.
E muitos de vocês provavelmente estão se perguntando, o Gutenberg será opcional ou não? A resposta é não. Quando eles acrescentarem oficialmente a função Gutenberg ao core do WordPress, você não vai ser capaz de o desligar. Assim, ele passará a ser o editor oficial do WordPress. Mas existe um plugin gratuito denominado Classic Editor que pode usar para restaurar o editor antigo. Mas use isso como um meio para atingir um fim.
Também recomendamos que veja esse excelente post sobre a desmistificação do Gutenberg que pode responder a quaisquer questões adicionais que possa ter.
Experimente a Demo do Gutenberg
Quero testar o Gutenberg sem o instalar? Veja o Frontenberg, uma demo limitada de front-end do editor Gutenberg para WordPress.
Introdução ao Tema Twenty Twenty.
Além disso, se você ainda não está pronto, você pode desabilitar o novo editor. Aqui está o nosso guia: Como Desabilitar o Editor WordPress do Gutenberg.
Resumo
Estamos de forma geral muito impressionados com o novo editor Gutenberg para WordPress, é definitivamente algo que nos faz sentir entusiasmados com o futuro. Recomendamos que todos peguem uma cópia do repositório do WordPress e a instalem em um site de teste. Essa é a nossa oportunidade para ajudarmos a construir o editor que todos temos vindo a desejar. Podemos ter a mesma experiência de quem utiliza o Medium, mas no nosso CMS favorito! A equipe aqui na Kinsta irá sem dúvida reservar algum tempo para emitir seu feedback.
Você já experimentou o Gutenberg? Se sim, gostaríamos de ouvir seus pensamentos, sejam bons ou maus.
Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos
Oi Brian, parabéns pelo texto super completo! Já uso o Gutenberg desde que anunciaram o lançamento do editor como plugin de testes e estou adorando. Me lembrou muito um outro plugin de page building que uso, o Elementor.
Você poderia me tirar uma dúvida? Ainda não vi como alterar a cor de títulos no Gutenberg; sabe dizer se isso é possível?
Muito obrigada!
Abraços.
Oi Manuela,
obrigado pela sua mensagem!
Mudar a cor dos títulos provavelmente será algo que precisará ser feito via CSS em seu tema.
Abraços, Peter
Excelente postagem!
Porém, falando do editor em si, achei uma porcaria rs. Muito mais difícil de usar e menos amigável.. fora a usabilidade. Demorei séculos para encontrar onde adiciona imagem.
Ola Douglas,
Obrigado por seguir o nosso blog. Não esqueça que o editor ainda está em Beta e não é a versão final. Eles vão melhorar a experiência do usuário!
Abraços, Peter
Boa Tarde, pode me informar onde desabilito esse editor?!Achei muito complicado , nao gostei. Queria voltar como estava.
Olá Deby, obrigado pelo seu comentário.
Pode leer nosso artigo relacionado: https://kinsta.com/pt/blog/desabilitar-o-editor-wordpress-gutenberg/
Abraços, Peter
Bom dia
Para quem usa temas profissionais, como o The7, o que muda? ainda vou conseguir usa-lo?
Olá Marcos,
A maioria dos desenvolvedores encarregados de temas muito populares já enviaram mudanças para garantir que as coisas funcionem com Gutenberg. No entanto, recomendamos sempre que você verifique com sua equipe de suporte para confirmar!
Abraços, Peter
Olá Peter Kovacs! Confesso que me vi perdido quando comecei a usar essa versão Gutenberg! E por conta disto parei nesta incrível postagem! Aliás, já marquei como favorito! 🙂
Valmir de Souza
http://valmirdesouza.com
Obrigado, Valmir!
Excelente artigo.
Quanto ao novo editor do WordPress, é uma “bela” porcaria.
Falo com conhecimento de causa porque sou desenvolvedor.
Um abraço!
Olá! Belo artigo.
Eu estou relutando a criticar e tentando me adaptar, mas está duro!
Fiz o primeiro post no novo editor e além de demorado horas a mais agora está dando erro! Diz como publicado mas quando saio do editor o link do post dá como “página não encontrada”.
Refiz o post começando do zero e o mesmo erro! Alguém mais com essa dificuldade?
Meu blog é brunabarbieri.com.br e o meu tema é o Sela.
Olá Bruna! Você pode tentar desativar todos os seus plugins para ver se há algum conflito em algum lugar: https://kinsta.com/es/base-de-conocimiento/deshabilitar-los-plugins-de-wordpress/
Caso contrário, você ainda poderá usar o antigo Editor Clássico. Será suportado até 2021. https://kinsta.com/pt/blog/desabilitar-o-editor-wordpress-gutenberg/.
Abraços,
Peter
Oi Brian, seu artigo é excelente, mas o novo editor de texto, Gutenberg péssimo. Estou tendo muitas dificuldades, talvez seja bom, mas eu que não estou sabendo usa-lo. A barra de ferramentas do meu texto só fica em cima, preciso mudar uma fonte, por exemplo, tenho que subir todo o texto, devo estar fazendo errado. Mas o antigo, aprendi sozinha. Não consigo colocar um link na palavra, como fazia no anterior. Salva o tempo todo e as imagens somem às vezes. Vou tentar desabilita-lo, conforme o link que vc enviou a cima.
Abraços
Lidia, no começo eu tb patinei um pouco. hoje vejo que o gutenberg foi a melhor coisa que aconteceu.
Tem uns plugins excelentes que auxiliam.
Mas como eu disse, no começo tb senti dificuldades. Experimente ver alguns tutoriais… vc vai se adaptar.
lendo em janeiro de 2019 utilizo o wordpress desde 2008 e a pior atulização a nivel de usuário que fizeram foi esse editor. No meu ponto de vista vai na contra mão de tudo que se fez até hoje. Até onde for possivel mantenho editor antigo ja que tenho jornalistas que tentar explicar ele como funciona o novo editor vai ser a mesma coisa que tentar fazer usar o GNU/linux no lugar do MS windows
Olá Antonio,
Sim, o novo editor de blocos de Gutenberg definitivamente não é para todos. A ótima notícia é que o Editor Clássico será suportado até 2021. Confira como desabilitar o Editor do Gutenberg:
https://kinsta.com/pt/blog/desabilitar-o-editor-wordpress-gutenberg/
No momento em que a data chegar, deve haver muitas melhorias para Gutenberg.
Eu acredito que o novo editor veio para facilitar, porém no começo é meio complicado usar mesmo, porém é sempre bom se adaptar as mudanças. Parabéns pelo artigo!
Estamos contentes por ter gostado do artigo. Fique atento!