O Gutenberg vai mudar a forma como utilizamos o WordPress

Você deve ter percebido que no painel administrativo do WordPress há um convite para utilizar o Gutemberg, o novo editor visual da plataforma. Nós avaliamos a nova ferramenta para ajudar você a se decidir se deve usar ou não. Mas você sabe o que é um editor visual?

Qual o problema do editor clássico do WordPress?

Um editor visual é uma ferramenta imprescindível na publicação de artigos, pois dispensa o conhecimento avançado em HTML para formatação de texto e adição de funcionalidades no ambiente digital. O WordPress possui um editor clássico que muitos já estão habituados.

(Editor clássico WordPress)

Quando o WordPress foi criado, ele buscava trazer a mesma experiência de editar documentos em jornais e revistas para a WEB, aproveitando muitos dos conceitos de UX vindos de aplicações desktop. Porém a internet evoluiu, e surgiram novas plataformas e formas de gerar e gerenciar conteúdo, assim o editor foi naturalmente ficando obsoleto. Entre os vários problemas que o editor clássico possui, pode-se elencar os mais evidentes:

1. Falta de integração com os temas

Ao editar um artigo, você não consegue de fato saber como ele ficará no front-end, até que o visualize ou o publique. Esse é um grave problema de UX, pois deixa o usuário distante da formatação do texto, exigindo idas e vindas ao painel de administração para a modificação e o teste do conteúdo.

Além disso, para conseguir entregar várias funcionalidades que os temas trazem - a fim de deixar o seu site mais atrativo - fazia-se necessário o uso de certas “artimanhas”. O uso dos conhecidos shortcodes que adicionavam mais uma camada de complexidade, que literalmente inseria um código no conteúdo do seu artigo, distanciando mais ainda o usuário da renderização desse conteúdo.

Alguns temas evoluíram ao ponto de criarem os seus próprios editores, os famosos builders que incorporaram certas facilidades e algum tipo de visualização da estrutura do conteúdo enquanto se editava o artigo.

(Plugin Visual Composer)

Contudo, o uso dos builders trazem outros problemas como por exemplo o fato de tornar o site mais lento, e reduzir a performance de SEO por serem pouco toleráveis a erros, pois um simples erro de sintaxe pode quebrar a renderização de uma página inteira.

2. Pouco modular e extensível

O editor clássico é baseado em um projeto opensource chamado TinyMCE, que apesar de bastante conhecido e largamente utilizado em vários projetos, não tem como objetivo ir além da formatação dos artigos. Então as opções para extendê-lo e criar funcionalidades robustas eram bem limitadas.

O WordPress precisava de uma nova ferramenta que permitisse evoluir em direção a uma arquitetura modular que tivesse como objetivo a criação de componentes de interface para WEB. Foi então que surgiu o Gutenberg.

Como será essa nova experiência do usuário?

O nome Gutenberg faz referência às antigas prensas móveis criadas por Johannes Gutenberg, ferramenta chave para o surgimento da imprensa no século XV. A referência vale para explicar o que o Gutenberg faz uso de um mecanismo bem semelhante para a construção de artigos ao utilizar blocos de impressão.

O novo editor incorpora uma interface remodelada, novas funcionalidades e extensões que permitem a inserção e formação de conteúdos de forma rica, como nunca visto antes na plataforma.

Para quem publica e edita artigos, a interface remodelada traz várias melhorias de UX, como uma sidebar que centraliza as informações para configurar as propriedades dos blocos, e uma toolbar com atalhos, contextualizada para o bloco selecionado.

Além disso, o Gutenberg renderiza os componentes da mesma forma que eles são exibidos no frontend do site, tornando a formatação e customização dos blocos muito mais intuitiva.

O que muda para quem desenvolve?

O conceito é bem simples, no final da renderização de um post tudo é HTML a fim de mantermos o site otimizado para o SEO. O WordPress se encarrega de imprimir o HTML de cada bloco no servidor, com um adendo de vários comentários, descrevendo o comportamento do componente quando o Javascript estiver disponível, que são adicionados na saída da página.

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /→ Esses comentários são então interpretados pelo Gutenberg para recriar a mesma experiência rica do componente, que você teve no editor visual. Também os plugins já podem explorar todo o potencial do editor do Gutenberg, através da Block API.

Quais são os próximos passos do projeto?

Muito ainda há de ser feito, o estágio atual do projeto é conseguir o máximo de engajamento da comunidade e dos usuários, resolver todos os bugs e tornar a API muito estável, integrar-se com outras ferramentas e expandir o Gutenberg para uma customização completa do site e não apenas dos posts.

Depois disso, o planejamento segue para o foco no editor mobile. Recomenda-se que a adoção dessa ferramenta siga no mesmo princípio de desenvolvimento do próprio Gutenberg, uma implantação gradual, conforme os plugins e temas se tornem mais compatíveis com o editor.

e você é um entusiasta, comece a se ambientar com as novas ferramentas, experimentando em algumas seções do site.

Se você é um desenvolvedor, procure desenvolver alguns plugins na plataforma, para entender melhor como funciona, a fim de estar preparado para quando a adoção for universal.

E você, já conhecia o novo editor Gutenberg do WordPress? Conta para a gente nos comentários!