Análise Aprofundada do Gutenberg, o Editor do WordPress

Quando o editor de blocos do WordPress, ou Gutenberg, foi lançado em dezembro de 2018, não sabíamos o que esperar. Claro, tínhamos muito tempo para brincar com sua versão beta, mas não podíamos prever o quão tranquilo seria o lançamento real ou o quão ansiosos os usuários e desenvolvedores abraçariam o novo editor.

Temos visto o editor do Gutenberg sofrer um tremendo crescimento nos mais de dois anos desde que publicamos este artigo pela primeira vez. Ele passou de um lançamento de produto mínimo viável (MVP) para um projeto mais maduro que está se aproximando do objetivo de criar uma experiência unificada de Full Site Editing (Edição completa do site) para WordPress.

Para explicar estas mudanças, revisitamos o editor Gutenberg para levá-lo através do seu novo rosto, inclusive para onde ele irá em breve.

O que é o editor de blocos Gutenberg?

Gutenberg, alternativamente conhecido como o “editor de blocos WordPress” ou apenas o “editor WordPress”, é o editor de conteúdo WordPress introduzido no WordPress 5.0, lançado em 6 de dezembro de 2018.

Se você ainda não ouviu esse termo, é o editor padrão que todos os sites WordPress usam, a menos que você o tenha especificamente desativado. É algo parecido com isto:

A grande diferença entre o editor Gutenberg WordPress e o editor WordPress anterior (agora chamado de “editor clássico” ou “editor TinyMCE”) é uma nova abordagem baseada em blocos para a criação de conteúdo.

Com Gutenberg, cada elemento do seu conteúdo é um bloco, o que torna fácil a manipulação do conteúdo. Cada parágrafo é um bloco, cada imagem é um bloco, cada botão é um bloco – você percebe a idéia!

Os desenvolvedores terceirizados também podem criar blocos personalizados, o que está ajudando a encerrar o caso do WordPress com atalhos. Digamos que você queira incorporar um formulário de contato. Em vez de precisar adicionar um código de atalho (por exemplo, “seu código de forma”) como você fazia no passado, agora você pode simplesmente inserir o bloco do plugin do seu formulário.

Além disso, você também pode usar blocos para criar layouts mais complexos, por exemplo, para montar um projeto multicoluna ou agrupar blocos para criar uma seção coerente.

À medida que nos aprofundamos em mostrar como usar o editor de blocos, você terá uma idéia melhor de como você pode usar os blocos para melhorar a forma como você cria conteúdo.

Gutenberg não é apenas um editor de conteúdo

Uma coisa importante a entender é que o projeto Gutenberg visa ser mais do que apenas um editor de conteúdo.

Em julho de 2021, Gutenberg ainda é apenas um editor de conteúdo (na sua maioria). Mas o objetivo a longo prazo para Gutenberg é movê-lo para algo chamado Full Site Editing (Edição completa do site).

A idéia com o Full Site Editing é que você poderá projetar 100% do seu site usando o editor Gutenberg. Por exemplo, em vez de ficar limitado às opções de cabeçalho que vêm com seu tema WordPress, você poderá usar o Gutenberg para projetar cabeçalhos personalizados usando o editor de blocos.

Este tipo de funcionalidade ainda não está disponível, mas está a caminho, e temos alguns projetos de “prova de conceito” que lhe daremos uma olhada quase no final deste artigo.

Prós e contras de Gutenberg vs alternativas populares

Agora que podemos usar o editor de blocos do WordPress há mais de dois anos, temos uma boa idéia de alguns dos prós e contras do Gutenberg em relação a outras soluções.

Existem duas alternativas principais que você tem para criar conteúdo no WordPress:

• Editor WordPress TinyMCE: Este é o editor clássico que o WordPress usava antes do WordPress 5.0.
• Plugins de construção de páginas: Estes são plugins de terceiros que adicionam design visual de arrastar e soltar ao WordPress.

Em geral, o editor clássico TinyMCE oferece uma experiência mais despojada do tipo processador de texto, enquanto os construtores de páginas oferecem uma experiência visual muito mais flexível, com design de arrastar e soltar.

Se estivéssemos encomendando os três editores com base em sua flexibilidade de projeto, seria algo parecido com isto:

Editor TinyMCE clássico (menos flexível) < Gutenberg < Construtores de páginas (mais flexível)

Agora, vamos falar sobre alguns dos prós e contras do editor do bloco Gutenberg em relação às alternativas.

Gutenberg vs editor clássico: Prós e contras

Vamos primeiro comparar Gutenberg com o editor clássico TinyMCE.

Prós:

• Gutenberg oferece um fundo de design mais visual
• Você não precisa usar atalhos para incorporar conteúdo – você obtém um sistema de bloco unificado

Contras:

• Algumas pessoas acham que escrever no Gutenberg é um pouco desajeitado porque cada parágrafo é um bloco separado. Para mensagens longas, pode ser difícil manipular o texto. Você pode preferir escrever em outro editor e colar o texto no  Gutenberg quando terminar.
• Embora o desempenho do Gutenberg tenha melhorado significativamente, ele ainda pode ficar para trás em artigos massivos, o que é menos provável que aconteça com o editor clássico.

Se você acha que o editor TinyMCE clássico se ajusta melhor às suas necessidades, você pode desativar o editor Gutenberg por completo.

Gutenberg vs construtores de páginas: Prós e contras

Agora, vamos dar uma olhada em como o Gutenberg se compara com plugins de construtores de páginas de terceiros.

Prós:

• Gutenberg é um dos principais recursos, o que significa que você não precisa se preocupar com questões de compatibilidade.
• Por ser um dos principais recursos, todos os desenvolvedores podem construir o suporte Gutenberg em seus plugins, melhorando a compatibilidade.
• Gutenberg produz código mais limpo, mais leve. Tudo igual, um projeto construído com Gutenberg normalmente será carregado mais rápido do que o mesmo projeto feito com um construtor de páginas.

Contras:

• Gutenberg não oferece uma edição visual adequada como um construtor de páginas. É mais acessível do que o editor clássico, mas ainda assim não é 100% perfeito como um construtor de páginas.
• Os construtores de páginas ainda lhe dão opções de design e layout mais flexíveis.
• A maioria dos construtores de páginas oferece um movimento de arrastar e soltar muito mais fluido e flexível.

Pensamentos sobre a comparação

Para a maioria dos usuários, Gutenberg atinge o ponto ideal em termos de flexibilidade.

A maioria das pessoas não precisa da flexibilidade de um construtor de páginas para seu conteúdo, especialmente para postagens em blogs. Mas, ao mesmo tempo, é bom montar rapidamente um design multicoluna ou inserir um botão, o que o editor clássico não torna fácil.

Então, com isso em mente, vamos entrar em como você pode começar a usar Gutenberg.

Como usar o Editor de Blocos Gutenberg WordPress

Agora que você sabe um pouco sobre o editor de blocos Gutenberg, vamos investigar como você pode usá-lo para começar a criar conteúdo.

Começaremos com um olhar introdutório sobre a interface e gradualmente desenvolveremos formas mais avançadas de usar o editor e melhorar seus fluxos de trabalho.

A interface do editor de blocos Gutenberg

Quando você abre o editor, ele esconde a barra lateral do painel do WordPress e lhe dá uma experiência de tela cheia:

Há três partes principais para o editor:

• Conteúdo: Seu conteúdo ocupa a maior parte da tela. Você verá uma prévia visual de como ele será na parte frontal do seu site. Não é 100% exato, mas você deve ter uma idéia muito boa do design final.
• Barra de ferramentas superior: A barra de ferramentas na parte superior ajuda a inserir novos blocos, desfazer/redo e acessar outras configurações vitais
• Barra lateral: A barra lateral contém duas abas. A aba Post permite configurar as configurações de pós-nível como suas categorias, tags, imagem em destaque, etc. A aba Bloco mostra as configurações para o bloco que você selecionou – mais sobre isso mais adiante.

Para criar uma experiência de escrita mais imersiva, você pode esconder a barra lateral clicando no ícone “gear” no canto superior direito. Para trazer a barra lateral de volta, tudo o que você precisa fazer é clicar novamente no ícone “engrenagem”:

Por exemplo, aqui está como é a interface do editor se você estiver usando o novo tema padrão Twenty Twenty-One:

Adicionando blocos

Para adicionar texto de parágrafo comum ao seu artigo, você pode simplesmente clicar e digitar. Cada vez que você pressiona a tecla Enter, o editor cria automaticamente um novo bloco de parágrafos.

Para outros tipos de conteúdo, você precisará inserir um novo bloco. Você usará blocos para imagens, botões, gravações de vídeo, etc.

Para adicionar um novo bloco, você pode clicar em um dos ícones de “mais” na interface. É o ícone principal do inseridor de blocos no canto superior esquerdo, mas você também verá outros ícones dentro da interface que abre uma interface de inseridor de blocos menores:

Para começar, posicione o cursor do mouse onde você deseja inserir o novo bloco. Por exemplo, para adicionar um novo bloco abaixo do botão, você pode clicar abaixo do botão e depois clicar no ícone +.

Você deve ver um painel lateral que mostra todos os blocos disponíveis, divididos em diferentes categorias. Você pode procurar por um bloco específico ou simplesmente escolher uma opção da lista. Quando você pairar sobre um bloco, você verá uma descrição do que ele faz e uma prévia.

Para inserir o bloco, basta clicar sobre ele. Por exemplo, para inserir uma imagem normal, basta clicar sobre o bloco de imagem:

Você pode então seguir as instruções para carregar ou escolher uma imagem existente em sua Biblioteca de Mídia.

Opções essenciais de formatação

Para fazer escolhas básicas de formatação para seus blocos, você terá uma barra de ferramentas flutuante que aparece quando você clica em qualquer bloco.

Se você estiver formatando um texto regular, aqui é onde você pode:

• Acrescentar caracteres em negrito ou itálico
• Inserir links
• Alterar alinhamentos
• Adicionar formatação, como código inline, strikethrough, e assinatura

Por exemplo, digamos que você queira inserir um link em seu conteúdo. Você selecionaria primeiro o texto específico que deseja linkar – em nosso exemplo, que é “Para outros tipos de conteúdo”. Em seguida, você pode clicar no ícone do link na barra de ferramentas para abrir as opções de inserção do link:

Configuração avançadas das configurações de blocos

Todos os blocos que você insere vêm com ajustes adicionais na barra lateral. Alguns blocos podem lhe dar algumas configurações, enquanto outros lhe dão várias opções para controlar o design, layout, funcionalidade, etc.

Para abrir as configurações de um bloco, clique sobre o bloco no editor para selecioná-lo. Em seguida, vá até a aba Bloco na barra lateral para ver suas configurações.

Abaixo, você pode ver as configurações para o bloco de botões, que é um dos blocos mais flexíveis. Você poderia mudar a cor, torná-lo mais largo e muito mais.

Ao fazer alterações nas configurações de um bloco, você verá imediatamente essas alterações refletidas no editor.

Novamente, cada bloco terá configurações que são únicas para aquele bloco. Por exemplo, se você abrir as configurações para o texto de parágrafo regular, você só terá algumas opções básicas de tipografia e cor. Abaixo, você pode ver que conseguimos aplicar um fundo colorido para destacar algum texto:

Reorganização de blocos

Além de usar apenas copiar e colar (o que você pode fazer para textos como qualquer outro editor), Gutenberg lhe dá duas formas principais de reorganizar blocos.

Primeiro, se você quiser mover um bloco para cima ou para baixo em algumas posições, você pode usar as setas para cima ou para baixo na barra de ferramentas flutuante.

Para movimentos extensos, você pode usar o drag-and-drop. Para arrastar e soltar um bloco, você precisa clicar no ícone “seis pontos” à esquerda das setas.

Uma vez que você clique e segure seu mouse sobre esse ícone, você pode arrastar o bloco para qualquer lugar da página:

Incorporação de conteúdo de outras fontes

Gutenberg vem com blocos dedicados para incorporar conteúdo de fontes de terceiros como YouTube, Vimeo, Soundcloud, etc. Você pode encontrar todas estas opções na seção Embed do inseridor de blocos.

Por exemplo, para incorporar um vídeo do YouTube, tudo o que você precisa fazer é:

1. Adicione o bloco dedicado do YouTube.
2. Colar na URL direta do vídeo.
3. Clique em Embed.

Você deve então ver uma prévia do vídeo embutido no editor.

Criação de layouts em várias colunas ou grupos

Como mencionamos anteriormente, uma das vantagens significativas do editor de blocos sobre o antigo editor TinyMCE é que você pode criar layouts mais complexos sem precisar confiar em códigos personalizados ou códigos de atalho.

O editor de blocos vem com dois blocos padrão para ajudar você a fazer isso:

• Colunas: Crie um layout com várias colunas.
• Grupos: Grupos de blocos múltiplos. Por exemplo, você poderia usar isto para definir uma cor de fundo para uma seção inteira que exibe atrás de numerosos blocos.

Ambos os blocos funcionam com base no princípio de “agrupamento” de blocos, o que significa que você vai colocar um ou mais blocos dentro de outro bloco.

Mostraremos um exemplo usando o bloco de colunas, mas o mesmo princípio básico se aplica ao bloco de grupo.

Digamos que você queira criar um layout de duas colunas onde a coluna da esquerda tenha algum texto regular de parágrafo, e a coluna da direita tenha um botão.

Para começar, você usaria o inseridor de blocos para adicionar o bloco de colunas. Isso mostrará um prompt onde você poderá escolher o layout da sua preferência:

:

Vamos escolher um layout de duas colunas 50/50 para este exemplo. Com isso, você verá duas caixas de igual tamanho com + ícones dentro. Para inserir conteúdo, você pode clicar naquele ícone + para abrir a interface do inseridor de blocos:

Uma vez que você tenha adicionado o primeiro bloco a uma coluna, você pode pressionar o ícone + para inserir blocos adicionais. Ou, você pode arrastar e soltar um bloco de fora da estrutura da coluna para dentro da coluna.

10 dicas úteis do Gutenberg para trabalhar de forma mais produtiva

Agora que você tem uma compreensão básica de como Gutenberg funciona, vamos rever algumas dicas e truques valiosos que o ajudarão a usar o editor de blocos de forma mais eficaz.

1. Use / (barra) para blocos de inserção rápida

Se você precisar inserir muitos blocos, a abertura manual do inseridor de blocos pode ficar um pouco entediante. Felizmente, uma vez que você comece a aprender os nomes dos blocos comuns que você precisa usar, há uma maneira muito mais rápida de inserir blocos usando apenas seu teclado – / (barra).

Se você pressionar “Enter” para iniciar um novo bloco de parágrafos, você pode inserir rapidamente um bloco digitando uma barra, seguida pelo nome do bloco que você deseja inserir.

Quando você começar a digitar, você verá uma lista de todos os blocos que correspondem à sua consulta. Você pode então usar suas setas de teclado para navegar pelos blocos e pressionar “Enter” para selecionar o bloco que você deseja inserir.

Aqui está um exemplo de como usar a Inserção Rápida para adicionar um bloco de imagens:

2. Insira imagens arrastando-as de sua área de trabalho

Se você estiver inserindo muitas imagens, o editor de blocos inclui outro recurso de economia de tempo que lhe permite eliminar a necessidade de adicionar um bloco de imagem antes de carregar uma imagem.

Em vez disso, você pode simplesmente arrastar o arquivo de imagem diretamente da sua área de trabalho para o local onde você deseja adicioná-lo ao seu artigo. Quando você arrasta o arquivo de imagem sobre o conteúdo do seu site, você verá uma marca de linha azul onde a imagem aparece.

Uma vez liberado o arquivo, o WordPress irá automaticamente carregá-lo e inserir um bloco de imagem no local apropriado:

3. Use alguma formatação Markdown

Se você é um fã da sintaxe Markdown para criar conteúdo, você ficará feliz em saber que o editor de blocos suporta algum uso limitado de markdown – principalmente com relação a cabeçalhos.

Por exemplo, se você quiser inserir um bloco de cabeçalho com uma etiqueta H3, você pode digitar três hashtags (`###`) seguidas de um clique na barra de espaço. O editor converterá automaticamente isso para um H3, e então você poderá continuar digitando o título:

Suponha que você queira um suporte Markdown ainda mais avançado. Nesse caso, você pode instalar um plugin gratuito como o EditorsKit, que também lhe permite usar Markdown para negrito, itálico e strikethrough – falaremos mais sobre plugins Gutenberg um pouco mais tarde neste artigo.

4. Fixe a barra de ferramentas de formatação na parte superior do editor

Se você não gosta de como a ferramenta de formatação “flutua” acima de um bloco, o editor de blocos inclui um recurso que permite que você o fixe abaixo da barra de ferramentas superior:

5. Copie um bloco e todas as suas configurações

O editor de blocos permite copiar e colar texto como você faria em qualquer editor – “Ctrl + C” ou clicando com o botão direito do mouse e escolhendo Copiar.

Entretanto, você não pode usar este método para copiar e colar um bloco inteiro enquanto preserva suas configurações. Ao invés disso, você precisará fazê-lo:

1. Selecione o bloco.
2. Clique no ícone dos três pontos na barra de ferramentas do bloco.
3. Selecione Copiar.

Uma vez copiado o bloco desta forma, você pode colá-lo como normalmente faria – ou seja, “Ctrl + V” ou clicando com o botão direito do mouse e escolhendo Colar.

6. Selecione rapidamente o bloco certo usando a visualização da lista de blocos

Para a maioria dos blocos, basta clicar no editor para selecionar o bloco. Entretanto, isto pode ficar complicado se você começar a usar blocos “aninhados”, como a inserção de blocos dentro das colunas ou blocos de grupos.

O editor inclui uma opção List View, que você pode abrir a partir da barra de ferramentas superior para contabilizar isso. A visualização de lista mostrará todos os blocos, incluindo os blocos agrupados com recuo.

Você pode selecionar um bloco clicando sobre ele na lista, e o editor também destacará o bloco quando você passar o mouse sobre ele na lista.

No exemplo abaixo, você pode ver:

• O bloco principal de colunas pai
• Blocos aninhados para cada coluna
• Um bloco de grupo aninhado dentro de uma coluna
• Um bloco de cabeçalho aninhado dentro do bloco do Grupo

Para selecionar o bloco pai principal, você pode simplesmente abrir a visualização da lista e selecioná-lo da lista:

7. Abrindo o editor de código (para blocos individuais ou artigos completos)

Uma das vantagens do editor de blocos Gutenberg é que ele permite que você configure muitos estilos e opções de layout sem recorrer a código. No entanto, você ainda pode ter algumas situações em que queira acessar o código diretamente para usuários mais avançados.

Para ajudar você a fazer isso, o editor Gutenberg vem com algumas opções diferentes.

Primeiro, você pode editar o código de apenas um bloco individual, útil para pequenos ajustes como a inserção de uma classe CSS. Para fazer isso, abra o menu suspenso da barra de ferramentas do bloco e selecione Editar como HTML:

Selecionando esta opção, a pré-visualização visual se tornará um editor de código apenas para aquele bloco, sem afetar as pré-visualizações visuais de outros blocos:

Em segundo lugar, o editor inclui um bloco HTML personalizado que você pode usar para incorporar trechos HTML completos. Tudo o que você faz é adicionar o bloco e colar em seu código.

Finalmente, você também pode abrir o editor de código completo para todo o documento usando o menu suspenso no canto superior direito ou um atalho de teclado: Ctrl + Shift + Alt + M.

Tenha em mente que, ao abrir o editor de código completo, você também verá a marcação de formatação de blocos do Gutenberg, de modo que pode ser um pouco complicado navegar:

8. Aprenda os atalhos de teclado

O editor de blocos inclui muitos atalhos de teclado que lhe permitem realizar ações comuns. Vale a pena dedicar um tempo para aprendê-los porque eles o tornarão mais produtivo e o pouparão de muitos cliques repetitivos do mouse.

Aqui estão alguns dos atalhos mais comuns – se você estiver em um Mac, você vai querer trocar “Ctrl” por “Command (⌘)”:

• Abrir a vista da lista de blocos – Camisa + Alt + O
• Salve suas mudanças – Ctrl + S
• Desfaça sua última alteração – Ctrl + Z
• Refazer seu último desfazer – Ctrl + Shift + Z
• Duplicar o(s) bloco(s) selecionado(s) – Ctrl + Shift + D
• Eliminar o(s) bloco(s) selecionado(s) – Shift + Alt + Z
• Inserir um novo bloco antes do(s) bloco(s) selecionado(s) – Ctrl + Alt + T
• Inserir um novo bloco após o(s) bloco(s) selecionado(s) – Ctrl + Alt + Y

Você também pode abrir uma folha completa de todos os atalhos do teclado quando estiver no editor. Para fazer isso, você pode usar um atalho de teclado – Shift + Alt + H – ou clicar no ícone do menu “três pontos verticais” (⋮) no canto superior direito do editor e escolher Atalhos de teclado a partir do menu suspenso.

9. Limpe sua interface escondendo os blocos

O editor de blocos adiciona muitos blocos por padrão, mas você provavelmente não usará todos eles. Para ajudá-lo a limpar a interface, o editor inclui um recurso chamado Gerenciador de blocos que permite desativar e ocultar blocos que você não está usando:

10. Adicione Links Âncoras

Finalmente, nossa última dica útil é o recurso de link de âncora HTML dedicado do editor de blocos, que permite criar links de salto para seções específicas do seu conteúdo (por exemplo, para uma tabela de conteúdo).

No editor clássico, era preciso adicionar âncoras HTML usando código manualmente. Mas com Gutenberg, você pode simplesmente digitar o texto para seu link de salto no campo de âncora HTML na área Avançado de qualquer configuração de bloco:

Aprofundando-se nos conceitos mais avançados do editor de blocos

Neste ponto, abordamos um pouco sobre como o editor trabalha e algumas dicas para trabalhar de forma mais eficiente. Agora que você tem esse conhecimento básico, vamos passar por duas táticas um pouco mais avançadas:

• Blocos padrões
• Blocos reutilizáveis

Blocos padrões

Um bloco padrão é essencialmente um modelo. É uma coleção de blocos dispostos em um layout. Pode ser algo menor, como um arranjo de botões. Poderia até ser um modelo para uma seção inteira, ou mesmo uma página inteira.

O WordPress vem com seus próprios blocos padrões embutidos, e desenvolvedores de plugins de terceiros também podem adicionar seus próprios padrões.

Você pode inserir novos padrões a partir da guia Padrões do inseridor de blocos principais:

Uma vez inserido o bloco padrão, você pode editar completamente todos os blocos que compõem esse padrão, tal como se você tivesse adicionado manualmente os blocos.

Atualmente, o editor principal do Gutenberg não permite que você crie seus padrões de blocos (a menos que você saiba como codificar). No entanto, você pode corrigir isso com o plugin Block Pattern Builder gratuito de Justin Tadlock. Com o plugin ativado, você pode criar seus designs usando o Gutenberg e depois salvar esse design como um padrão.

Para começar, vá para Block Patterns > Add New para criar um novo padrão usando o editor. Certifique-se de publicá-lo quando terminar:

Uma vez feito isso, você poderá inserir seu bloco padrão como qualquer outro – procure-o na seção Uncategorized (sem categoria):

A equipe central do WordPress também lançou uma biblioteca oficial de blocos padrões no WordPress.org. Você pode inseri-los no editor usando copiar e colar. Basta clicar no botão Copiar no site da biblioteca de modelos de blocos e depois colá-lo no editor.

Blocos reutilizáveis

Os blocos reutilizáveis são uma coleção de um ou mais blocos que você pode inserir como um grupo. São semelhantes aos padrões de blocos, mas com uma diferença chave:

Enquanto um bloco padrão é um modelo inicial que você editará em cada instância, um bloco reutilizável será o mesmo em cada instância em que você o incluir.

Se você atualizar o bloco reutilizável, essas mudanças se aplicarão automaticamente a todas as instâncias existentes.

Por exemplo, você poderia usar um bloco reutilizável para criar uma chamada à ação (CTA) que você quer que seja a mesma em todo o seu conteúdo. Então, se você quiser atualizar a CTA, basta atualizar o bloco reutilizável uma vez para mudá-lo em todo o site.

Para criar um bloco reutilizável no editor Gutenberg WordPress, clique e arraste para selecionar um ou mais blocos. Depois, clique na opção Adicionar a Blocos Reutilizáveis. (O plugin que mencionamos acima também permite criar um bloco padrão desta forma).

Seus blocos serão então agrupados – você pode dar um nome ao seu bloco reutilizável nas configurações do bloco reutilizável na barra lateral.

Agora, você poderá inserir esse bloco reutilizável, procurando por seu nome. Você pode utilizar `/’ para inserir rapidamente o bloco:

Se você alterar o bloco reutilizável, você terá a opção de publicar essas alterações quando atualizar o artigo. E se você decidir publicar as mudanças do bloco reutilizável, essas mudanças serão automaticamente aplicadas a cada instância do bloco reutilizável:

Estendendo o editor de blocos com plugins

Até agora, temos nos concentrado nas características principais do editor de blocos, com algumas exceções.

Uma das grandes coisas sobre o editor de blocos, no entanto, é que você pode usar plugins para estendê-lo, assim como você pode fazer com o resto do seu site WordPress.

Você pode usar plugins para algumas coisas diferentes:

• Adicionar novos blocos de conteúdo: Os plugins podem adicionar novos blocos que você pode usar em seus projetos. É o caso mais comum de uso para plugins Gutenberg no momento.
• Adicionar novos modelos/modelos de blocos: Alguns plugins usam o sistema de padrões de blocos centrais, enquanto outros criaram seus próprios sistemas de modelos.
• Alterar a interface/recursos do editor: Você pode usar plugins para modificar o próprio editor. Por exemplo, você pode adicionar melhor suporte a Markdown.

Além dos plugins especificamente construídos para Gutenberg, muitos outros plugins WordPress também podem usar o editor de blocos.

Por exemplo, se você estiver usando um plugin de formulário de contato, o plugin pode lhe dar um bloco dedicado que você pode usar para embutir seus formulários. O mesmo se aplica a muitos outros tipos de plugins.

Uma vez que você domine o básico do editor, vale a pena explorar estes plugins para ver se você encontra algum que possa melhorar sua experiência.

Aqui estão algumas das opções mais populares na época em que estamos escrevendo este artigo:

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Você pode ver mais na seção de plugins habilitados para blocos do WordPress.org.

Editor WordPress Gutenberg e Full Site Editing

Como mencionamos no início deste artigo, o projeto Gutenberg pretende ser muito mais do que apenas um editor de conteúdo.

O plano a longo prazo é fazer com que o WordPress passe para o Full Site Editing. Isso significa exatamente o que ele diz – o objetivo é que você possa eventualmente editar todas as partes do seu site usando o editor Gutenberg. E isso inclui o cabeçalho, rodapé, barras laterais, etc. do seu site.

Ao contrário do lançamento do editor de blocos no WordPress 5.0, o Full Site Editing tem uma abordagem iterativa. Será uma adição gradual de recursos, onde cada novo lançamento se baseia nos anteriores.

Por exemplo, a partir do WordPress 5.8, você agora vai usar o editor de blocos para gerenciar os widgets do seu site. Você também terá acesso a alguns novos blocos focados em temas, tais como Logotipo do site, Navegação, Loop de consulta (permite criar modelos para postagens em listas), e muito mais.

Mas embora a edição oficial Full Site Editing ainda seja um trabalho em andamento, alguns intrépidos desenvolvedores de temas já começaram a lançar temas baseados em blocos, o que nos dá alguns bons exemplos de como a edição Full Site Editing pode funcionar.

Além disso, você pode acessar alguns dos recursos experimentais do Full Site Editing na versão plugin do Gutenberg.

Então, vejamos duas coisas:

1. Os recursos do Full Site Editing existentes que temos agora a partir do WordPress 5.8
2. Como a edição “completa” do site pode funcionar com base em características experimentais

Usando blocos em vez de widgets

A partir do WordPress 5.8, você agora usará blocos para controlar suas barras laterais e rodapés em vez de widgets (por padrão – você pode desativar isto se quiser).

Quando você for a Appearance > Widgets, você será capaz de gerenciar o conteúdo de cada área de widgets usando o editor de blocos.

Você pode ver que cada área de widget recebe um editor separado, que você pode abrir clicando nos comandos de acordeão. Você também pode mover blocos entre diferentes áreas de widgets clicando nos ícones de seta com gancho perto do topo:

Utilização de novos blocos de temas

O WordPress 5.8 também acrescenta novos blocos de temas personalizados que permitem inserir conteúdo dinâmico em seu site. Estes blocos também desempenharão um papel fundamental quando você estiver desenhando modelos para seu tema em futuros lançamentos.

Por exemplo, digamos que você queira incorporar uma lista do seu conteúdo mais recente em uma página. Agora, você pode simplesmente adicionar o bloco Query Loop e poderá inserir dinamicamente conteúdo de um determinado tipo de artigo (por exemplo, artigos em blogs), incluindo filtragem por categorias, autores, palavras-chave e muito mais:

Dentro do bloco Query Loop, você pode aninhar os outros blocos de temas para controlar o modelo para o conteúdo ali exibido. Por exemplo, você pode exibir a data de cada postagem adicionando o bloco de Data de postagem ao seu modelo.

Com o bloco Query Loop no WordPress 5.8, você pode essencialmente projetar sua própria página de listagem de blogs personalizada. O Full Site Editing expandirá isso para todo o seu tema – então vamos olhar para isso a seguir.

Desenho de modelos de conteúdo

O modo de edição de modelos é outra novidade no WordPress 5.8. Ele permite que você use o Gutenberg para projetar os modelos para seus artigos e páginas usando blocos.

Atualmente, este recurso só está disponível se o desenvolvedor do seu tema o tiver habilitado especificamente, portanto, você pode não vê-lo se o desenvolvedor do seu tema ainda não o tiver feito.

Se você estiver usando um tema que suporte o modo de edição de modelos no WordPress 5.8, você verá uma nova seção de Modelos na guia Artigo/Página da barra lateral quando você estiver editando um artigo ou página. Você pode criar um novo modelo ou escolher um de seus modelos existentes:

Se você criar um novo modelo, você poderá dar-lhe um nome para ajudá-lo a lembrar-se dele. Então, você pode projetar o modelo usando o modo especial de editor de modelos, juntamente com os novos blocos de temas que detalhamos na seção anterior:

Exemplo de Full Site Editing Blockbase

Blockbase é um tema da Automattic que funciona como uma espécie de “prova de conceito” e playground para o Full Site Editing. Ainda é experimental, portanto pode mudar antes que estas características estejam no núcleo do software WordPress. Mas ele fornece uma idéia do Full Site Editing.

Com o tema e a versão plugin do Gutenberg instalados, você obtém uma nova área de Site Editor que lhe permite “construir” seu tema usando o mesmo editor que você viu acima.

A diferença crítica, porém, é que você não está apenas construindo um único artigo ou página. Ao invés disso, você está usando o editor de blocos Gutenberg WordPress para criar os modelos reais que todo o conteúdo do seu site usará – por exemplo, o modelo para seu cabeçalho.

Para ajudá-lo a realizar isto, você terá uma gama de novos blocos de design, incluindo alguns dos blocos de temas que você viu acima:

Para navegar entre diferentes modelos, você pode clicar no logotipo do WordPress no canto superior esquerdo para editar outros modelos e criar novos modelos:

Mais uma vez, a idéia é que você poderá eventualmente usar o editor Gutenberg para controlar todos os modelos/layouts do seu tema. E quando isso acontecer, a criação de um site WordPress parecerá bem diferente do que vemos como “normal” em 2021.

Resumo

Desde 2018, o editor de blocos do Gutenberg tem feito muitos progressos. Com o próximo movimento em direção ao Full Site Editing, o editor de blocos se tornará apenas uma parte ainda mais significativa do WordPress.

Neste artigo, cobrimos tudo desde o básico do editor de blocos até dicas e recursos avançados. Também examinamos como o Full Site Editing poderá ser no futuro.

Se você ainda não estiver pronto para tentar, você pode desativar o Gutenberg permanentemente e usar o editor clássico. Entretanto, Gutenberg continuará crescendo, por isso não é algo que você vai querer ignorar para sempre.

Você ainda tem alguma pergunta ou pensamento sobre o editor? Se sim, gostaríamos de ouvir seus comentários, tanto bons como ruins.