Gutenberg sem mistério

Se você ainda não está familiarizado, o Gutenberg apareceu junto (oficialmente) com a versão 5.0 do WordPress. Ele nada mais é do que um editor de conteúdo, baseado em blocos.

Foi criado para facilitar não somente a edição de conteúdos, permitindo layouts mais fáceis, simplificados, responsivos, modulares, como também facilitar também a própria criação dos blocos que podem ser utilizados no Gutenberg.

Lembrando que se você quer motivos para começar a utilizar o Gutenberg, posso citar de imediato, é muito fácil, vai facilitar a inserção de diversos tipos de conteúdos em seus posts e páginas, é realmente WYSIWYG (what you see is what you get), é o futuro, não tem volta!

Embora possamos dizer que tenha sido uma visão do Matt (criador do WordPress), a equipe trabalhou muito desde janeiro de 2017 para entregar o Gutenberg para a comunidade.

4.1 – O que é o Gutenberg?

Seguindo a linha de sites e editores que já existem (via recursos como plugins), o Gutenberg permite que você crie posts e páginas de maneira facilitada.

Isso se dá sem necessidade de se saber programar ou de se utilizar os famigerados códigos que eventualmente acrescentavam recursos em temas mais sofisticados, que quando alterados, perdiam função e deixavam muito lixo inserido em seu conteúdo.

A facilidade em fazer a edição, sem justamente precisar de códigos ou personalizações específicas, é uma das grandes revoluções do Gutenberg.

Você pode escrever seus textos no Google Docs ou no Microsoft Word, copiar e colar sem medo, o Gutenberg converterá para blocos, na maioria das vezes com muito sucesso.

Eu confesso que quando comecei a me inteirar do assunto, mais de um ano atrás, testando versões não finalizadas, pensei que seria um problema, e teríamos muitos sites com layouts quebrados uma vez que ele virasse padrão.

E eu estava muito errado, não tenho vergonha de dizer!

4.2 – Como funciona?

Como falei antes, os blocos são a base de tudo. Parágrafos, listas, imagens, citações, formatação, widgets, são blocos, ou funcionam como blocos.

E você pode organizar, mover, criar um bloco de colunas e mover outros para dentro, é muito versátil.

Se você estava com medo de começar a utilizar, não tenha, comece hoje mesmo. Aliás, já deveria estar testando.

Você pode movimentar blocos para cima e para baixo facilmente, arrastando e soltando, utilizando as setas na esquerda, isso lhe dá grande facilidade na editoração do seu documento.

Claro que é prudente verificar se o seu tema é compatível com o Gutenberg, provavelmente (se ele não for antigo e estiver atualizado nos últimos 6 meses) ele seja e você não terá problemas.

Você pode selecionar e apagar facilmente os blocos!

4.3 – O que mudou?

Você passa a utilizar, criar, editar e reorganizar tudo desta forma. Alguns blocos suportam recursos multimídia como vídeos, links externos, e outros são criados a partir de plugins com recursos adicionais.

Então você poderá acrescentar novos blocos sempre que necessário.

Importante lembrar que código e conteúdo são completamente separados. A atualização do código em um bloco não implicará em atualização no conteúdo que ele carrega necessariamente.

Além disso os blocos em sua maioria são reutilizáveis. E quando um for atualizado, todas as suas ocorrências também serão atualizadas. Muito útil para blocos de conteúdos que você precise duplicar, como formulário de opt-in por exemplo.

Você terá uma opção de “Adicionar” aos blocos reutilizáveis ao selecionar o botão Opções em qualquer menu de bloqueio, no canto superior esquerdo do seu bloco.

Os títulos (H1 até H6) também são facilmente selecionáveis. Os blocos de parágrafo também. As listas embora eu tenha achado um pouco confuso no início, são facilmente acessíveis.

Eu arrisco dizer que a partir do segundo ou terceiro post utilizando o Gutenberg você já estará muito afiado!

Dá para inserir CSS personalizado mais facilmente também, existe um campo específico para este fim se você quiser estender alguma coisa.

Existe ainda um contador de palavras, blocos, cabeçalhos, você pode verificar a qualquer tempo clicando na bolinha do ( i ) que aparece a direita dos blocos.

Também é muito fácil inserir botões, bonitos e agradáveis, e facilmente personalizáveis. Tudo isso lhe dá mais poder de edição de conteúdo e de criar suas Chamadas para ação (CTA – Call to action) sempre que necessário.

4.4 – Seus posts antigos

Eu converti desde então mais de 500 páginas e posts, em diversos tipos de sites e blogs, com dezenas de temas distintos, gratuitos, comerciais e personalizados, e só tive um único problema em converter uma postagem antiga para o Gutenberg.

Você não precisa converter tudo imediatamente, vá fazendo isso aos poucos, conforme precise editar.

Para converter é simplesmente editar um post e uma página, vai aparecer um bloco identificado como Editor Clássico, então ao clicar sobre ele, no canto direito (3 pontos), você vai abrir um menu, e a segunda opção será: Converter para blocos. E ao clicar sobre ela, foi, tudo convertido.

A única vez que tive problemas foi em uma página que continha tabelas, com HTML feito à mão. Retirei o código, converti, inseri novamente e tudo ficou bonito novamente.

Lembrando que você pode testar, visualizar ou sair sem salvar a página ou post se tiver verificado algum problema de formatação, ainda, mesmo que tenha salvado, pode voltar à versão anterior.

Se você está pensando em converter centenas de páginas e posts, até o momento que eu escrevia isso aqui, não existia um meio automatizado para tal tarefa.

4.5 – Plugins para o Gutenberg

Se quiser estender ou aprimorar o Gutenberg (e é claro seu site e blog), recomendo que dê uma olhada nos links no final do curso:

Atomic Blocks
Cloud Blocks
Editor Blocks
CoBlocks
Advanced Gutenberg Blocks
Advanced Gutenberg
Bokez
Kadence Blocks
Gutenberg Blocks
Stackable
Gutenberg Blocks Templates
Google Maps Gutenberg Block

Você tem diversas opções para adicionar aos blocos padrão, depoimentos, equipe, tabela de preços, grid de posts e por aí vai.

Lembre-se que se utilizar plugins de terceiros, precisará que eles sempre estejam ativos para não perder as funcionalidades.

Então teste antes, e não instale todos ao mesmo tempo!

4.6 – Widgets

Existem alguns widgets básicos com o Gutenberg. Você poderá adicionar arquivos, categorias, últimas postagens e últimos comentários em qualquer lugar da sua página ou post.

4.7 – Temas otimizados para Gutenberg

Uma grande parcela dos temas disponíveis recebeu atualizações nos últimos 6 meses, que os deixaram compatíveis com o Gutenberg.

Se você não atualizou o seu tema neste período, melhor dar uma olhada mais a fundo.

Para ter certeza observe se seu tema (e plugins relacionados) estão oferecendo suporte a versão 5.0 do WordPress. Isso é o primeiro indicativo.

Se o tema for gratuito, e estiver no repositório oficial, então ele terá um rótulo “Testado com” informando se foi testado com a versão mais atual do WordPress.

Se estiver procurando temas gratuitos para testar, verifique estes, links no final do curso:

Tema da Atomic Blocks
Tema da Editor Blocks
Tema da CoBlocks
York Lite
Mission News
Lovecraft
Zakra

4.8 – Lugares legais para olhar

Se quiser se aprofundar mais no Gutenberg, sugiro alguns links para você, são sites, hubs e informações atualizadas:

4.9 – Dicas sobre o Gutenberg

O Gutenberg não altera o funcionamento do WordPress. Ele altera a maneira como criamos conteúdos. Em vez de utilizar aquele limitado editor, agora temos os blocos. Se você encher o seu WordPress de plugins para o Gutenberg, provavelmente terá problemas de performance.

A metáfora é simples. Um título é um bloco, um parágrafo é um bloco, uma imagem é um bloco, um vídeo é um bloco. Você pode também olhar o código fonte e alterar alguma coisa por lá.

Existem também teclas de atalho que deixarão mais ágil a utilização do Gutenberg. Outros plugins, que precisam acessar o conteúdo de páginas e posts, como o Yoast SEO, já dão suporte ao Gutenberg.

Se você arrastar uma imagem da sua área de trabalho para o Gutenberg, ele irá inserir a imagem dentro do conteúdo, já carregando a mesma para a biblioteca de mídia do WordPress.

Utilize colunas para sofisticar a exibição dos seus conteúdos. Não recomendo que você desative o Gutenberg, mas caso precise, existe um plugin chamado Classic Editor, para este fim.

Se precisar utilizar shortcodes personalizados, utilize o bloco específico para este fim no Gutenberg. E sempre dá para visualizar o que está sendo feito, muito prático isso!

4.10 – Futuro do Gutenberg

Ah então o Gutenberg é um construtor de páginas?

Não, ainda não, mas será. Em breve vai editar como os melhores page builders do mercado, ainda, terá opções para cabeçalhos e rodapés, quem sabe sem pesar muito nossos sites.

Ainda não podemos dizer que o Gutenberg se compara com um Divi, Visual Composer ou um Beaver Builder, mas quem sabe chegaremos lá ainda em 2019!

Embora seja fácil reorganizar posts e páginas de um site ou blog pequeno, no caso de um site ou blog grande, o trabalho pode não valer a pena, ou você poderá precisar de um bom tempo para que isso ocorra.

Você precisa avaliar se é válida a conversão ou simplesmente iniciar a partir de um ponto, mantendo o legado e atualizando conforme a demanda.

Vamos acompanhar.

4.11 – Como ajudar

Participe das comunidades, informe problemas se identificar algum, isso vai ajudar a todos. Olhe neste link.

Se quiser verificar uma auditoria externa feita no Gutenberg, siga este link. Existem problemas? Certamente, mas somente com apoio da comunidade vamos solucionar a maior parte deles.

Participe de grupos de discussão específicos nos fóruns apropriados. E é claro, comece a utilizar o Gutenberg hoje mesmo!