O Guia Completo de Padrões de Blocos de Gutenberg (I)
Publicados: 2020-12-23Na semana passada, Matt Mullenweg, como é tradição todos os anos, fez sua apresentação (neste caso, virtual), State of The Word , na qual apresentou um breve resumo do estado atual e das novas funcionalidades do WordPress.
Matt está mais do que nunca focado em nos fazer apaixonar pela experiência que o editor de blocos Gutenberg oferece. Um dos novos recursos que Matt destacou, que veio com o WordPress versão 5.5, são os padrões de bloco . Achei que seria interessante fazer esse guia completo sobre eles.
O guia está dividido em três posts e veremos os seguintes tópicos:
- Introdução aos padrões de bloco
- Inserir um padrão em uma página
- Padrões pré-definidos e outros disponíveis em diretórios
- Adicione padrões disponíveis em diretórios ao seu site
- Como criar um padrão do zero
- Como criar um padrão se você não for um desenvolvedor
- Como converter blocos reutilizáveis em padrões de bloco
- Tópicos usando padrões de bloco
- Documentação oficial.
Então, sem mais delongas, vamos começar!
1. Introdução aos padrões de bloco
Quando Gutenberg chegou, a grande mudança em relação ao editor clássico que tínhamos no WordPress foi a introdução do conceito de “bloco”. Tudo era para ser um bloco: o título do post, seus parágrafos, listas, imagens... cada um deles era um bloco, com suas próprias propriedades de personalização para configurar o tamanho da fonte, título, alinhamento e assim por diante.
Os blocos rapidamente ficaram mais sofisticados e agora temos galerias de imagens, blocos de mídia/texto ou até mesmo blocos contendo outros blocos.
Simultaneamente, muitos desenvolvedores também forneceram um grande conjunto de blocos com recursos exclusivos para que você possa melhorar o design de suas páginas. Por exemplo, na Nelio desenvolvemos o Nelio Compare Images para comparar duas imagens com um simples controle deslizante:
Não só houve uma explosão de blocos que podem ser encontrados em plugins e temas, como suas capacidades também evoluíram com as diferentes versões do WordPress. Assim, atualmente você pode criar blocos reutilizáveis e, com eles, até mesmo criar uma página ou template de postagem.
Continuando com a ideia de ter designs pré-definidos que possam ser reutilizados de forma rápida e fácil, com o WordPress versão 5.5 chegaram os padrões de blocos. A ideia de um padrão de bloco é muito simples: são seções ou fragmentos pré-definidos formados por um grupo de blocos que você pode usar na criação de páginas e posts. Esses padrões podem ser algo tão simples quanto uma seção mostrando dois botões ou uma seção de preços com designs atraentes e complexos.
2. Insira um padrão em uma página
Vamos começar com o básico, como você insere um novo padrão em uma página? Muito fácil! Tal como acontece com os blocos, para inserir um padrão basta clicar no botão + no canto superior esquerdo do seu editor e, em vez de adicionar um bloco, selecione a guia Padrões . Lá você verá um pequeno menu suspenso com os tipos de padrões que você pode selecionar, os predefinidos do WordPress, os do tema que você instalou e qualquer outro que você instalou com um plugin.
Selecione o padrão que você mais gosta e veja como o conjunto de blocos que o compõem são inseridos em sua página:
Depois de inserir o padrão, você pode modificar cada um dos blocos como vinha fazendo até agora. Além disso, se os blocos desse padrão estiverem agrupados, você também poderá modificar as propriedades do grupo como um todo. Simples, certo?
3. Padrões padrão e mais padrões de diretórios de terceiros
A versão WordPress 5.5 vem com um conjunto de padrões de blocos pré-definidos que agora você pode usar para criar suas páginas. Você só precisa clicar no botão + que mencionei acima para ver os padrões disponíveis em seu site.
Além disso, seu tema ativo também pode definir seus próprios padrões de bloco. Por exemplo, o tema Twenty Seventeen ou Twenty Twenty-One WordPress inclui alguns padrões de bloco, assim como os blocos do GoDaddy e do Genesis, para mencionar alguns exemplos.
Após o lançamento do WordPress 5.0 tivemos uma explosão de blocos, e agora estamos vendo o mesmo resultado se padrões de blocos: você pode baixar e instalar blocos e padrões em seu site com muita facilidade, como explicarei mais adiante. Aqui você tem duas teias de blocos e padrões que estão à sua disposição, embora eu tenha certeza de que em breve haverá mais:
- Padrões Shareablock por Jeffrey Carandang – Um site fantástico onde você pode compartilhar e obter muitos blocos, modelos e padrões para baixar e instalar em seu site.
- Gutenberg Hub de Munir Kamal – onde você também encontrará vários blocos, modelos e padrões.
Há também o plugin Redux Framework , que oferece uma biblioteca com mais de 1.000 blocos, templates e padrões de terceiros (incluindo aqueles disponíveis nos diretórios acima) para inserir em suas páginas. O plugin permite que você baixe até 5 padrões gratuitos e então você pode atualizar para a versão paga.
4. Adicione padrões disponíveis em diretórios ao seu site
Como já mencionei, você pode usar o plugin Redux Framework para adicionar facilmente padrões do Shareablock e GutenbergHub. Se você é um designer profissional de sites WordPress, com certeza é uma boa opção encontrar sempre quantos padrões quiser muito rapidamente. Mas você também pode usar novos padrões de bloco sem precisar de um plugin premium. Vamos ver como.
Adicionar um padrão Shareablock
No caso do Shareablock, para instalar um padrão (e claro, um bloco ou template), basta selecioná-lo na web e clicar no botão Download Now .
Na primeira vez, será solicitado um endereço de e-mail para que você possa obter um nome de usuário e uma senha.
No e-mail há um link para entrar no site; faça o login e agora você poderá baixar o padrão de seu interesse. Basta selecioná-lo e clicar novamente em Download Now , para que você receba o padrão de bloqueio em seu e-mail.
Após clicar no link fornecido no e-mail, você pode acessar a web para baixar o arquivo .json do padrão. Uma vez baixado, basta arrastá-lo para o editor de blocos do WordPress e você verá automaticamente todos os blocos que compõem o padrão.
É um processo complicado, mas dá conta do recado. Infelizmente, você notará que o padrão de bloco não aparece em sua biblioteca…
Adicionar um padrão de hub do Gutenberg
Adicionar um padrão do Gutenberg Hub é mais fácil. Como antes, primeiro selecione o padrão que deseja copiar.
À direita do padrão, você verá o botão Copiar Código . Clique no botão para copiá-lo para a área de transferência e cole-o no editor Gutenberg. Isso colará o bloco em seu editor, mas pulará a biblioteca.
Mas espere! Não tão rápido. Se você deseja personalizar totalmente o(s) bloco(s) resultante(s), Munir Kamal recomenda que você instale seu plugin gratuito, EditorPlus, que adiciona novos blocos ao editor e estende o Gutenberg com controles avançados de design, fontes, ícones, divisores, animações e muito mais recursos.
Se fizer isso, você verá na barra lateral direita do editor que você tem controles avançados para modificar o design do padrão copiado.
Agora você sabe o que são padrões de bloco, onde encontrá-los e como inseri-los em seu site para criar ótimos designs. Não perca o próximo post onde você aprenderá a criar seus próprios padrões!
Imagem em destaque de Raul Cacho Oses no Unsplash .