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 bloco do WordPress?
• Como usar padrões de bloco no WordPress
• Como encontrar mais padrões de blocos para usar em seu site
• Como criar e compartilhar seus próprios padrões de blocos
• Criação manual de padrões de blocos do WordPress
• Remover um padrão de bloco no WordPress
• Qual é a diferença entre blocos reutilizáveis e padrões de blocos?

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 você pode usar 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.

É possível encontrar ainda mais padrões no site WordPress.org, e você pode até mesmo criar e compartilhar seus próprios padrões.

Dito isso, vamos dar uma olhada em como usar facilmente os padrões de blocos no WordPress para criar um belo conteúdo para o seu site.

Tutorial em vídeo

Se você preferir instruções por escrito, continue lendo.

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 plugins 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í, alterne 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 destaque, botões, colunas, cabeçalho e muito mais.

Como alternativa, você também pode clicar no botão Explorar 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.

Depois disso, você pode simplesmente apontar e clicar em qualquer bloco dentro do padrão para editar e alterar seu conteúdo de acordo com suas próprias 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 simplesmente excluir um padrão para removê-lo de um post ou página, como faria com 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 para organizar manualmente os blocos sempre que precisasse adicionar um cabeçalho, uma galeria, botões e muito mais.

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 do seu site.

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

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

Para usar um desses padrões de bloco, basta passar o mouse sobre o padrão de bloco e clicar no botão Copy (Copiar).

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 da postagem, 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 próprios padrões de blocos

Deseja criar e compartilhar 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 Diretório de Padrões do WordPress e clicar no link “Create New Pattern” (Criar novo padrão).

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, basta copiá-los e colá-los 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 ao plugin de snippets personalizados.

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 (Editor de código) e copie todo o conteúdo que você vê no editor de código.

Em seguida, abra um editor de texto simples, como o Bloco de Notas, e cole esse código nele. 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 específico do site. Se você nunca inseriu um código em seu arquivo functions.php, recomendamos usar o plug-in gratuito WPCode para adicioná-lo.

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 dos blocos 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 o post ou a página. Agora você poderá ver o padrão de bloco recém-registrado no insersor de blocos.

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 em um plug-in específico do site.

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 corresponder ao restante do seu tema do WordPress.

Se não quiser usar um padrão, você pode simplesmente evitar adicioná-lo ao seu conteúdo. Entretanto, se você tiver 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 a um plug-in específico do site.

remove_theme_support( 'core-block-patterns' );

Qual é a diferença entre blocos reutilizáveis e padrões de blocos?

Tanto os padrões de blocos quanto os blocos reutilizáveis pretendem resolver um problema semelhante: oferecer aos usuários opções para adicionar facilmente blocos usados com frequência.

No entanto, eles são bem diferentes um do outro.

Por exemplo, os blocos reutilizáveis podem ser editados e salvos diretamente no editor de postagens, mas não são tão flexíveis quanto os padrões de blocos.

Uma grande diferença é que, se você fizer uma alteração em um bloco reutilizável, o bloco será alterado em todos os posts ou páginas em que você o utilizou.

Para obter mais detalhes, consulte nosso tutorial sobre como usar blocos reutilizáveis no WordPress.

Por outro lado, se você inserir um padrão e editá-lo, essas alterações se aplicarão somente ao post ou à página em que você adicionou esse padrão.

Os padrões de blocos também podem ser registrados pelo seu tema ou plug-ins do WordPress, como os plug-ins de blocos. Isso permite que esses desenvolvedores ofereçam a você muito mais opções de design para criar layouts de posts e páginas.

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 adicionar código personalizado no WordPress ou o guia para iniciantes sobre como colar trechos da Web no WordPress

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.