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

Criar sites em WordPress nunca foi tão fácil, e os padrões de blocos são uma grande parte disso. Quando os descobrimos pela primeira vez, vimos seu potencial para acelerar nosso fluxo de trabalho.

Agora usamos padrões de blocos como blocos reutilizáveis para CTAs e botões de ofertas de cupons – eles se tornaram essenciais para a forma como criamos conteúdo.

Os padrões de blocos simplificam a obtenção de designs com aparência profissional sem a necessidade de conhecimentos de codificação ou de web design.

São combinações pré-construídas de blocos que você pode inserir e personalizar rapidamente, dando-lhe uma vantagem em vez de começar do zero todas as vezes.

Quer esteja criando seu primeiro site WordPress ou queira trabalhar mais rápido, este guia para iniciantes mostrará como encontrar, usar e criar padrões de blocos que economizam tempo em todos os projetos.

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 coleções pré-projetadas de blocos que o ajudam a criar layouts personalizados de forma rápida e eficiente. Eles foram um divisor de águas para nós na criação de páginas com prazos apertados.

O editor de blocos do WordPress é intuitivo e permite que os usuários criem belos layouts com blocos de conteúdo. Esses blocos incluem texto, imagens, botões e outros elementos que podem ser organizados de acordo com suas necessidades.

No entanto, nem todos os usuários têm tempo ou habilidades de design para criar layouts do zero todas as vezes. Nós mesmos enfrentamos esse desafio, e é por isso que os padrões de blocos têm sido uma ferramenta tão valiosa em nosso fluxo de trabalho.

Os padrões de blocos oferecem uma solução fácil. O WordPress inclui uma variedade de padrões pré-construídos por padrão, o que simplifica a adição de layouts com aparência profissional em segundos.

Os temas populares do WordPress geralmente incluem seus próprios padrões personalizados. Esses padrões economizam ainda mais tempo, pois oferecem designs prontos e adaptados ao seu tema.

Os padrões podem incluir layouts como designs de várias colunas, combinações de mídia e texto, seções de chamada para ação, cabeçalhos e botões personalizados. Essa flexibilidade os torna adequados para uma variedade de tipos de conteúdo.

Você também pode encontrar mais padrões de blocos no site WordPress.org. Se você gosta de desenhar, pode até criar e compartilhar seus próprios padrões com a comunidade do WordPress.

A seguir, mostraremos como usar padrões de blocos no WordPress para criar layouts incríveis para o seu 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 de 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.

Lembre-se de que até mesmo alguns temas clássicos, como o Hestia, agora gerenciam padrões de forma semelhante aos temas do Full Site Editing, enquanto outros ainda usam a interface antiga mostrada na captura de tela abaixo.

Portanto, a maneira como você gerencia os padrões de blocos realmente depende do tema que está usando.

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.

Perguntas frequentes

Aqui estão algumas perguntas frequentes feitas por nossos leitores sobre padrões de blocos.

Onde posso encontrar outros padrões de blocos?

Além dos padrões padrão do WordPress, você pode explorar o Diretório de padrões do WordPress on-line para obter ainda mais opções criadas pela comunidade.

Os padrões de bloqueio podem tornar meu site mais lento?

Não, os padrões de blocos em si não afetam a velocidade do seu site. Eles são uma forma de estruturar o conteúdo, mas certifique-se de usar imagens e blocos otimizados para obter o melhor desempenho.

Para obter dicas, consulte nosso guia definitivo sobre velocidade e desempenho do WordPress.

Recursos adicionais

Se você quiser personalizar o design do seu site WordPress, os recursos a seguir serão úteis:

• Como criar facilmente um tema WordPress personalizado (sem nenhum código)
• Como reformular um site WordPress (guia para iniciantes)
• Problemas comuns do editor de blocos do WordPress e como corrigi-los
• Como estilizar o formulário de comentários do WordPress (guia definitivo)
• Como personalizar a cor do plano de fundo do Block Editor do WordPress

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.