Dependendo de quanto você se liga ou não nas novidades da comunidade WordPress, você deve saber que uma grande novidade está vindo por aí, marcando definitivamente o lançamento da versão 5.0 do CMS. A novidade se chama Gutenberg e é o novo editor do WordPress, que substituirá aos poucos o editor antigo, baseado no TinyMCE.
O Gutenberg mal chegou e já vem causando um rebuliço entre os amantes do WordPress. No momento em que escrevo este artigo, ele está somente disponível como plugin no repositório, mas a avaliação dos usuários é deprimente, o que demonstra que muita água ainda vai rolar até que o editor esteja maduro o bastante para que a versão 5.0 entre em cena.
Ficaremos de fora dessa polêmica por enquanto e vamos apresentar um guia básico de funcionamento do editor. Este guia será de grande ajuda, principalmente para você que ficou surpreso com o título deste post e nem sabia que o WordPress teria um editor novo. O objetivo não é explicar pormenores do funcionamento de cada bloco do Gutenberg, mas mostrar uma espécie de framework para que você possa entender o editor como um todo.
Acredito que somente a experiência e o seu contato direto com o editor vai revelar os pormenores de funcionamento de cada elemento. Então, vamos lá!
Você Está Pronto Para o Gutenberg?
Em poucas palavras, o Gutenberg é o substituto do editor atual do WordPress, baseado no TinyMCE. A equipe do WordPress resolveu que já era hora de renovar o layout, já que o editor TinyMCE esteve por trás da criação de conteúdo dentro das páginas, posts e tipos de posts customizados no CMS por longos anos.
De certa forma, o editor Gutenberg trará uma experiência um pouco parecida com aquela de construtores de páginas como Divi Builder, Visual Composer, Elementor etc.
Mas o Gutenberg não é necessariamente um construtor de páginas (page builder), pelo menos não agora nos seus dias iniciais. Ainda faltam características essenciais a ele, como um suporte a colunas mais flexível e um real suporte a arrasta e solta mais avançado do que o existente.
Enquanto esses novos dias não chegam (se é que chegarão), vamos mostrar um pouco do layout e das funcionalidades do novo editor.
Instalação do Gutenberg
Caso você não seja um visitante do futuro e ainda não teve o privilégio de usar a versão 5.0 do WordPress, o Gutenberg estará disponível para você apenas na forma de plugin. Você pode instalá-lo normalmente acessando o repositório de plugins do WordPress.
Aconselho fortemente que você faça um backup do seu site antes de ativar o plugin e que ainda não o use num site em produção. O melhor cenário é que você teste o plugin inicialmente no seu servidor local, pois ainda existem algumas incompatibilidades com page builders e outros recursos do WordPress, como tipos de posts customizados.
Você pode usar o Gutenberg com os temas nativos do WordPress, ou pode escolher entre alguns temas que já estão prontos para o Gutenberg. Um dos que eu recomendo é o Atomic Blocks, que é gratuito.
Se você é desenvolvedor de temas, também pode estar interessado em adaptar o seu próprio tema para funcionar com o editor. Eu escrevi um artigo bastante interessante chamado “Como Deixar o Seu Tema Pronto Para o Gutenberg“, explicando o básico do que você vai precisar fazer. Também há uma sequência de vídeos que complementam o artigo, cujo link você pode ver no mesmo artigo.
Blocos: a base de tudo
A base de todo o layout do Gutenberg são os chamados blocos. Basicamente a área de edição virou um verdadeiro LEGO, cujas pecinhas são os diferentes blocos que você pode incluir, reposicionar, reutilizar, duplicar e remover. Isso permite que você crie designs mais complexos para o seu conteúdo, o que antes só era possível usando shortcodes.
A implementação padrão do Gutenberg já vem com diversos blocos nativos, como parágrafos, cabeçalhos, imagens de capas, galerias, códigos incorporados, widgets. Sem contar com outros blocos que surgirão no futuro, registrados por plugins.
Você pode testar a versatilidade desses blocos nas páginas e posts que já existem na sua instalação do WordPress, ou abrir a página de demonstração acessando o menu Gutenberg, opção “Demo”.
Um tour pelo layout do Gutenberg
A imagem abaixo mostra a interface básica do novo editor Gutenberg. Essa interface é a mesma para posts e páginas.
- O chamado adicionador (inserter) serve para você adicionar blocos. Você tem dois deles. Um na barra do topo do editor e outro no meio do conteúdo. Passando o mouse por sobre um bloco já adicionado, revela também o adicionador.
- Setas de desfazer/refazer ações.
- Ícone de informações sobre o documento. Aqui você poderá ver uma estatística do documento, como número de palavras, parágrafos etc, e também a estrutura semântica dele.
- Botões de Visualizar/Publicar. Você pode escolher entre ver somente uma prévia das alterações correntes e publicar o documento em definitivo. Os rascunhos são salvos automaticamente em segundo plano.
- Mostra/esconde a caixa de inspeção do documento e do bloco.
- Menu Mais. Permite outras ações mais avançadas como alternar entre o editor visual e de código e outras ferramentas.
- Inspetor do documento. Apresenta várias opções relativas ao documento em edição, como informações de status/visibilidade, categorias, tags, imagem destacada, resumo e discussão.
- Inspetor do bloco. Varia de acordo com o bloco selecionado, trazendo opções avançadas de customização para cada um.
Adicionando nossos primeiros blocos
Como mencionado acima, você pode adicionar blocos através do adicionador.
Ao clicar no botão + você terá acesso a todos os blocos. Eles estão organizados por categorias. Você pode procurar o bloco desejado navegando pelas categorias, ou usar a caixa de pesquisa acima do menu.
Existe ainda um atalho que facilita a inserção de qualquer bloco. Basta você escolher o adicionador que está no corpo do documento (não o do topo), escrever uma barra / e digitar o nome do bloco desejado. Por exemplo /galeria mostra o bloco de galeria de imagens.
Você também pode escolher um bloco recentemente utilizado clicando nos ícones do lado direito da caixa do adicionador.
Ações relativas aos blocos
Como já mencionado, é possível executar diversas ações relativas aos blocos. Essas ações variam de bloco para bloco. Abaixo vou tentar exemplificar o máximo possível essas ações.
Movendo blocos
Atualmente existem duas formas de reposicionar blocos. Você optar entre clicar nas setinhas que existem do lado esquerdo de cada bloco, movimentando-o para cima ou para baixo em relação aos blocos vizinhos, ou arrastar o bloco para a posição desejada.
Para arrastar, você deve posicionar o mouse na extremidade direita ou esquerda do bloco até que o ícone da mão apareça, segurar e soltar para o local desejado. Realmente bastante simples.
Formatando blocos
Clicando no bloco revela a barra de ferramentas do bloco. O conteúdo dessa barra varia de acordo com o bloco selecionado. Um bloco de parágrafo apresentará os controles de formatação de alinhamento e estilo, enquanto que um bloco de lista mostrará controles relacionados ao tipo da lista, recuos etc.
Clicar sobre o bloco também revela o inspetor do bloco na barra lateral do lado direito. Ali você verá configurações mais avançadas relativas ao bloco específico.
Por exemplo, o bloco de parágrafo permitirá configurações mais avançadas do texto e de cores, enquanto que o bloco de galeria permitirá configurar a quantidade de colunas e o tipo de corte das imagens da galeria.
Mais ações relativas ao bloco
É possível também executar ações como duplicar e remover blocos. Para isso, basta clicar no pequeno menu do lado direito do bloco. Esse menu é o mesmo para todos os blocos.
Uma das ações mais interessantes, e que começa a colocar o Gutenberg na trilha dos construtores de páginas mais versáteis, é a que permite criar blocos reutilizáveis. Esta ação está presente também no menu de ações. Para usá-la, basta que você crie um bloco base com a formatação desejada, vá até o menu de ações e escolha “Adicionar aos blocos reutilizáveis”.
Vamos supor que você queira criar um botão cujo estilo deve ser o mesmo para todas as suas páginas. Bastaria você configurar o botão base, escrevendo o texto, informando o link, e definindo as cores de fundo e de texto e dando um nome para o seu bloco. Para reutilizar a mesma base para um segundo botão, você apenas terá o trabalho de ir até o adicionador e escolher o seu botão base na categoria “Reutilizável”, ou digitar uma barra e em seguida o nome do seu botão.
Opções avançadas de conversão de conteúdo
Caso você tenha um conteúdo já existente no seu site, você ficará contente ao abri-lo e descobrir que o Gutenberg converteu ele quase todo em blocos. Os demais conteúdos não convertidos serão transformados num bloco chamado “Clássico”. Você pode converter o bloco “Clássico”, que normalmente terá apenas texto, para blocos do tipo parágrafo acessando o menu de ações, do lado direito do bloco, e clicando em “Converter para Blocos”.
Basicamente o bloco “Clássico” é uma mini versão do editor TinyMCE, com os botões tradicionais de formatação de texto.
Outra funcionalidade muito interessante é a que permite converter um bloco em outro tipo. Isso não está disponível para todos os blocos, mas quando estiver você verá a opção disponível como o primeiro botão da barra de ferramentas do bloco.
Por exemplo, clicar num bloco de galeria mostrará o ícone abaixo. Ao clicar nele, você verá que é possível converter a galeria em diversas imagens individuais. Já clicar num bloco de citação permite trocá-lo para parágrafo, lista, título, ou mudar o estilo do bloco.
Conclusão
Como você percebeu, o Gutenberg é uma ferramenta poderosa que realmente veio para ficar. Ele traz uma nova vida e nova cara para o WordPress, ressignificando sua tarefa como o CMS mais utilizado no mundo.
Como tudo que é novo, ele trará algumas dores de cabeça para todo mundo, mas o objetivo é melhorar e facilitar a produção de conteúdo cada vez mais rico. A grande vantagem de tudo isso é que o CMS pode cair ainda mais no gosto de usuários comuns, trazendo mais adeptos e fazendo o sistema crescer ainda mais. O que redunda em mais oportunidades para quem se dedica a criação de temas personalizados também.
Se você quer aprender como criar temas personalizados, indo além do que o WordPress pode oferecer ao usuário comum, convido você a conhecer o meu curso sobre desenvolvimento de temas. Inscreva-se ainda hoje e tenha acesso a um desconto de amigo!
Não se esqueça de compartilhar este artigo e deixar o seu comentário abaixo. Deixe-nos saber o que você está achando do novo editor do WordPress.
Um excelente conteúdo! Sinceramente no começo não gostei muito do novo editor, mas quando comecei a usar vi que o mesmo mais ajuda do que atrapalha. Já estou colocando a mão na massa com o novo editor.
Parabéns pelo conteúdo, muito bom mesmo.
Puxa, Paulo! Que bom que gostou do conteúdo. Fico contente!
Marcelo ola
não consigo resolver um problema
no editor gutenberg adiciono novo posto insiro a imagem
quando vou para o site o texto está lá mas a foto não
Oi Alzira. Tem como você me mostrar alguma imagem do problema? Só com a descrição que você fez fica difícil ter uma ideia do que pode ser.