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.