Um ano com Gutenberg

Publicados: 2020-01-24

Parece que foi ontem que Gutenberg se tornou parte oficial do WordPress mas, acredite ou não, já faz mais de um ano! O ano de 2019 foi sem dúvida o ano de Gutenberg no WordPress. Ame ou odeie, não vai a lugar nenhum tão cedo e, de fato, agora é um novo padrão em nosso amado CMS destinado a oferecer uma melhor experiência ao usuário.

No post de hoje gostaria de rever rapidamente tudo o que o editor de blocos do WordPress alcançou nos últimos meses. Em particular, gostaria de discutir o que o torna especial, por que algumas pessoas o amam e outras o odeiam, e o que isso significou para nós, desenvolvedores. Vamos fazer isso!

Lançamento de Gutenberg

No State of the Word de 2016, Matt disse que o editor do WordPress era uma das coisas em que deveríamos nos concentrar, pois precisava de muito trabalho para ser melhorado. Naquela época, surgiram os primeiros rumores em torno de um “editor baseado em blocos” para “unificar widgets” e “melhorar códigos de acesso”. Foi o primeiro olhar para o que se tornaria então Gutenberg?

Um ano depois, no State of the Word 2017, Matt apresentou oficialmente Gutenberg, um projeto cujo desenvolvimento já havia demorado 11 meses e ainda faltavam alguns. O projeto introduziu o conceito de “blocos” como uma solução elegante para criação e gerenciamento de conteúdo . Gutenberg ainda era muito verde para fazer parte do núcleo do WordPress, então permaneceu como um plugin por alguns meses ainda.

Finalmente, após dois anos de gestação, chegou a hora de apresentar o novo filho à sociedade e no final de 2018 Gutenberg finalmente passou a fazer parte do WordPress Core . Na minha opinião (e de muitos outros profissionais do setor), foi uma decisão precipitada – sentimos que o plugin ainda não estava pronto para o público em geral, mas, infelizmente, lá estava. A integração do Gutenberg na nova versão do WordPress foi cheia de controvérsias e muita gente odiou.

Para evitar grandes males, a equipe de desenvolvimento do WordPress também preparou um plugin paralelo para desabilitar completamente o Gutenberg e assim continuar usando o editor clássico… mas o desenvolvimento do Gutenberg não parou por aí, é claro!

Primeiros passos

Como dito acima, o lançamento oficial do Gutenberg foi um pouco difícil, especialmente porque teve muitos detratores e havia muitos detalhes a serem polidos. Definitivamente parecia uma decisão apressada. Você sabe, o WordCamp US 2018 estava chegando e “precisamos que Gutenberg já esteja nele”, e assim eles fizeram.

Seja como for, a realidade era o que era e, em janeiro de 2019, todos tínhamos esse novo editor em nosso WordPress Dashboard. Isso significou que usuários e desenvolvedores tiveram que se adaptar a essa nova realidade… e quanto antes, melhor!

Bloco Gutenberg do Google Maps.
Editando o bloco do Google Maps Bloco Gutenberg.

O principal problema que todos enfrentamos durante as primeiras semanas foi o baixo desempenho do UX. Lembro que o editor ficava completamente inutilizável se você o usasse com o Yoast, aparentemente devido a um problema com a API de anotação do Gutenberg. Os blocos se moviam de maneiras estranhas, os atalhos de teclado eram diferentes e imprevisíveis, o editor era lento em computadores mais antigos…

Mas, apesar dos erros e problemas iniciais, o ritmo frenético de desenvolvimento do plugin tornou possível o que parecia quase impossível: corrigir e melhorar rapidamente a experiência do usuário ao usar o Gutenberg. Algo que, para ser sincero com você, era muito necessário, pois o editor clássico estava bastante desatualizado:

Captura de tela do editor de postagem padrão do WordPress.
Captura de tela do editor de postagem padrão do WordPress.

Evolução

A evolução de Gutenberg durante seu primeiro ano de vida pública foi realmente incrível. As atualizações aconteceram uma após a outra e os desenvolvedores foram polindo cada detalhe do Gutenberg até se tornar uma interface mais amigável e eficiente. Ao analisar os números e, em particular, a taxa de adoção de Gutenberg, parece que estamos no caminho certo. No momento em que escrevo este post, duas em cada três instalações do WordPress estão usando a versão 5.x, o que significa que o Gutenberg está disponível nativamente para dois terços de todos os usuários do WordPress.

Mas, verdade seja dita, lembre-se que é possível desabilitar completamente o Gutenberg simplesmente instalando o plugin Classic Editor. No momento, este plug-in tem mais de 5 milhões de instalações ativas e mais de 700 classificações de cinco estrelas acompanhadas de comentários como “velho é ouro”, “plugin mais importante para se ter” ou “o plug-in que uso em todos os meus sites”. Então, é possível que Gutenberg seja um fiasco?

Evolução do número de instalações ativas do plugin Classic Editor
Evolução do número de instalações ativas do plugin Classic Editor.

Bem, na minha opinião, não. Se você observar a tendência atual de instalações ativas correspondentes ao plugin Classic Editor, verá que está diminuindo. Isso significa que, com o passar do tempo, cada vez menos pessoas usam esse plugin. Uma possível explicação para isso é o fato de que Gutenberg já é “bom o suficiente” e, portanto, não há necessidade de usar a versão mais antiga do editor. E esta é, sem dúvida, uma notícia muito boa.

Bloquear bibliotecas

Uma das consequências da integração oficial do Gutenberg no WordPress foi a proliferação de novos blocos para criar conteúdo. Claramente, os desenvolvedores identificaram um ponto problemático e decidiram melhorar a experiência geral.

Blocos que você tem disponíveis com Blocos Atômicos.
Blocos que você tem disponíveis com Blocos Atômicos.

Nos últimos meses vimos como os plugins apareceram com o único propósito de expandir a gama de blocos disponíveis para o Gutenberg. Assim, por exemplo, temos plugins como Atomic Blocks que adicionam novos blocos, assim como plugins como Stackable ou EditorsKit que incluem novos estilos e oferecem opções adicionais de edição para blocos já existentes.

Vantagens de Gutemberg

Uma das grandes críticas que sempre existiu no WordPress foi o efeito inframous lock-in. Basicamente, esse efeito descreve a dependência que aparece com determinados temas ou plugins quando você começa a usá-los. Depois de criar conteúdo com um desses projetos de bloqueio, você não poderá se livrar deles facilmente ou perderá esse conteúdo.

Editor de páginas do WordPress com a camada de edição adicionada pelo Visual Composer (agora conhecido como WPBakery Page Builder for WordPress).
Editor de páginas WordPress com a camada de edição adicionada pelo construtor de páginas «WPBakery Page Builder for WordPress».

A maioria dos exemplos desse efeito pode ser encontrada nos construtores de páginas. Quando tínhamos apenas o editor clássico do WordPress, muitos desenvolvedores de temas identificaram outra necessidade: os usuários queriam poder fazer o layout das páginas usando um editor visual que permitisse arrastar e soltar blocos de conteúdo para construir suas páginas com facilidade. Infelizmente, criar uma página com esse construtor de páginas significava que você ficaria bloqueado com esse construtor de páginas para sempre. Se você não quisesse mais usar o construtor de páginas, teria que recriar sua página primeiro ou correria o risco de perder isto.

Gutenberg foi uma revolução nesse sentido. Agora, graças à introdução oficial do conceito de “bloco”, os construtores de páginas finalmente têm ao seu alcance um mecanismo padrão para definir a aparência de uma página. Eles simplesmente precisam aproveitar as novas interfaces fornecidas pelo Gutenberg. Claro, o processo de padronização dos construtores de páginas atuais para os blocos do WordPress será lento, mas não tenho dúvidas de que isso eventualmente acontecerá.

Melhorias contínuas

O Gutenberg fica cada vez melhor a cada nova versão, pois novos recursos e várias melhorias são incluídas em cada versão. Por exemplo, há algumas semanas uma nova versão do plugin Gutenberg (7.1 já) apareceu com pequenas melhorias de usabilidade para os usuários, como um diálogo de boas-vindas para “conhecer” Gutenberg ou melhorias na seleção de conteúdo multi-bloco.

Mas há uma melhoria que eu particularmente gosto, e são os movimentos no editor. Por favor, dê uma olhada neste post de Matias Ventura onde você tem uma explicação muito detalhada de “como o movimento nos ajuda a entender a mudança”.

O que Gutenberg significou para nós (em Nélio)

A chegada de Gutenberg também trouxe novidades interessantes para nossa empresa. Essencialmente, se quiséssemos desenvolver nossos produtos e torná-los compatíveis com o Gutenberg, precisávamos reciclar e aprender uma pilha de desenvolvimento totalmente nova.

Como Toni te disse algumas semanas atrás, nos últimos dois anos nós estudamos e aprendemos React e Redux. Como resultado desta etapa de aprendizado lançamos vários plugins específicos para Gutenberg, como Nelio Maps, Nelio Translate ou Nelio Compare Images. Também dedicamos boa parte do nosso tempo e recursos para modernizar o Nelio A/B Testing, e atualmente estamos realizando a mesma tarefa com o Nelio Content.

Teste A/B do Nelio — Editor de teste
Nelio A/B Testing utilizando novas tecnologias.

Até aplicamos algumas de nossas habilidades recém-adquiridas para contribuir com o WordPress e propusemos vários pull requests:

  • Correção de bug com datas
  • Correção de bug com argumentos de consulta e fragmentos de URL em JS
  • Proposta para trabalhar com atributos Number e Boolean na Block API
  • Correção de bug com entidades HTML (não) escapadas

Ninguém gosta de mudanças. Quando você se acostuma com um conjunto de ferramentas ou tecnologias, provavelmente não quer deixá-las para trás para aprender algo novo. As pessoas estão relutantes em que as coisas mudem... mas, para ser honesto, a mudança nos serviu bem. Estamos muito orgulhosos com tudo o que aprendemos ao longo do caminho e com as coisas que podemos fazer hoje graças a Gutenberg.

E você? Você gosta de Gutemberg? Como isso mudou sua vida? Deixe-nos saber na seção de comentários abaixo.

Imagem em destaque de freestocks.org no Unsplash.