Conhecendo o Novo Editor Gutenberg do WordPress (Vantagens e Desvantagens)

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.

Plugin Gutenberg no WordPress

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 desenvolvimento ou de testes. 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.