Padrões de bloco do WordPress 101: o que são? E Como Usá-los

Quer economizar tempo e criar designs mais profissionais no editor de blocos do WordPress? Nesse caso, aprender sobre os padrões de bloco do WordPress pode ser exatamente o que você precisa.

Com padrões de bloco, você pode inserir um design pré-fabricado, ajustá-lo para atender às suas necessidades e estar pronto para começar. Esta é uma grande economia de tempo. E, se você não for um designer, os padrões de bloco também são úteis porque permitem que você utilize designs mais exclusivos, mesmo que você não tenha conhecimento para criar esses designs do zero.

Neste post, abordaremos tudo o que você precisa saber sobre os padrões de bloco do WordPress:

• Quais são os padrões de bloco do WordPress e como eles são diferentes dos blocos reutilizáveis.
• Como usar padrões de bloco no editor.
• Onde encontrar novos padrões de blocos e como usá-los.
• Como criar seus próprios padrões de bloco sem código.

O que são padrões de bloco do WordPress?

Os padrões de bloco do WordPress são essencialmente apenas modelos feitos de blocos.

Eles podem conter um único bloco ou vários blocos organizados em determinados layouts. Além dos próprios blocos, os padrões de bloco também incluirão as configurações desses blocos ( como configurar um botão para uma determinada cor ).

Você pode encontrar padrões de bloco para modelos de página inteira. Ou, mais comumente, você encontrará padrões de bloco para determinadas seções que talvez queira usar em uma página. Você pode então juntar vários padrões de blocos como Legos para construir seu design.

Por exemplo, digamos que você queira criar uma seção que tenha uma imagem de fundo, algum texto de cabeçalho e um botão. Você pode configurar isso manualmente usando o editor de blocos. Mas com um padrão de bloco, você pode inserir um design pré-fabricado com esse layout e personalizá-lo para corresponder ao seu conteúdo.

Como mencionei acima, os principais benefícios de usar padrões de bloco do WordPress são:

1. Eles economizam seu tempo.
2. Eles facilitam a criação de designs mais complicados, porque você pode não ter o conhecimento para criar certos tipos de designs por conta própria.

Padrões de bloco versus blocos reutilizáveis

Agora que você sabe o que são os padrões de bloco do WordPress, você pode estar pensando que eles se parecem muito com os blocos reutilizáveis ​​do WordPress, que são um recurso central que foi introduzido antes dos padrões de bloco.

Um bloco reutilizável também é uma coleção de um ou mais blocos que você pode inserir facilmente em seu conteúdo.

Eles são semelhantes, pois ambos permitem que você insira rapidamente um design pré-fabricado, mas têm uma grande diferença:

• Padrões de bloco são um ponto de partida para o seu design . Você pode usá-los para importar o design básico que deseja usar, mas vai personalizá-los todas as vezes e cada instância de um padrão de bloco será diferente.
• Os blocos reutilizáveis ​​serão os mesmos em todas as instâncias . Cada instância de um bloco reutilizável será sempre a mesma e, se você atualizar o design do bloco reutilizável em um ponto, essas alterações serão aplicadas automaticamente a todas as instâncias do bloco reutilizável.

Aqui está um exemplo de quando você pode usar cada um:

Primeiro, digamos que você tenha um formato especial para inserir citações em seu conteúdo. Portanto, sempre que inserir uma cotação, você deseja usar exatamente o mesmo arranjo de blocos para manter as coisas consistentes.

Se cada cotação for diferente, você desejará usar um padrão de bloco para isso. Você pode inserir o padrão de bloco para configurar a formatação básica e, em seguida, adicionar o texto de cotação exclusivo.

Agora, digamos que você tenha uma chamada para ação (CTA) para as pessoas se juntarem à sua lista de e-mail que você deseja incluir no final de cada postagem do blog. Você deseja que este CTA seja exatamente o mesmo em todas as instâncias e também deseja a capacidade de atualizá-lo no futuro.

Para este caso de uso, você deve usar um bloco reutilizável. O bloco reutilizável garantirá que todas as instâncias do seu CTA sejam iguais. E se você quiser alterar o CTA, basta atualizar o bloco reutilizável uma vez e essas alterações serão aplicadas a todas as instâncias.

Como usar padrões de bloco do WordPress

Você pode inserir padrões de bloco por meio da mesma interface usada para inserir blocos.

Para começar, abra o editor do conteúdo em que deseja inserir um padrão de bloco. Em seguida, clique no ícone de adição no canto superior esquerdo para abrir a interface do insersor de conteúdo.

Na barra lateral que aparece, clique na guia Padrões . Você pode então usar a lista suspensa para filtrar diferentes tipos de padrões.

Quando você encontra um padrão que você gosta, tudo que você precisa fazer é clicar nele para inseri-lo em seu conteúdo:

Depois de inserir o padrão de bloco, você pode editar todos os blocos individuais como faria se tivesse criado manualmente o desenho:

E é isso! Se você quiser inserir outro padrão de bloco, basta repetir o mesmo processo. O padrão de bloco será inserido onde quer que você tenha posicionado o cursor no editor.

Como encontrar e usar novos padrões de bloco do WordPress

Para ajudá-lo a encontrar novos padrões de bloco, a equipe do WordPress criou uma biblioteca oficial de padrões de bloco no WordPress. Você pode acessá-lo clicando aqui.

Você pode usar os filtros para navegar por todos os padrões de bloco e clicar em um resultado para visualizá-lo. Se você encontrar um padrão de bloco que você gosta, basta clicar no botão Copiar Padrão para copiar o padrão para sua área de transferência:

Agora, abra o editor do conteúdo onde você deseja adicionar o padrão de bloco e cole-o, assim como você colaria texto normal - clicando com o botão direito do mouse e escolhendo colar ou usando um atalho de teclado como Ctrl + V (ou Cmd + V no Mac).

E é isso - você deve ver o padrão de bloco completo aparecer onde quer que você o colou:

Além da biblioteca oficial de padrões de blocos no WordPress.org, você também pode encontrar diretórios de terceiros como o ShareABlock e a biblioteca de modelos do Gutenberg Hub (que usa a mesma abordagem copiar/colar da biblioteca oficial).

Você também pode encontrar vários plug-ins que permitem inserir padrões e modelos de bloco, embora eles possam usar sua própria solução personalizada em vez de usar o recurso de padrão de bloco nativo. De qualquer forma, o resultado final é o mesmo. Você pode encontrar algumas das melhores opções em nosso post sobre plugins de modelo do Gutenberg.

Como criar seus próprios padrões de bloco do WordPress sem código

A partir de agora, o editor de blocos principal do WordPress não permite que você crie seus próprios padrões de bloco, a menos que você saiba codificar, o que é um pouco chato.

Felizmente, como seria de esperar do WordPress, existem plugins que corrigem isso.

Meu favorito pessoal é o plugin Block Pattern Builder gratuito de Justin Tadlock. Essencialmente, este plugin permite que você crie seu próprio design usando o editor de blocos e salve-o como um padrão de bloco. Assim, você pode projetar seu padrão usando o editor, salvá-lo como um padrão e inseri-lo facilmente como qualquer outro padrão.

Honestamente, é um pouco estranho que esse recurso não esteja no software principal do WordPress, mas não é grande coisa porque você pode resolvê-lo apenas instalando um plugin gratuito.

Para começar, instale e ative o plugin gratuito Block Pattern Builder do WordPress.org. Estou usando o plugin acima mencionado de Justin Tadlock, mas há um plugin de nome idêntico do BlockMeister que parece oferecer a mesma funcionalidade com um pouco mais de recursos.

Em seguida, abra o editor regular e crie o design que deseja salvar. Depois de fazer isso, selecione todos os blocos que deseja incluir em seu padrão de bloco e clique no ícone de três pontos . Em seguida, selecione a opção Adicionar aos padrões de bloco :

Você pode então dar-lhe um nome:

E é isso – agora você pode inseri-lo como qualquer outro padrão de bloco. Por padrão, ele estará na seção “Sem categoria”:

Além de trabalhar no editor, você também terá uma guia dedicada de Padrões de Bloco no painel do WordPress para gerenciar e criar padrões de bloco.

Comece hoje mesmo com os padrões de bloco

Usar padrões de bloco é muito fácil - você pode inseri-los como um bloco. E depois de inseri-los, você pode editar os blocos no padrão como se tivesse criado o design por conta própria.

Para ter mais flexibilidade, existem algumas maneiras de acessar novos padrões de bloco:

1. Você pode usar a Biblioteca de Padrões de Blocos oficial no WordPress.org ou um dos sites de bibliotecas de terceiros. Tudo o que você precisa fazer é copiar e colar entre as bibliotecas e o editor do WordPress.
2. Você pode usar um dos plug-ins de modelo do Gutenberg que coletamos. Esses plugins não usam o recurso de padrões de bloco nativos, mas servem exatamente ao mesmo propósito e função.
3. Você pode criar seus próprios padrões de bloco usando o editor e um plugin como o Block Pattern Builder. Depois de salvar seus designs, você pode reutilizá-los facilmente no futuro.

Para aprender outras maneiras de melhorar como você trabalha no editor de blocos, confira nosso guia sobre como aproveitar ao máximo o editor de blocos e nossa coleção dos melhores plugins de blocos.

Você ainda tem alguma dúvida sobre os padrões de bloco do WordPress? Deixe-nos saber nos comentários e tentaremos ajudar.