Gutenberg: o fantástico novo editor do WordPress 5.0

Ói que chique! <3

Amanhã será um grande dia para a comunidade WordPress. Afinal, entre várias novidades que sempre costumam chegar em atualizações de grande porte, o WordPress receberá em definitivo o seu novo editor de texto padrão, chamado Gutenberg.

Caso você acompanhe minimamente o cenário do WordPress, já deve estar bem familiarizado com esse nome e com o que ele implica: trata-se do novo editor de texto que virá a partir da versão 5.0 do nosso CMS favorito. Desde o começo de seu desenvolvimento já era possível degustar essa nova experiência de edição em blocos através de um plugin provisório oferecido para fins de teste e coleta de feedback. A partir de amanhã, dia 06 de dezembro, tal plugin não será mais necessário.

Mas o que é exatamente o Gutenberg? Como funciona exatamente essa “edição em blocos” tão badalada? E como isso afetará o ecossistema e a comunidade que giram em torno do WordPress?

É tipo Lego, manja?

Sim, o texto que você está lendo foi redigido usando o Gutenberg. 😉

Se você já mexeu com plugins de construção de páginas (como o SiteOrigin, o Divi Builder ou o Elementor, por exemplo) pelo menos uma vez, então você já faz uma boa ideia de como o Gutenberg funciona. O Gutenberg é a resposta da Automattic e da comunidade de desenvolvedores a esse tipo de plugin, famoso por proporcionar uma maior produtividade para profissionais, ao mesmo tempo em que permite que usuários sem tanta intimidade com código possam produzir postagens e páginas visualmente mais atraentes.

Substituindo completamente o tradicional editor criado com base no TinyMCE, o Gutenberg traz uma nova forma de trabalhar com criação e diagramação de conteúdo no WordPress, através de seu funcionamento por blocos. Os blocos são como pecinhas de Lego que você vai montando e compondo o seu post ou página e cada bloco pode trazer diversos tipos de conteúdo diferentes.

Quase tudo que compõe um post ou página (com exceção do título) é um bloco: uma imagem, uma tabela, uma heading tag (de H1 a H6), uma lista, um vídeo incorporado, cada parágrafo de um texto… e todos esses blocos podem ser facilmente movidos, reorganizados, removidos e adicionados pelo usuário.

Adicionando novos blocos. Ao clicar no botão +, um menu com todos os blocos disponíveis é exibido.

Através das novas ferramentas oferecidas pelo Gutenberg, é possível escolher entre uma boa quantidade de blocos diferentes. Os blocos disponíveis não se limitam a reproduzir elementos textuais e permitem adicionar facilmente a um post ou página diversos elementos e funcionalidades gráficas que, no editor TinyMCE antigo, exigiriam o uso de shortcodes ou edição direta de código.

Existem blocos que inserem widgets, botões, colunas, tabelas, galerias de imagens, arquivos de áudio e vídeo, que inserem incorporação de conteúdo de diversos serviços de streaming e redes sociais (YouTube, Vimeo, Spotify, Reddit, Twitter, etc), que inserem campos para adição de shortcodes, que inserem campos para adição de texto pré-formatado e snippets de código (ideal para desenvolvedores de software que desejam criar conteúdo), separadores, quebras de página e diversos outros elementos visuais! Todos acessíveis bastando clicar no botão com símbolo de mais (+) no topo esquerdo da tela de edição de post/página.

Um excelente exemplo das possibilidades de edição do Gutenberg está neste trecho do texto que você está lendo agora: eu adicionei um bloco de coluna que divide este trecho em duas colunas verticais. Na coluna da esquerda está este parágrafo. Na coluna da direita eu adicionei um bloco de vídeo incorporado e nesse bloco coloquei o link de um vídeo do YouTube.

Assim, ó!

Obviamente, se você estiver lendo esse texto em um smartphone as colunas acima se reorganizarão responsivamente: o parágrafo em cima e o vídeo embaixo.

Ah, esta citação que você está vendo aqui também é um bloco, hehe!

Manda mais bloco que tá poko!

O PageBuilder by SiteOrigin é um exemplo de plugin construtor de páginas bastante usado por desenvolvedores WordPress. Eu mesmo o utilizo aqui no meu site.

Imagino que muitos usuários de WordPress, acostumados com os atuais plugins de construção de páginas/page building (como os que eu exemplifiquei no começo deste texto) estão achando poucas as opções de blocos disponíveis no estado atual do novo editor.

Entretanto, há boas razões para acreditar que não precisaremos nos preocupar com esse problema por muito tempo, já que a Automattic e a comunidade WordPress pensaram nessa possibilidade e implementaram uma forma excelente de permitir que criemos os nossos próprios blocos através da novíssima API de Blocos do Gutenberg! Com essa nova API, desenvolvedores, empresas e organizações poderão escrever código – na forma de plugins – para a criação de novos blocos e assim integrá-los a qualquer instalação do WordPress.

Isso abre um grande leque de possibilidades, permitindo que os desenvolvedores usem sua criatividade para criar novos e interessantes blocos do Gutenberg, permitindo a criação de layouts de página mais arrojados e atraentes para os visitantes. Criadores de plugins tradicionais – que funcionavam somente com o editor antigo – poderão atualizar seu código para tornar suas criações compatíveis com o Gutenberg, tornando a integração com o WordPress ainda mais eficiente e aumentando a variedade de blocos disponíveis.

Sem contar que haverá uma grande chance de o Gutenberg e sua API de blocos promoverem uma padronização no desenvolvimento, o que possivelmente elevará a qualidade do código escrito para o WordPress (imagine que nunca mais você passará raiva com aquele monte de JavaScript do Divi Builder demorando pra carregar e travando o seu navegador!).

Seu site está pronto para o Gutenberg?

Obviamente o Gutenberg é um recurso novo e ainda bem verde. Apesar de essa novidade ter muito potencial, é certo que ele ainda receberá vários ajustes, correções e novas funcionalidades ao longo de sua existência, principalmente nos primeiros meses após seu lançamento.

A situação pode ser ligeiramente mais agravante se considerarmos instalações do WordPress com temas criados por terceiros – como este blog, por exemplo (cujo tema eu mesmo criei do zero). Como o Gutenberg possui seu próprio conjunto de código em HTML, CSS e JavaScript por baixo dos panos, testes de compatibilidade serão altamente necessários, especialmente considerando que o Gutenberg será o novo editor padrão a partir do WordPress 5.0. Então, se você ainda não fez os testes de compatibilidade necessários para seu site em WordPress rodar redondinho com o Gutenberg, aí vão algumas dicas para que a transição não lhe seja tão traumática.

Eu sempre fiz questão de incentivar a ativação das atualizações automáticas no WordPress, mas dessa vez eu farei uma exceção: se você ainda não teve chance de testar o Gutenberg em seu site, não atualize para o WordPress 5.0 logo de cara. Se você ativou as atualizações automáticas em sua instalação do WordPress, desative-as temporariamente. Isso lhe dará tempo para fazer todos os testes necessários, como verificar a compatibilidade com plugins, testar como os blocos são renderizados em seu tema e outras possibilidades.

Quando você terminar os testes e tiver certeza que o Gutenberg funcionará direitinho em seu site, aí sim reative as atualizações automáticas ou atualize manualmente o WordPress, seu tema e seus plugins para as respectivas últimas versões.

“É hoje que eu só durmo amanhã ajeitando esses sites pro WordPress 5.0”, disse Johannes Gutenberg às 3 da madrugada. 😛

Também há a possibilidade de você estar lendo esse texto tarde demais e já ter atualizado o WordPress para a versão 5.0, e dessa forma talvez as coisas não tenham saído muito bem… 🙁

Se este for o seu caso, felizmente a comunidade do WordPress também oferece uma saída para você, na forma do plugin Editor Clássico, que faz com que o editor antigo baseado no TinyMCE substitua o Gutenberg. Com a instalação deste plugin seu código legado deverá voltar a funcionar, dando-lhe tempo para fazer as atualizações necessárias.

E é claro que o plugin Editor Clássico também será útil para quem ainda está rodando versões 4.X do WordPress, permitindo uma transição mais suave do editor clássico para a nova forma de edição em blocos.

E se eu não gostar do Gutenberg de jeito nenhum?

Um exemplo de um texto antigo deste blog, originalmente escrito com o editor baseado no TinyMCE e aberto para edição usando o Gutenberg.

Bom, antes de mais nada, é necessário lembrar que o Gutenberg será o editor padrão do WordPress a partir da versão 5.0 – que será lançada nesta quinta-feira, dia 06 de dezembro. Então se você realmente quer se manter usando o editor baseado no TinyMCE, o único jeito será instalando o plugin Editor Clássico.

Além disso, também é necessário levar em conta que o conteúdo de posts e páginas feitos com o editor antigo podem ser facilmente convertidos para o estilo de edição de blocos do Gutenberg mas o contrário não será possível. Isso acontece por causa da estrutura de código HTML e CSS que o Gutenberg usa para construir o conteúdo, que não está presente no editor antigo.

Em meus testes, eu abri normalmente um texto antigo aqui do blog usando o Gutenberg e o novo editor inseriu automaticamente o conteúdo do post em um bloco específico com o editor clássico dentro (!). Ao salvar uma cópia desse post, ele se manteve com o visual normal, mas ao tentar revertê-lo novamente para o editor clássico, o visual do post ficou todo quebrado.

Lembre-se disso quando estiver trabalhando na transição do seu site para o WordPress 5.0 e encare os fatos: o TinyMCE é o legado e o Gutenberg é o presente e o futuro do WordPress. Quem não conseguir se adaptar a essa nova realidade, certamente ficará para trás.

Em breve, no meu livro de WordPress (ou: casa de ferreiro, espeto de pau)

Confesso que, por estar bastante ocupado com diversos outros compromissos pessoais e profissionais, eu também não tive chance de me preparar adequadamente para a chegada do Gutenberg. Por esta razão ainda vai demorar um bom tempo até que eu lance uma atualização para o livro WordPress: de blogs pessoais a grandes portais abordando esse novo editor e seu funcionamento.

Entretanto, se você comprou ou pretende comprar o meu livro (disponível aqui no meu blog ou lá na Amazon por apenas R$34,90), não precisa se preocupar, pois ele não ficará desatualizado por muito tempo (assim espero). Em breve eu lançarei um novo capítulo no livro dedicado somente ao Gutenberg, bem como reescreverei todos os trechos necessários do livro que atualmente abordem o editor clássico em TinyMCE, atualizando o conteúdo de acordo com o WordPress 5.0.

Antecipadamente agradeço pela paciência. Enquanto aguardam a atualização do livro, indico a seguir algumas leituras bem bacanas para se informar mais e melhor sobre o Gutenberg:

Carrinho de compras