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 bloqueio do WordPress pode ser exatamente o que você precisa.

Com padrões de blocos, 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 blocos também são úteis porque permitem que você utilize designs mais exclusivos, mesmo que não tenha o conhecimento para criar esses designs do zero.

Neste post, vamos cobrir tudo o que você precisa saber sobre os padrões de bloqueio do WordPress:

O que são padrões de bloqueio 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 para esses blocos (como configurar um botão para ter 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 com uma imagem de fundo, algum texto de título 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 os 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 necessário para criar certos tipos de design sozinho.

Padrões de blocos vs blocos reutilizáveis

Agora que você sabe o que são os padrões de bloco do WordPress, pode estar pensando que eles se parecem muito com os blocos reutilizáveis ​​do WordPress, que são um recurso básico 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 porque permitem inserir rapidamente um design pré-fabricado, mas têm uma grande diferença:

• Os 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 sempre 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 aspas em seu conteúdo. Portanto, sempre que inserir uma citaçã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 citação exclusivo.

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

Para este caso de uso, você gostaria de 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 os padrões de bloqueio do WordPress

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

Para começar, abra o editor da parte do conteúdo onde deseja inserir um padrão de bloco. Em seguida, clique no mais ícone no canto superior esquerdo para abrir a interface de inserção de conteúdo.

Na barra lateral que aparece, clique no botão Padrões aba. Você pode usar o menu suspenso para filtrar diferentes tipos de padrões.

Quando você encontrar um padrão de que goste, basta clicar nele para inseri-lo em seu conteúdo:

Depois de inserir o padrão de bloco, você pode editar todos os blocos individuais da mesma forma que faria se tivesse criado o design manualmente:

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ê posicione o cursor no editor.

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

Para ajudá-lo a encontrar novos padrões de blocos, a equipe do WordPress criou uma biblioteca oficial de padrões de blocos no WordPress. Você pode acesse 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 goste, basta clicar no botão Copiar Padrão botão para copiar o padrão para a área de transferência:

Agora, abra o editor para a parte do conteúdo onde 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 tenha colado:

Além da biblioteca oficial de padrões de blocos no WordPress.org, você também pode encontrar diretórios de terceiros como CompartilharAbloquear e a Biblioteca de modelos do Gutenberg Hub (que usa a mesma abordagem de 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 blocos, 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 é o gratuito de Justin Tadlock Construtor de padrão de bloco plugar. Essencialmente, este plug-in 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 plug-in gratuito.

Para começar, instale e ative o plug-in gratuito Block Pattern Builder do WordPress.org. Estou usando o plug-in mencionado acima de Justin Tadlock, mas há um plug-in com 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 botão três pontos ícone. Em seguida, selecione a opção para 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, estará na seção “Sem categoria”:

Além de trabalhar no editor, você também terá um Padrões de bloco aba 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 você mesmo tivesse criado o design.

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. Nem todos esses plug-ins usam o recurso de padrões de bloco nativo, mas atendem exatamente ao mesmo propósito e função.
3. Você pode criar seus próprios padrões de bloco usando o editor e um plug-in como o Block Pattern Builder. Depois de salvar seus designs, você poderá reutilizá-los facilmente no futuro.

Para aprender outras maneiras de melhorar a forma como você trabalha no editor de blocos, confira nosso guia sobre como obter o máximo do editor de blocos e nossa coleção dos melhores plug-ins de blocos.