Padrões de bloco do WordPress

Publicados: 2022-06-21

Desde a introdução dos padrões de bloco, houve um aumento no interesse em torno dos padrões de bloco no ecossistema WordPress.

A adição de padrões de bloco ao Gutenberg foi bastante vantajosa para os usuários do WordPress. Isso ocorre porque agora você pode usar designs pré-fabricados ao projetar seu site e ajustá-los de acordo com sua preferência. Isso realmente ajuda a economizar tempo, em comparação com o design das páginas do seu site do zero.

Neste artigo, veremos quais são esses padrões de bloco, onde encontrá-los, como usá-los e como eles se comparam a blocos reutilizáveis.

Índice

O que são padrões de bloco

Usando padrões de bloco existentes

Padrões de bloco versus blocos reutilizáveis

Como criar seus próprios padrões de bloco

A Abordagem Manual
Através do diretório de padrões

Como criar um plug-in de padrões de bloco personalizados

Cancelando o registro de padrões de bloco

Cancelando o registro de categorias de padrão de bloco

Conclusão

O que são padrões de bloco

Padrões de bloco são uma coleção de blocos combinados para criar layouts predefinidos.

Um usuário do WordPress que, por exemplo, deseja configurar uma chamada para ação pode fazê-lo adicionando vários blocos à sua página, como os blocos Título, Parágrafo e Botão. Colocar os blocos para combinar com seu layout de design preferido pode, no entanto, não ser tão fácil, especialmente para usuários iniciantes do WordPress. Padrões de bloco são úteis nesse caso, pois os usuários do WordPress podem apenas adicionar o padrão de bloco Call To Action. Eles podem então editar os padrões de bloco para a visualização desejada.

Usando padrões de bloco existentes

O WordPress integra um editor de blocos (Gutenberg) que substitui o editor clássico. Dentro do editor, você pode facilmente adicionar padrões às suas páginas ou posts. Para começar, você precisará primeiro clicar no insersor de bloco.

Ao clicar nele, navegue até a aba Patterns ilustrada abaixo:

Em seguida, clique no botão “Explorar”

No pop-up renderizado, você terá vários padrões agrupados com base em várias categorias.

Para inserir um padrão na página ou post, você só precisa clicar nele e então ele deve ser renderizado dentro da sua página ou post.

Feito isso, você pode personalizar ainda mais o(s) bloco(s) dentro do padrão de acordo com sua preferência.

Você também pode encontrar mais padrões no diretório de padrões de bloco do wordpress.org.

Depois de encontrar um padrão de sua preferência, você só precisará copiá-lo clicando no botão de cópia exibido quando houver um evento de mouse sobre o padrão desejado.

Ao fazer isso, você precisará colar o padrão em sua página ou postagem.

Padrões de bloco versus blocos reutilizáveis

Um bloco reutilizável é uma coleção de um ou mais blocos que você pode usar posteriormente em sua postagem ou página.

Seguindo a definição acima, os blocos reutilizáveis parecem bastante semelhantes aos padrões de bloco no sentido de que ambos envolvem a adição de blocos pré-fabricados em um post ou página. No entanto, há uma diferença entre esses dois itens.

Quando se trata de blocos reutilizáveis, esses blocos não são muito flexíveis em comparação com os padrões de bloco. Os blocos reutilizáveis retêm uma única instância, independentemente da página ou postagem em que são aplicados. Isso significa que, se você adicionar um bloco reutilizável a várias páginas e decidir personalizar o bloco reutilizável em uma das páginas, as alterações serão aplicadas a todas as instâncias do bloco reutilizável, em todas as páginas.

Quanto aos padrões de bloco, por outro lado, uma vez que você adiciona um padrão de bloco a várias páginas e realiza algumas personalizações no padrão de bloco em uma página específica, as personalizações não são aplicadas aos padrões de bloco no restante das páginas. As instâncias de padrão de bloco são, portanto, diferentes.

Ao contrário dos blocos reutilizáveis, os padrões de bloco também podem ser registrados em seu tema ou código de plugin.

Os padrões de bloco são ideais se você deseja usar um layout específico que será aplicado a várias páginas ou postagens, de onde eles podem personalizá-los nas páginas ou postagens individuais, para corresponder ao contexto das respectivas páginas ou postagens.

Os blocos reutilizáveis, por outro lado, são ideais para cenários em que você deseja duplicar e usar o conteúdo exato em suas páginas. Isso pode ser, por exemplo, em anúncios de banner.

Como criar seus próprios padrões de bloco

Existem diferentes maneiras de criar seus próprios padrões de bloco. Neste artigo, abordaremos dois desses métodos, que são:

A Abordagem Manual
Através do diretório de padrões

A Abordagem Manual

Nesta abordagem, precisaremos primeiro criar a coleção de blocos dentro de uma página ou post e depois registrá-la como um padrão.

Criando uma coleção de blocos

Para configurar sua coleção de blocos, você precisará realizar o seguinte:

i) Primeiro crie uma nova página ou post

ii) Adicione os blocos desejados que devem formar o padrão ou então o layout dentro do post ou página. No nosso caso, adicionaremos um bloco de mídia e texto, bem como um bloco de botões e alguns estilos a eles.

Abaixo está um exemplo de exibição dos blocos:

Registrando um padrão de bloco

Para registrar a coleção de blocos como um padrão de bloco, você precisará realizar o seguinte:

i) Dentro da página ou post onde você tem a coleção de blocos, mude para o editor de código:

ii) Copie todos os códigos renderizados e cole-os no editor de texto desejado, como Bloco de Notas ou Texto Sublime:

iii) Em seguida, adicione o código abaixo ao arquivo functions.php dentro do seu tema filho:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );

Você precisará substituir o conteúdo “Preencha seu código copiado aqui” pelo código copiado em (ii) acima.

Abaixo está uma amostra do código final do nosso lado:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );

Feito isso, você pode visitar sua página ou postagem e, ao navegar até a seção de padrões, terá uma visão do novo padrão na seção “Destaques”, conforme ilustrado abaixo:

Registrando uma categoria de padrão

O WordPress fornece algumas categorias de padrões padrão que você pode usar ao registrar padrões. Estes incluem: Botões, Colunas, Galeria, Cabeçalhos, Texto, Consulta e Destaque.

Ao registrar padrões de bloco, uma abordagem melhor seria registrar padrões em categorias personalizadas. Para conseguir isso, você precisará primeiro registrar uma categoria de padrão.

Para registrar uma categoria de padrão, você precisará adicionar o seguinte código no arquivo functions.php do seu tema filho.

 function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );

Você pode alterar o rótulo da categoria para o de sua preferência. No exemplo de código acima, estamos usando o rótulo de categoria “Personalizado”.

Para que a categoria de padrão personalizado seja exibida em sua página ou postagem, você precisa associá-la a um padrão. No nosso caso, alteraremos o código de registro do padrão original para acomodar essa categoria de padrão. Para fazer isso, procure por esta linha de código:

 'categories' => array( 'featured' ),

Você precisará então alterar a categoria no local, que é “destaque” para “personalizada”, para que o código agora leia como:

 'categories' => array( 'custom' ),

O código final para registrar o padrão e a categoria de padrão em nosso caso seria:

 function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

Depois de acessar sua página ou postagem e tentar adicionar um padrão a ela, o padrão será renderizado em nossa categoria “Personalizada” recém-registrada, conforme visto abaixo:

Através do diretório de padrões

Em um caso em que você deseja criar um padrão acessível a todos no ecossistema WordPress, agora você pode fazer isso no Diretório de padrões.

Ao acessar o diretório de padrões, você precisará realizar o seguinte:

i) Faça login no diretório de padrões.

ii) Clique no link “criar um novo padrão”.

iii) Na próxima tela, adicione o título do seu padrão e comece a adicionar os blocos desejados. Você precisa adicionar pelo menos um mínimo de três blocos.

iv) Uma vez feito com a adição do bloco, você pode salvar o padrão como um rascunho.

v) Em seguida, verifique se seu padrão não viola as diretrizes descritas aqui: Diretrizes de padrão. Se tudo estiver bem, você pode enviar o padrão.

Você pode visualizar os padrões que possui clicando no link “meus padrões” ilustrado aqui:

Os padrões renderizados na seção "meus padrões" são aqueles que são rascunhos, padrões que você enviou e padrões aguardando revisão.

vi) Você pode então copiar o novo bloco e colá-lo em sua página ou post.

Como criar um plug-in de padrões de bloco personalizados

Em vez de ter o código para registrar seu padrão e categoria em seu arquivo functions.php, você pode optar por ter um plugin personalizado que pode ser usado para adicionar padrões e categorias de padrões. Para fazer isso, você precisará realizar o seguinte:

i) Acesse os arquivos do seu site através do seu painel de hospedagem ou alternativamente via FTP usando um software FTP como o Filezilla

ii) Navegue até o caminho do diretório wp-content > plugins

iii) Dentro do diretório de plugins, crie uma pasta com o nome “custom-patterns”

iv) Na pasta, crie um arquivo chamado custom-patterns.php

v) Adicione o seguinte comentário de cabeçalho dentro do arquivo:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */

Você pode personalizar o comentário do cabeçalho acima para corresponder à nomenclatura do plug-in desejado.

vi) Abaixo do comentário do cabeçalho, adicione seu código para registrar o padrão e a categoria. No nosso caso aqui, usaremos o código que criamos anteriormente para registrar nosso padrão e categoria personalizada. O código final será, portanto:

 <?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );

vii) Dentro de sua lista de plugins no painel, agora você deve ter uma visão do plugin na lista de plugins. Clique no link de ativação ao lado do nome do plug-in para ativar o plug-in

viii) Uma vez ativado, agora você deve ter uma visão do padrão de bloco e da categoria personalizada dentro do editor de blocos, conforme mostrado abaixo:

Cancelando o registro de padrões de bloco

É possível remover padrões de bloco que você registra. Se, por exemplo, você deseja remover o padrão de bloco “my-plugin/media-text-pattern” que registramos anteriormente, você precisará adicionar o seguinte código no arquivo functions.php do tema filho:

 function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );

No código acima, você precisará substituir “my-plugin/media-text-pattern” pelo nome do padrão que você registrou.

Cancelando o registro de categorias de padrão de bloco

Se você deseja apenas cancelar o registro de uma categoria de padrão e manter o padrão em si, você precisará adicionar o seguinte código no arquivo functions.php do tema filho:

 function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');

O código acima cancela o registro da categoria “personalizada” que adicionamos anteriormente. Você precisará substituir “custom” pela categoria que você registrou.

Conclusão

Neste artigo, analisamos o que são padrões de bloco, como usá-los, além de registrar e cancelar o registro de padrões e categorias de bloco. Padrões de bloco são bastante importantes ao projetar seu site com o editor de blocos. Eles facilitam o design de páginas e postagens dinâmicas em seu site com pouco esforço.

Esperamos que este artigo forneça informações relevantes sobre como usar padrões de bloqueio em seu site. Se você tiver alguma dúvida ou comentário, sinta-se à vontade para fazer um envio na seção de comentários abaixo.