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

Construir sites 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 oferta de cupons — eles se tornaram essenciais para a forma como criamos conteúdo.

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

Eles são combinações pré-construídas de blocos que você pode inserir e personalizar rapidamente, dando-lhe um ponto de partida em vez de começar do zero a cada vez.

Se você está construindo seu primeiro site WordPress ou quer trabalhar mais rápido, este guia para iniciantes mostrará como encontrar, usar e criar padrões de blocos que economizam tempo em cada projeto.

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

• O que são padrões de blocos WordPress?
• Como Usar Padrões de Blocos no WordPress
• Como criar padrões no Editor de Blocos
• Como criar padrões no Editor do Site
• Gerenciando padrões no WordPress
• Encontrando mais padrões de blocos para usar em seu site
• Como criar e compartilhar seus padrões de blocos
• Criando padrões de blocos WordPress manualmente
• Como remover um padrão de bloco no WordPress
• O que aconteceu com os blocos reutilizáveis?
• Perguntas Frequentes
• Recursos Adicionais

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

Padrões de blocos WordPress são coleções pré-desenhadas de blocos que ajudam você a criar layouts personalizados de forma rápida e eficiente. Eles mudaram o jogo para nós ao construir páginas com prazos apertados.

O editor de blocos no WordPress é intuitivo e permite que os usuários criem layouts bonitos com blocos de conteúdo. Estes incluem texto, imagens, botões e outros elementos que você pode organizar para atender às 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, tornando simples adicionar layouts com aparência profissional em segundos.

Temas populares do WordPress frequentemente incluem seus próprios padrões personalizados. Esses padrões economizam ainda mais tempo, fornecendo 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 design, pode até criar e compartilhar seus próprios padrões com a comunidade WordPress.

Em seguida, mostraremos como usar padrões de blocos no WordPress para criar layouts impressionantes para o seu site.

Como Usar Padrões de Blocos 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 plugins também podem adicionar seus próprios padrões.

Para usar padrões de blocos, você precisa editar a postagem ou página do WordPress onde você deseja usar o padrão de bloco.

Na tela de edição de postagem, clique no botão Adicionar Bloco [+] para abrir o inseridor de blocos. A partir daqui, mude para a aba 'Padrões' para ver os padrões de blocos disponíveis.

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

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

Alternativamente, você também pode clicar no botão 'Explorar todos os padrões' para ver os padrões de blocos.

Aqui, você pode ver prévias maiores em um pop-up.

Assim que encontrar um padrão que deseja experimentar, basta clicar para inseri-lo na área de conteúdo de sua postagem 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.

Simplesmente aponte e clique 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ê pode alterar a cor da capa ou a imagem de fundo.

Você pode adicionar quantos padrões precisar para sua postagem de blog ou página. Você também pode excluir um padrão para removê-lo de uma postagem ou página, assim como excluiria qualquer bloco do WordPress.

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

Em última análise, os padrões de blocos ajudam a economizar tempo que você gastaria organizando blocos manualmente toda vez que precisar adicionar um cabeçalho, galeria, botões e muito mais.

Como criar padrões no Editor de Blocos

O WordPress torna super fácil criar padrões no editor de blocos que você pode reutilizar mais tarde.

Ao editar uma postagem ou página, basta selecionar os blocos que você deseja incluir em seu padrão e clicar em ‘Criar padrão’.

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

No entanto, se seus blocos estiverem organizados de uma forma que dificulte a seleção, você pode usar a visualização de Lista na aba Visão Geral do Documento.

Criar um padrão abrirá um pop-up.

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

Abaixo disso, você verá um alternador 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: Alterações feitas nesses padrões após inseri-los em uma postagem ou página não afetarão o padrão original.

Clique no botão ‘Criar’ para salvar seu padrão.

Na próxima vez que você quiser usar esse padrão, basta procurar seu nome ou categoria no inseridor de blocos.

Como criar padrões no Editor do Site

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

Abra o editor de site visitando a página Aparência » Editor.

Agora você estará na interface do editor de site.

Clique em ‘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, em seguida, selecione ‘Criar padrão’.

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

Clique em ‘Criar’ para continuar.

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

A partir daqui, você pode adicionar blocos para projetar seu padrão.

Quando terminar, não se esqueça de clicar no botão ‘Salvar’ para armazenar seu padrão.

Gerenciando padrões no WordPress

Se você estiver usando um tema de bloco com suporte ao editor completo do site, poderá gerenciar padrões no editor do site.

Abra o editor de site visitando a página Aparência » Editor.

Na tela 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 aba ‘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 você estiver usando um tema clássico (temas do WordPress que não suportam o editor completo do site), você pode gerenciar padrões visitando a página Aparência » Padrões.

A partir daqui, você pode adicionar, excluir e exportar seus padrões de bloco.

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

Portanto, como você gerencia padrões de bloco realmente depende do tema que você está usando.

Encontrando mais padrões de blocos para usar em seu site

Por padrão, o WordPress vem com alguns padrões de bloco 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 do Diretório de Padrões do WordPress para ver muitos outros padrões de blocos.

Aqui, você encontrará padrões de blocos enviados pela comunidade 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 WordPress e editar a postagem ou página onde deseja inserir este padrão de bloco.

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

Como criar e compartilhar seus padrões de blocos

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

O WordPress torna super 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 visitar o site do Diretório de Padrões do WordPress e clicar no link 'Novo Padrão'.

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

Uma vez logado, você chegará à página do editor de padrões de blocos. Ela é idêntica ao editor de blocos padrão do WordPress, e você pode usá-la para criar seu padrão.

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

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

Há também imagens isentas 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.

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

Antes de poder 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.

Você pode gerenciar todos os seus padrões de bloco clicando no link ‘Meus Padrões’. Ele mostrará todos os padrões de bloco que você compartilhou, os rascunhos e os padrões que você favoritou.

Se você deseja criar padrões de bloco apenas para seu uso pessoal, pode salvá-los como rascunhos. Depois disso, copie e cole-os da página Meus Padrões para o seu site WordPress.

Criando padrões de blocos WordPress manualmente

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

Simplesmente crie uma nova postagem 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 Editor de Código.

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, simplesmente copie e cole o seguinte código no arquivo functions.php do seu tema ou em um plugin de snippets de código como o plugin gratuito WPCode (recomendado).

Para 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 valor para o parâmetro content. 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. Certifique-se de manter as aspas simples ao redor do texto.

Por último, não se esqueça de alterar o título e a descrição para os seus e salvar suas alterações.

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

Como remover um padrão de bloco no WordPress

Você pode facilmente remover ou cancelar o registro de qualquer padrão de bloco no WordPress. Vamos dizer que você queira remover o padrão de bloco que você 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 este código para cancelar o registro de qualquer padrão de bloco criado pelo seu tema ou por um plugin. Tudo o que você precisa saber é o nome usado para registrar o padrão.

Remover Padrões do Núcleo do WordPress

Os padrões do núcleo 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 WordPress.

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

Para remover todos os padrões do núcleo do WordPress, você precisa adicionar o seguinte código ao arquivo functions do seu tema ou ao WPCode:

remove_theme_support( 'core-block-patterns' );

O que aconteceu com os blocos reutilizáveis?

Padrões de blocos e blocos reutilizáveis visavam resolver um problema semelhante: fornecer aos usuários opções para adicionar facilmente blocos comumente usados.

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

Para ter a mesma funcionalidade dos blocos reutilizáveis, você pode usar 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.

Perguntas Frequentes

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

Onde posso encontrar padrões de blocos adicionais?

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

Padrões de blocos podem deixar meu site 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 estar usando imagens e blocos otimizados para obter o melhor desempenho.

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

Recursos Adicionais

Se você deseja personalizar o design do seu site WordPress, os seguintes recursos serão úteis:

• Como Criar Facilmente um Tema Personalizado do WordPress (Sem Código)
• Como Redesenhar um Site WordPress (Guia para Iniciantes)
• Problemas Comuns do Editor de Blocos do WordPress e Como Resolvê-los
• Como Estilizar o Formulário de Comentários do WordPress (Guia Definitivo)
• Como Personalizar a Cor de Fundo do Editor de Blocos do WordPress

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

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