Guia para iniciantes: Como usar os padrões de blocos do WordPress

Deseja aprender a usar os padrões de blocos do WordPress em seu site?

Os padrões de blocos permitem que você adicione rapidamente elementos de design comumente usados aos layouts de posts ou páginas.

Neste artigo, mostraremos como usar os padrões de blocos do WordPress e encontraremos mais padrões para usar em seu site.

Aqui estão os tópicos que abordaremos neste guia:

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

Os padrões de blocos do WordPress são uma coleção de elementos de design pré-fabricados que podem ser usados para criar layouts de conteúdo personalizados com mais rapidez.

O WordPress vem com um editor intuitivo comumente conhecido como editor de blocos. Ele permite que os usuários criem belos layouts para seus posts e páginas usando blocos para elementos de conteúdo comuns.

No entanto, nem todos os usuários do WordPress são designers ou querem gastar tempo criando layouts toda vez que precisam criar um post ou uma página.

Os padrões de bloco oferecem uma solução fácil para esse problema. O WordPress agora vem com vários padrões de blocos úteis por padrão.

Os temas populares do WordPress também fornecem seus próprios padrões que você pode usar ao escrever o conteúdo.

Esses padrões incluem itens como layouts pré-criados de várias colunas, padrões de mídia e texto, padrões de chamada para ação, cabeçalhos, botões e muito mais.

Você pode encontrar mais padrões no site WordPress.org, e pode até mesmo criar e compartilhar seus próprios padrões.

A seguir, vamos examinar como usar facilmente os padrões de blocos no WordPress para criar um belo conteúdo para o site.

Como usar padrões de bloco no WordPress

Por padrão, o WordPress vem com vários padrões de blocos úteis que você pode usar em seu site. Seu tema do WordPress e alguns plug-ins também podem adicionar seus próprios padrões.

Para usar padrões de bloco, você precisa editar o post ou a página do WordPress em que deseja usar o padrão de bloco.

Na tela de edição da postagem, clique no botão Add Block [+] para abrir o inseridor de blocos. A partir daí, mude para a guia “Patterns” (Padrões) para visualizar os padrões de blocos disponíveis.

Você pode rolar a tela para baixo para ver os padrões de blocos disponíveis.

Você também pode visualizar padrões de blocos em diferentes categorias, como em destaque, botões, colunas, cabeçalhos e muito mais.

Como alternativa, você também pode clicar no botão “Explorar todos os padrões” para visualizar os padrões de blocos.

Aqui, você pode ver visualizações maiores em um pop-up.

Quando encontrar um padrão que queira experimentar, basta clicar para inseri-lo na área de conteúdo do seu post ou página.

O padrão aparecerá no editor de conteúdo com conteúdo de espaço reservado que você pode editar e substituir pelo seu próprio conteúdo.

Basta apontar e clicar em qualquer bloco dentro do padrão para editar e alterar seu conteúdo de acordo com suas necessidades.

Você ainda terá todas as opções que normalmente tem para cada bloco. Por exemplo, se for um bloco de capa, você poderá alterar a cor da capa ou a imagem de fundo.

Você pode adicionar quantos padrões forem necessários para o post ou a página do seu blog. Você também pode excluir um padrão para removê-lo de um post ou página, da mesma forma que excluiria qualquer bloco do WordPress.

Usando padrões de blocos, você pode criar rapidamente belos layouts para seus artigos e site do WordPress.

Por fim, os padrões de blocos ajudam a economizar o tempo que você gastaria organizando os blocos manualmente sempre que precisasse adicionar um cabeçalho, uma galeria, botões e muito mais.

Como criar padrões no Block Editor

O WordPress facilita muito a criação de padrões no editor de blocos que você pode reutilizar posteriormente.

Ao editar um post ou uma página, basta selecionar os blocos que deseja incluir em seu padrão e clicar em “Create pattern” (Criar padrão).

Você pode selecionar vários blocos pressionando a tecla Shift no teclado e clicando neles.

No entanto, se os blocos estiverem organizados de uma forma que dificulte sua seleção, você poderá usar a visualização de lista na guia Visão geral do documento.

A criação de um padrão abrirá uma janela pop-up.

Você precisará fornecer um nome para seu padrão e escolher uma categoria.

Abaixo disso, você verá uma opção para manter o padrão sincronizado ou não sincronizado.

Padrões sincronizados: Quando você ou outros usuários editarem o padrão, essas alterações serão salvas na próxima vez que o padrão for usado.

Padrões não sincronizados: As alterações feitas nesses padrões depois de inseri-los em um post ou página não afetarão o padrão original.

Clique no botão “Create” (Criar) para salvar seu padrão.

Da próxima vez que quiser usar esse padrão, basta procurar seu nome ou categoria no insersor de blocos.

Como criar padrões no Site Editor

Se estiver usando um tema de blocos com suporte total ao editor de sites, você também poderá criar padrões no editor de sites.

Abra o editor do site visitando a página Appearance ” Editor.

Agora você chegará à interface do editor de sites.

Clique em “Patterns” (Padrões) na barra lateral esquerda para continuar.

Você verá todos os padrões e categorias disponíveis.

Para criar um novo padrão, clique no botão Adicionar [+] e selecione “Criar padrão”.

Isso abrirá uma janela pop-up em que você precisará fornecer um nome para o padrão, escolher uma categoria e decidir se deseja que o padrão seja sincronizado ou não sincronizado.

Clique em “Create” para continuar.

O WordPress criará uma tela em branco para você criar seu padrão.

A partir daí, você pode adicionar blocos para criar seu padrão.

Quando terminar, não se esqueça de clicar no botão “Save” (Salvar) para armazenar seu padrão.

Gerenciando padrões no WordPress

Se estiver usando um tema de blocos com suporte total ao editor de sites, você poderá gerenciar padrões no editor de sites.

Abra o editor do site visitando a página Appearance ” Editor.

Na tela Patterns (Padrões), você pode clicar em um padrão para editá-lo. Você também pode clicar no menu de três pontos ao lado de um padrão para duplicá-lo, exportá-lo ou excluí-lo.

Para gerenciar todos os seus padrões, clique na guia “Manage all of my patterns” (Gerenciar todos os meus padrões) na barra lateral.

Isso mostrará uma lista de todos os seus padrões.

Agora, você pode editá-los, exportá-los ou excluí-los.

Se estiver usando um tema clássico (temas do WordPress que não são compatíveis com o editor de site completo), você poderá gerenciar os padrões visitando a página Appearance ” Patterns.

A partir daí, você pode adicionar, excluir e exportar seus padrões de blocos.

Como encontrar mais padrões de blocos para usar em seu site

Por padrão, o WordPress vem com alguns padrões de blocos comumente usados. Os temas do WordPress também podem adicionar seus próprios padrões ao seu site.

No entanto, você pode encontrar muito mais padrões de blocos do que os disponíveis no inseridor de blocos em seu site.

Basta acessar o site WordPress Patterns Directory para ver muitos outros padrões de blocos.

Aqui, você encontrará padrões de blocos enviados pela comunidade do WordPress.

Para usar um desses padrões de blocos, basta clicar para visualizar o padrão e, em seguida, clicar no botão “Copiar padrão”.

Em seguida, você precisa voltar ao seu blog do WordPress e editar o post ou a página em que deseja inserir esse padrão de bloco.

Na tela de edição, basta clicar com o botão direito do mouse e selecionar “Colar” no menu do navegador ou pressionar CTRL+V (Command + V no Mac).

Como criar e compartilhar seus padrões de blocos

Deseja criar seus próprios padrões de blocos do WordPress e compartilhá-los com o mundo?

Com o WordPress, é muito fácil criar padrões de blocos e usá-los em seus próprios sites ou compartilhá-los com todos os usuários do WordPress em todo o mundo.

Basta acessar o site do WordPress Pattern Directory e clicar no link “New Pattern”.

Observação: você precisará fazer login ou criar uma conta gratuita no WordPress.org para salvar seus padrões.

Depois de fazer login, você chegará à página do editor de padrão de bloco. Ele é idêntico ao editor de blocos padrão do WordPress e você pode usá-lo para criar seu padrão.

Basta adicionar blocos para criar o layout do padrão.

Você pode usar blocos de layout como grupo, capa, galeria e outros para organizar seu layout.

Há também imagens livres de royalties disponíveis para uso em seus blocos de mídia. A biblioteca de mídia do WordPress permitirá que você encontre e use facilmente essas imagens em seus padrões.

Quando estiver satisfeito com seu padrão de bloco, você poderá salvá-lo como rascunho ou enviá-lo para o diretório de padrões.

Antes de enviar seu padrão de bloco para o diretório de padrões, certifique-se de ter lido as diretrizes do diretório de padrões de bloco.

Você pode gerenciar todos os seus padrões de blocos clicando no link “My Patterns” (Meus padrões). Ele mostrará todos os padrões de blocos que você compartilhou, padrões de rascunho e padrões que você favoritou.

Se quiser criar padrões de blocos apenas para seu próprio uso, você poderá salvá-los como rascunhos. Depois disso, copie e cole-os da página My Patterns em seu site do WordPress.

Criação manual de padrões de blocos do WordPress

Você também pode criar padrões de blocos manualmente e adicioná-los ao seu tema do WordPress ou a um plug-in de snippets personalizados, como o WPCode.

Basta criar um novo post ou página no WordPress. Na área de conteúdo, use blocos para criar um layout personalizado ou uma coleção de blocos que você deseja salvar como um padrão.

Depois disso, mude para o modo Code Editor.

A partir daqui, você precisa copiar todo o conteúdo que vê no editor de código.

Em seguida, abra um editor de texto simples, como o Bloco de Notas, e cole esse código. Você precisará dele na próxima etapa.

Agora, você está pronto para registrar seus blocos como um padrão.

Para fazer isso, basta copiar e colar o código a seguir no arquivo functions.php do seu tema ou em um plug-in de trechos de código, como o plug-in gratuito WPCode (recomendado).

Para obter mais detalhes, aqui está o guia completo para adicionar código personalizado no WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Agora, copie e cole os dados brutos do bloco que você copiou anteriormente como o valor do parâmetro de conteúdo. Em outras palavras, você precisará substituir o texto que diz “Seu código de conteúdo de bloco vai aqui” pelo seu código de bloco. Não se esqueça de deixar as aspas simples ao redor do texto no lugar.

Por fim, não se esqueça de alterar o título e a descrição para os seus próprios e salvar as alterações.

Agora você pode acessar seu site e editar um post ou uma página. O padrão de bloco recém-registrado aparecerá no inseridor de blocos.

Como remover um padrão de bloco no WordPress

Você pode remover ou cancelar facilmente o registro de qualquer padrão de bloco no WordPress. Digamos que você queira remover o padrão de bloco que criou no exemplo acima.

Tudo o que você precisa fazer é copiar e colar o seguinte código no arquivo functions.php do seu tema ou no WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

Neste exemplo, "my-plugin/my-awesome-pattern" é o nome do padrão que usamos ao registrá-lo.

Você pode usar esse código para cancelar o registro de qualquer padrão de bloco criado pelo seu tema ou por um plug-in. Tudo o que você precisa saber é o nome usado para registrar o padrão.

Remover os padrões principais do WordPress

Os padrões principais do WordPress estão disponíveis para todos os usuários do WordPress. Isso significa que eles podem ser usados em excesso e podem nem mesmo combinar com o restante do seu tema do WordPress.

Se não quiser usar um padrão, você pode simplesmente evitar adicioná-lo ao seu conteúdo. No entanto, se você administra um site WordPress com vários autores, talvez queira impedir que todos os usuários usem esses padrões principais.

Para remover todos os padrões principais do WordPress, você precisa adicionar o seguinte código ao arquivo de funções do seu tema ou ao WPCode:

remove_theme_support( 'core-block-patterns' );

O que aconteceu com os blocos reutilizáveis?

Os padrões de blocos e os blocos reutilizáveis tinham como objetivo resolver um problema semelhante: oferecer aos usuários opções para adicionar facilmente blocos usados com frequência.

Para corrigir isso, a equipe do Core WordPress mesclou blocos reutilizáveis em padrões.

Para ter a mesma funcionalidade dos blocos reutilizáveis, agora você pode usar Synced Patterns. Quando você ou outros usuários editarem o padrão, essas alterações serão salvas na próxima vez que o padrão for usado.

Esperamos que este guia tenha ajudado você a aprender a usar os padrões de blocos do WordPress em seu site. Talvez você também queira ver nosso guia sobre como dominar o editor de blocos do WordPress ou dar uma olhada nesses atalhos úteis do WordPress para ser mais produtivo.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.