Padrões de Bloco do WordPress: O que são e Como Utilizar

Primeiramente introduzidos no WordPress versão 5.5, os padrões de blocos abriram o caminho para que o editor Gutenberg se tornasse um construtor de páginas de larga escala. Os blocos ajudam os usuários do WordPress a construir sites complexos em pouco tempo, sem precisar de muito esforço e conhecimento técnico para criar e estruturar suas páginas.

Neste guia, vamos te mostrar como os padrões de blocos do WordPress funcionam e como eles se diferenciam dos blocos reutilizáveis. Além disso, você também vai aprender a utilizar os padrões no editor de blocos do WordPress, assim facilitando a sua tarefa de criar um site do zero.

Um exemplo de padrão de bloco do WordPress é o bloco de CTA (call to action, ou Chamada para Ação) do tema Twenty Twenty. Ele contém os blocos de cabeçalho, parágrafo e botões, que podem ser personalizados desde sua cor de fundo até o tamanho e alinhamento do texto. 

Padrão de Bloco vs Bloco Reutilizável

Tanto os padrões de blocos quanto os blocos reutilizáveis permitem que os usuários WordPress insiram rapidamente um layout ou modelo pré-pronto em suas páginas e posts. A principal diferença entre esses recursos é o que acontece quando você edita eles. 

Quaisquer alterações feitas em um bloco reutilizável serão aplicadas em todo post ou página no qual esse bloco já foi inserido. Enquanto isso, as alterações feitas em um padrão de bloco não afetam páginas e posts anteriores nos quais você utilizou tal elemento. 

Como exemplo, vamos supor que você deseja inserir um botão CTA em seus posts. Considere utilizar:

• Padrão de bloco – para duplicar o design básico do botão, mas ainda poder personalizar o conteúdo do CTA para cada post. 
• Bloco reutilizável – para adicionar exatamente o mesmo CTA em todos os seus posts. Só será necessário editar o bloco do CTA uma única vez para que todas as publicações contendo ele sejam automaticamente atualizadas. 

Adicionalmente, os usuários podem registrar padrões de blocos no diretório de Padrões, ou incluí-los em um plugin ou tema. Esses padrões pré-prontos ampliam suas opções de estilo e funcionalidades enquanto estiver criando o design de posts e páginas do site. 

Por Que Utilizar os Padrões de Blocos do WordPress?

Ao usar um padrão de bloco do WordPress, você terá os seguintes benefícios:

Economia de Tempo

Não há necessidade de criar itens individuais para inserir no seu site, nem personalizá-los através de códigos de programação repetidas vezes. Com os blocos do WordPress, os usuários possuem acesso direto a padrões comuns pré-definidos para diversos propósitos, sendo possível aplicá-los pelo editor de blocos em qualquer uma de suas páginas ou publicações.  

Se o padrão de bloco original não for adequado para o seu site ou não te agradar em termos de estilo, visite a Biblioteca de Padrões ou instale um plugin ou tema que ofereça múltiplas opções. 

Profissionalismo

Com os padrões de blocos, você consegue aproveitar as habilidades de desenvolvedores e designers profissionais, copiando seus padrões a partir do diretório oficial do WordPress. Há centenas de padrões de blocos pré-prontos que podem ser utilizados e combinados entre si, sem que você precise contratar uma agência ou designer para construir seu site e deixá-lo com uma aparência profissional. 

Capacidade de Reutilização

Salve os padrões de blocos que você utiliza com regularidade, assim não há a necessidade de recriá-los toda vez que for adicionar um post ou página ao site. É possível criar e reutilizar o mesmo padrão em diferentes áreas de um site WordPress, como cabeçalho, rodapé e barras laterais. Além disso, você ainda pode criar categorias para encontrar os padrões com mais agilidade no futuro. 

Personalização

Diferentemente dos blocos reutilizáveis, os padrões de blocos permitem que os usuários ajustem o design ou conteúdo do bloco em questão da forma que desejarem a cada vez que ele for adicionado. Isso oferece mais oportunidades aos desenvolvedores de temas, que podem disponibilizar mais seções personalizáveis para as páginas ao invés de ofertar um modelo de site completo — o que tende a confundir os clientes em termos de design e estilização. 

As Categorias de Padrões de Blocos WordPress

O editor de blocos Gutenberg conta com múltiplas categorias para organizar os padrões de bloco do WordPress. Listamos abaixo seis opções que o construtor oferece por padrão.

Alguns dos mesmos blocos podem estar disponíveis em categorias diferentes, já que os padrões incluem muitos elementos. Por exemplo, o bloco de tabela de preços está disponível tanto no padrão de colunas quanto no de botões, pois contém três caixas horizontais e botões de CTA.

Cabeçalho

O cabeçalho se refere à seção do topo da página de um site, e geralmente exibe os elementos de logo, título, menus de navegação e barra de pesquisa. Normalmente, essa categoria de padrão de bloco possui seis opções de estilo, com diferentes propósitos e designs. 

Colunas

Utilizando o bloco de colunas, você pode inserir mídias, textos e outros tipos de conteúdo em até três colunas na página. Nessa categoria, o WordPress oferece cinco padrões com diferentes tipos de bloco. Por exemplo, duas colunas de texto e uma de título, ou uma tabela de preços que consiste em três colunas com um título, um elemento de texto e um botão CTA. 

Botões

Os blocos de botões ajudam os usuários do WordPress a adicionar links de forma atrativa em seus conteúdos. A categoria de padrões de bloco de botões disponibiliza opções como tabela de preços, CTA simples com título, texto e botão, e links para redes sociais. 

Texto

O padrão de bloco de texto pode ser uma ótima maneira de começar quando você não sabe o que incluir para organizar seus conteúdos e construir suas páginas. Essa categoria já possui uma estrutura que você pode editar de acordo com as suas necessidades. Alguns exemplos de blocos disponibilizados pela categoria de padrão textual são citações ou imagens em cor sólida com uma descrição ao lado.

Galeria

O padrão de bloco de galeria pode ser muito útil para criar um portfólio digital de forma rápida. Essa categoria organiza múltiplas fotos em um formato atrativo, então você só precisa fazer o upload do arquivo e selecionar as imagens desejadas. Caso você não possua imagens para um post ou página, também é possível navegar e pesquisar na biblioteca de mídias do WordPress para ter acesso a milhares de imagens gratuitas para complementar seus conteúdos.

Query

Um bloco de query permite que você faça a exibição de posts baseada nos parâmetros que desejar, como por exemplo nas publicações mais populares ou aquelas mais recentes. Essas publicações podem ser blog posts normais ou produtos do WooCommerce. Geralmente, um padrão de bloco de query combina uma imagem destacada, um título, uma data e um trecho do conteúdo. Assim, a categoria de query pode ser uma ótima opção para começar a definir a estrutura de suas páginas dinâmicas e para reutilizá-la em outras páginas.

Como Utilizar Padrões de Blocos no WordPress 

Para utilizar um padrão de bloco do WordPress, siga os passos listados abaixo:

1. Acesse o editor Gutenberg do WordPress, clique no botão de adicionar bloco e acesse a aba de Padrões. 
2. Ali, você verá os padrões de blocos disponíveis. Note que eles são exibidos em diferentes categorias, como Em Destaque, Botões e Galeria. Você pode clicar nessas categorias para conferir as opções de padrões de blocos que cada uma delas oferece. 

3. Navegue por este menu para conferir todos os blocos disponíveis, ou clique no botão de Explorar todos os padrões para visualizar prévias em um tamanho maior através de uma janela de pop-up. Por fim, escolha o padrão de bloco que preferir. 

4. Arraste e solte o padrão de bloco na página, ou simplesmente clique nele para que seja automaticamente inserido na página do site.
5. Assim que tiver inserido o padrão, clique no bloco que você deseja personalizar, podendo alterar seu conteúdo e estilo. Essas opções de design podem ser visualizadas no menu lateral direito da tela. 
6. Clique na caixa do grupo ou do padrão como um todo para personalizá-lo de forma geral. Isso inclui redefini-lo e ajustar suas dimensões ou adicionar um contorno.
7. Adicione quantos padrões desejar na sua página, de acordo com as necessidades do seu site. Para remover um padrão de bloco, clique com o botão direito sobre a caixa que agrupa os elementos e então clique nos três pontinhos verticais. Entre as opções, selecione a de Remover para deletar o padrão de bloco em questão.

Como Encontrar Mais Padrões de Blocos para um Site WordPress 

Além desses padrões de blocos que originalmente acompanham o editor, você pode localizar ainda mais opções disponíveis no diretório de padrões, nos temas e nos plugins do WordPress. Confira mais detalhes de cada uma dessas opções a seguir:

Visite o Diretório de Padrões WordPress

Essa biblioteca de blocos gratuitos permite que os usuários encontrem e compartilhem padrões de blocos entre a comunidade do WordPress. Acesse o site do diretório e pesquise pelos padrões que desejar. É possível filtrar a visualização das opções de acordo com categorias, data ou popularidade. 

Clique no padrão do bloco que te interessar para ver sua listagem de páginas, fazer sua pré-visualização em diferentes tipos de tela e para copiar o padrão como um todo. 

Alternativamente, você pode utilizar o padrão de bloco diretamente em seu site ao passar o mouse sobre ele quando estiver navegando pelo diretório e clicar no botão de Copiar. Em seguida, basta colar o padrão em sua página ou post. 

Opte por um Tema WordPress que Ofereça mais Padrões de Blocos 

Muitos temas do WordPress contam com seus próprios padrões de blocos. Geralmente, todos esses padrões combinam com a estética do tema, criando um design coeso. Além disso, é possível acessar esses blocos por dentro do próprio editor do WordPress.

Alguns dos temas WordPress gratuitos que oferecem blocos personalizados são:

• Twenty Twenty
• Twenty Twenty-One
• Bricksy
• Naledi

Instale um Plugin

Além dos temas, múltiplos plugins do WordPress oferecem padrões de blocos personalizados. O Redux é uma das opções mais populares disponíveis hoje. Esse plugin conta com mais de mil padrões de blocos diferentes, que podem ser acessados pelos usuários através do próprio editor Gutenberg. O plugin Redux também possui sites de demonstração para ajudar a pré-visualizar cada estilo de bloco.

Como Criar Padrões de Blocos Personalizados WordPress

Apesar de ser possível copiar modelos pré-prontos da biblioteca de padrões de blocos do WordPress ou de um plugin, você também pode criar seus próprios padrões de blocos para que se encaixem melhor com o estilo e identidade visual do seu site. Abaixo, indicamos dois métodos diferentes para te ajudar a construir padrões de blocos sem precisar programar com códigos. 

Use um Plugin

O plugin Blockmeister é uma opção bastante popular para criar blocos personalizados. Com ele, você pode criar padrões customizados através do construtor integrado da ferramenta. Também dá para selecionar e combinar um ou mais blocos do editor de posts e páginas. Outra opção é organizar os padrões em categorias, adicionando palavras-chave para encontrá-los mais rapidamente quando precisar inserir uma categoria de bloco em seu site. 

O primeiro passo é instalar e ativar o plugin. Em seguida, você deverá visualizar uma nova aba em seu painel de controle WordPress chamada Block Patterns (Padrões de Bloco). Clique nessa opção e selecione Add News (Adicionar Novo) para adicionar um novo padrão de bloco. Você será redirecionado para o editor do WordPress, e qualquer mudança ou ajuste que fizer no padrão irá afetar apenas o padrão do bloco no seu repositório — isto é, não será automaticamente publicado como um novo post ou página.

Alternativamente, acesse uma página ou um post no qual você tenha criado um padrão de bloco personalizado. Depois, selecione os blocos do WordPress que você deseja incluir no padrão e clique no ícone dos três pontinhos localizado na barra de ferramentas. Ali, clique na opção Add to Block Patterns (Adicionar aos Padrões de Bloco) para adicionar o bloco aos seus padrões.

Dê um nome à sua criação para se lembrar do padrão de bloco personalizado, e a partir desse momento você poderá utilizar esse elemento como qualquer outro padrão de bloco da plataforma. 

O novo padrão de bloco tende a estar inserido na categoria Uncategorized (sem categoria) ou na seção do nome do seu blog. Para agrupar padrões de blocos, navegue até Block Patterns → All Patterns (Padrões de Blocos → Todos os Padrões) no seu painel de controle WordPress. A partir da lista de todos os seus padrões, selecione a opção Edit (Editar) no padrão de bloco que você deseja adicionar a uma categoria. 

Clique na aba Pattern (Padrão) na barra lateral direita e então selecione a opção Categories (Categorias). Depois, escolha a categoria adequada para o padrão de bloco que estiver configurando.  

Crie um Padrão de Bloco Através da Biblioteca de Padrões

Uma outra maneira de criar um padrão de bloco personalizado é acessando o diretório de Padrões e clicando no link Create a New Pattern.

Assim que entrar em sua conta WordPress, você verá um editor de blocos do WordPress que se parece muito com o tradicional. Adicione blocos para construir seu próprio padrão, e navegue pelas diversas opções de personalização para ajustar seu modelo. Salve o design como um rascunho caso queira manter esse padrão de bloco para você mesmo, ou clique no botão Submit (Enviar) para enviar à plataforma e assim compartilhar sua criação com a comunidade WordPress.

Basta copiar o padrão da sua página de padrões (My Patterns) e colá-lo no seu site quando desejar utilizá-lo. Você pode gerenciar todos os seus padrões de blocos personalizados nesta página, incluindo aqueles que você compartilhou, favoritou e salvou como rascunho.

Antes de compartilhar o padrão de bloco que você acabou de criar, não se esqueça de ler o Guia do Diretório de Padrões, e de adicionar uma descrição para a sua criação.

Como Criar Padrões de Blocos Manualmente

Além de instalar um plugin ou visitar a biblioteca de padrões, os usuários WordPress podem criar novos padrões de blocos manualmente. Um novo padrão pode ser criado e adicionado ao tema que está ativo no site através da edição do arquivo  functions.php.

Crie seu próprio padrão de bloco no editor de páginas ou posts. Então, selecionando os três pontinhos verticais no canto superior direito da tela, altere o modo de visualização do editor do WordPress para Code Editor (Editor de Código). Copie todo o código exibido e cole ele em um editor de textos comum do seu computador, como o Notepad.

Depois disso, acesse seu painel de controle WordPress, clique no menu de Aparência → Editor de Arquivos do Tema (Theme File Editor), e localize o arquivo functions.php.

Copie e cole o seguinte código no final do arquivo em questão: 

function function_name() {

  register_block_pattern(

    'slug',

    array(

        'title' => __( 'título do seu padrão', 'text-domain' ),

        'description' => _x( 'descrição do seu padrão', 'Block pattern description', 'text-domain' ),

        'content' => ‘código do seu padrão de bloco’,

    )

);

}

add_action( 'init', 'function_name' );

Nos campos respectivos, especifique o título e a descrição do seu próprio padrão de bloco, e substitua o texto do ‘código do seu padrão de bloco’ pelo código que você copiou anteriormente e colou no editor de texto Notepad. Lembre-se de manter as aspas únicas no início e ao final do texto/código em questão. Por fim, clique no botão de Atualizar Arquivo (Update File) para salvar as alterações feitas. 

Para conferir o resultado, você pode criar uma nova página e clicar no botão para adicionar blocos, selecionando a aba de Padrões (Patterns). Então, clique no menu suspenso e selecione a categoria Uncategorized (Sem Categoria). Você deverá visualizar seu novo padrão de bloco listado nesta seção.

Como Remover um Padrão de Bloco do WordPress

Você pode deletar ou descadastrar um padrão de bloco que tenha criado ao copiar e colar o código indicado abaixo no arquivo functions.php do seu tema:

function unregister_my_patterns() {

  unregister_block_pattern('título do seu padrão');

}

add_action( 'init', 'unregister_my_patterns' );

No nosso exemplo de padrão de bloco personalizado, utilizamos o nome Free trial CTA para registrar um padrão de botão de CTA para teste gratuito de um produto/serviço. 

Se o processo de remoção for concluído com sucesso, você não verá mais seu padrão personalizado como opção disponível no editor de blocos.

Também é possível deletar os padrões de blocos originais do WordPress, basta utilizar o prefixo core e inserir o nome do padrão de bloco em questão. Por exemplo, abaixo indicamos como descadastrar o bloco de tabela de preços: 

unregister_block_pattern( 'core/Pricing table' );

Se você deseja deletar todos os padrões de blocos que normalmente acompanham o WordPress, utilize o seguinte código:

remove_theme_support( 'core-block-patterns' );

Conclusão

Um padrão de bloco é um layout pré-projetado que consiste em um ou mais blocos do WordPress, auxiliando os usuários da plataforma na construção de seus sites de forma mais rápida e simples. Um padrão de bloco não é o mesmo que um bloco reutilizável, já que os usuários podem personalizar um padrão sem afetar os posts e páginas em que ele foi inserido anteriormente.  

Você pode encontrar os padrões de blocos tradicionais do WordPress no editor de Gutenberg, onde também pode inserir o padrão que desejar em uma página ou post. Se você deseja ter mais opções de estilo, visite o diretório de Padrões, instale e ative um plugin como o Redux ou pesquise por temas WordPress que ofereçam múltiplos padrões de blocos. 

Também é possível criar seu próprio padrão de bloco WordPress por meio do plugin Blockmeister ou através de um editor na biblioteca de Padrões. Alternativamente, um novo padrão de bloco pode ser construído ao inserir um código específico no seu arquivo functions.php. Agora que você já sabe o que é um padrão de bloco do WordPress, é hora de começar a utilizar essas ferramentas e acelerar o processo de design do seu site. Boa sorte!