Como Criar Padrões de Blocos do WordPress

O WordPress é uma poderosa ferramenta de publicação on-line que permite a qualquer pessoa criar e compartilhar facilmente conteúdo textual e/ou multimídia. Mas, além disso, também é uma excelente ferramenta profissional para designers, profissionais de marketing e desenvolvedores, independentemente de sua formação e habilidades.

Em resumo, o WordPress pode ser seu colega de trabalho mais valioso e ajudar você a ter sucesso em várias profissões.

Com isso em mente, publicamos uma série de artigos neste artigo para ajudar você a adquirir as habilidades necessárias para ser um desenvolvedor de WordPress:

• Como criar blocos personalizados no Gutenberg
• Como criar blocos dinâmicos no Gutenberg
• Como adicionar meta boxes e campos personalizados aos artigos no Gutenberg

E para aqueles que preferem conteúdo em vídeo, também temos um curso em vídeo gratuito: Desenvolvimento de blocos personalizados do Gutenberg.

E sim, você pode aumentar suas expectativas de carreira com as habilidades de desenvolvimento do Gutenberg, mas não precisa necessariamente ser um desenvolvedor para criar layouts avançados em seu site WordPress.

Os usuários de WordPress podem tirar proveito de recursos poderosos que lhes permitem criar facilmente layouts de blocos avançados sem complicações. Neste artigo, vamos concentrar nossa atenção nos padrões de blocos.

O que são Padrões de Bloco

Padrões de bloco são grupos pré-construídos de blocos que você pode adicionar ao seu conteúdo e personalizar usando as mesmas ferramentas de design disponíveis para os blocos incluídos.

Eles foram introduzidos pela primeira vez com o WordPress 5.5 para permitir que administradores de sites e criadores de conteúdo incluam estruturas complexas prontas para uso de blocos aninhados em seu conteúdo com apenas alguns cliques.

O WordPress oferece alguns padrões de blocos incorporados para você escolher ao criar seu conteúdo. Além disso, os temas de blocos geralmente oferecem mais padrões de blocos que você pode adicionar ao seu conteúdo diretamente do inseridor de blocos.

Por exemplo, o tema padrão atual, Twenty Twenty-Three, oferece os seguintes padrões de blocos:

• Call to Action
• Rodapé padrão
• 404 oculto
• Comentários ocultos
• Conteúdo oculto sem resultados
• Meta do artigo

E você não está limitado aos padrões fornecidos pelo WordPress ou pelo seu tema.

Primeiro, você encontrará toneladas de padrões de bloco prontos para uso no diretório oficial de Padrões do WordPress.

Além disso, você pode criar um número ilimitado de padrões personalizados usando o Patterns API ou as ferramentas de edição disponíveis dentro do editor de blocos. Você pode usar padrões personalizados internamente em seu site, exportá-los para outros sites ou compartilhá-los publicamente no diretório de Padrões.

Desde o WordPress 6.3, um novo sistema de padrões torna o processo de criação de padrões mais flexível e direto. Agora está mais claro que tipo de layout você está construindo e que efeito suas personalizações têm em todo o seu site.

Está se perguntando como esse sistema funciona e como aproveitar os novos recursos de edição adicionados ao WordPress 6.3? Vamos analisar.

Padrões de bloco pré-construídos

Padrões pré-construídos são padrões de blocos “não sincronizados”, o que significa que as alterações feitas em um padrão de bloco afetarão apenas a instância específica que você está editando e não serão aplicadas a nenhuma outra instância que você possa ter adicionado a outros artigos ou páginas do seu site.

Você pode usar padrões pré-construídos para incluir layouts de blocos que você personalizará no local, alterando imagens, texto, estilos ou adicionando/removendo elementos.

Os padrões de bloco são reutilizáveis, o que significa que, após criar seu padrão de bloco personalizado, você pode adicioná-lo em qualquer lugar do site e personalizá-lo com apenas alguns cliques usando os controles internos do editor.

Você pode navegar e inserir padrões de bloco pré-construídos a partir da aba Padrões no Inseridor de Blocos, vá até a seção de administração de Padrões no Editor do Site, ou o diretório de Padrões através do botão Explorar todos os padrões no Inseridor de Blocos.

Você encontrará toneladas de padrões na aba Padrões do inseridor de blocos, ou explore a biblioteca de Padrões de Bloco diretamente da interface do editor.

Você também pode visitar o site de Padrões de Blocos, escolher um padrão e clicar em Copy.

Após copiar um padrão, cole em seu conteúdo e pronto.

Você pode personalizar o grupo de blocos incluídos no padrão sem afetar o padrão registrado ou qualquer instância adicional dele em seu site.

Padrões de bloco personalizados

Como mencionamos acima, com o WordPress 6.3 o sistema de padrões foi otimizado e se tornou mais consistente.

Agora está mais fácil para o usuário criar padrões personalizados diretamente do editor de blocos e gerenciá-los a partir do painel do WordPress sem ter que lidar com código.

Agora você pode construir:

• Padrões de blocos sincronizados
• Padrões de blocos padrão

A diferença entre os dois tipos de padrões é que todas as alterações feitas em um padrão sincronizado serão aplicadas a cada ocorrência daquele bloco em todo o seu site.

Por outro lado, alterações feitas em um padrão de bloco padrão (não sincronizado) afetarão apenas aquela instância específica do padrão e não serão aplicadas a nenhuma outra instância que você possa ter adicionado a outros artigos ou páginas do seu site.

Do ponto de vista do desenvolvedor, padrões de blocos personalizados são registrados no banco de dados do WordPress como tipos de artigos personalizado como wp_block, e um campo meta wp_block_sync_status armazena o status de sincronização de um padrão.

Graças ao novo sistema de gerenciamento de padrões, agora você pode criar padrões de blocos sincronizados e não sincronizados diretamente do editor do site ou do artigo. Você só precisa projetar o layout do seu bloco, selecionar os blocos e clicar no ícone de três pontos na barra de ferramentas do bloco. Em seguida, escolha Criar padrão/bloco reutilizável no menu suspenso.

No exemplo abaixo, estamos criando um padrão sincronizado a partir de um Bloco de Grupo, um cabeçalho, um parágrafo, um botão e alguns espaçadores.

Quando você clica em Criar padrão/bloco reutilizável, é solicitado que você preencha um nome para o seu padrão e decida se ele é um padrão sincronizado ou não sincronizado.

E é isso. Agora seu padrão sincronizado está listado na seção de administração de Padrões do Editor do Site em Meus Padrões.

Aqui você pode visualizar seus padrões e verificar o status de sincronização do padrão.

Então você pode iniciar o Editor de Padrões e personalizar seu padrão de bloco.

Novamente, alterações feitas em padrões sincronizados afetam todas as ocorrências daquele padrão em todo o seu site. Alterações feitas em padrões padrão só afetarão futuras instâncias do padrão.

Isso é possível porque o WordPress lida com os dois tipos de padrões de maneira diferente. Para entender a diferença, crie um novo artigo e adicione dois padrões de blocos, um sincronizado e o outro padrão. Depois vá para o editor de código e verifique o código.

O bloco sincronizado é gerado pelo seguinte código:

<!-- wp:block {"ref":94} /-->

O WordPress buscará o artigo com o ID 94 para gerar o HTML a ser exibido na tela.

O bloco padrão (não sincronizado) não é identificado com um ID. Nesse caso, o editor de código contém toda a marcação dos blocos que compõem o padrão.

Padrões sincronizados são particularmente úteis para construir elementos que você pode querer incluir em várias páginas do seu site e/ou em diferentes sites. Pense em chamadas para ação, banners promocionais, tabelas de preços, e assim por diante.

No Inseridor de Blocos, padrões de blocos personalizados são listados em duas abas separadas. Padrões padrão são listados na aba Padrões embaixo da categoria Meus Padrões.

Padrões sincronizados são listados na aba Padrões Sincronizados (anteriormente Blocos Reutilizáveis).

Como mencionamos, o WordPress considera padrões de blocos personalizados como tipos de artigos wp_block e, como tal, armazena-os na tabela wp_posts.

Depois de criar seus padrões, você pode gerenciá-los a partir da tela de administração de Padrões de Blocos. Você pode acessar essa página de várias maneiras:

• Adicionando /wp-admin/edit.php?post_type=wp_block à URL do WordPress do seu site.
• Clicando no botão Gerenciar Meus Padrões no Inseridor de Blocos.
• Clicando no botão Gerenciar Todos os Meus Padrões no Editor do Site.

Uma vez lá, você pode:

• Editar, Descartar ou Exportar seu padrão como JSON,
• Importar padrões a partir de JSON,
• Criar novos padrões.

Todas as alterações feitas em um padrão sincronizado serão aplicadas a todas as ocorrências desse padrão em todo o seu site, independentemente da página de administração onde as alterações são feitas.

Partes de modelo

Antes da era Gutenberg, os temas e modelos do WordPress eram criados principalmente em PHP. O conhecimento sólido de temas secundários, hierarquia de modelos e as principais linguagens de desenvolvimento de frontend eram requisitos básicos para criar ou personalizar modelos. Mas as coisas mudaram com a introdução dos temas de bloco.

Nos temas em blocos e nos temas clássicos que optaram por esse recurso, você pode criar ou personalizar facilmente um modelo, ou parte de um modelo na interface do Site Editor. Não são necessárias habilidades de desenvolvimento, a menos, é claro, que você decida se tornar um desenvolvedor de temas.

Um modelo de bloco é uma lista de itens de bloco. Exemplos de itens de bloco são o título do site, a logo e a navegação.

As partes de modelo são seções específicas de uma página que podem ser visualizadas em vários locais, como um cabeçalho e um rodapé, e podem ser exibidas em todas as páginas do seu site WordPress.

Você pode criar e editar partes de modelos por meio da interface do editor do site, onde pode usar todas as ferramentas de edição disponíveis para blocos.

Mas, ao contrário dos padrões de blocos, partes de templates são destinadas para áreas do site que não mudam frequentemente.

Diferenças Entre Padrões Pré-construídos, Padrões Personalizados e Partes de Template

Para resumir, aqui estão as principais diferenças entre os três:

Padrões de Blocos Pré-construídos

• Padrões de Blocos Pré-construídos são layouts de blocos predefinidos que você pode adicionar ao seu conteúdo e personalizar usando as mesmas ferramentas dos blocos incluídos. As alterações feitas em um padrão de bloco só afetarão aquela única instância do padrão de bloco.
• Você pode copiar e colar padrões pré-construídos a partir do Diretório de Padrões.
• Você pode criar novos padrões e publicá-los no diretório Padrões.

Padrões de Blocos Personalizados

• Padrões de blocos personalizados são grupos de blocos sincronizados ou não sincronizados que você pode usar em qualquer artigo ou página do seu site.
• Padrões de blocos personalizados são armazenados na tabela wp_posts como tipo de artigos wp_block.
• Você pode importar e exportar padrões de blocos personalizados de e para outros sites.

Partes de modelo

• As partes de modelo são áreas específicas de uma página que podem ser exibidas em vários locais, incluindo cabeçalho, rodapé e barra lateral, recorrentes em várias páginas do seu site WordPress.
• Você pode criar e editar partes de modelos por meio da interface do editor do site.
• As partes de modelo são destinadas a áreas do site que não mudam com frequência.

Como criar Padrões de Blocos para temas e plugins

Como mencionamos anteriormente, o WordPress 6.3 introduziu um novo sistema de gerenciamento de padrões de blocos. Agora é mais fácil criar padrões de blocos sincronizados ou não sincronizados sem sair da interface do editor. E você também pode importar e exportar padrões personalizados com alguns cliques a partir do seu painel de controle do WordPress.

Mas o WordPress também oferece outras formas de criar padrões de blocos para desenvolvedores de temas e plugins.

Juntamente com o recurso de padrões de blocos, o WordPress 5.5 introduziu uma nova API para que os desenvolvedores “criem blocos de conteúdo pré-projetados que podem ser facilmente inseridos em artigos, páginas, tipos de artigos personalizados e modelos”. A nova API fornece as funções register_block_pattern e register_block_pattern_category para registrar padrões de blocos e categorias de padrões.

A partir do WordPress 6.0, você também pode registrar padrões de blocos com um arquivo PHP.

Portanto, no momento em que este artigo foi escrito, você tem duas maneiras de criar um padrão de bloco.

• Usando a função auxiliar register_block_pattern,
• Adicionando um arquivo PHP ao seu tema dentro de uma pasta de padrões.

Criando um padrão de bloco com um plugin

O primeiro método destina-se principalmente a desenvolvedores de WordPress, mas é simples o suficiente para ser usado também por desenvolvedores não avançados.

Se decidir usar o primeiro método, você poderá criar um padrão de bloco usando as duas novas funções register_block_pattern e register_block_pattern_category no arquivo PHP de um plugin ou no arquivo functions.php do seu tema.

Selecione ou registre uma categoria padrão

Primeiro, escolha uma categoria para o seu padrão. Com o WordPress 6.2, novas categorias de padrões foram adicionadas e algumas categorias existentes foram modificadas. No momento em que este texto foi escrito, você pode utilizar as seguintes categorias incorporadas:

• Destaque (featured)
• Artigos (posts)
• Texto (text)
• Galeria (gallery)
• Call to Action (call-to-action)
• Banners (banner)
• Cabeçalhos (header)
• Rodapés (footer)
• Equipe (team)
• Depoimentos (testimonials)
• Serviços (services)
• Portfólio (portfolio)
• Mídia (media)

Se o seu padrão de bloco não se enquadra em nenhuma das categorias padrão, você também pode registrar uma nova categoria usando a função register_block_pattern_category .

Essa função aceita dois argumentos:

• $category_name: Nome da categoria do padrão, incluindo o namespace.
• $category_properties: Uma array de propriedades de categoria.

Um exemplo ajudará você a entender melhor como registrar uma nova categoria de padrão:

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

Registro de um padrão de bloco

Após a categoria do padrão ter sido registrada, o próximo passo é registrar o próprio padrão de bloco. Você irá registrar o padrão de bloco usando a função auxiliar register_block_pattern da seguinte forma:

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

Essa função recebe dois argumentos:

• $pattern_name: Um nome legível por máquina na forma de namespace/pattern-name.
• $pattern_properties: Uma array de propriedades para o padrão.

Aqui está uma lista das propriedades de padrão atualmente disponíveis:

• title (obrigatório): Um título legível por humanos para o padrão.
• content (obrigatório): A marcação HTML para o padrão.
• description: Uma descrição é opcional, mas recomendada, pois ajuda os usuários a encontrar o padrão.
• categories: Uma array de uma ou mais categorias de padrão registradas. Você precisa registrar uma categoria antes de poder usá-la aqui (consulte a seção anterior).
• keywords: Uma array de palavras-chave que ajudam os usuários a encontrar o padrão.
• viewportWidth: Um número inteiro que especifica a largura do padrão na visualização.
• blockTypes: Uma array opcional de tipos de blocos que serão usados com o padrão.
• postTypes: Uma array de tipos de artigo que poderão usar o padrão.
• templateTypes: Uma array de tipos de modelo em que o padrão faz sentido (disponível desde o WordPress 6.2).
• inserter: Um booleano para determinar se o padrão deve ser visível no inseridor de blocos. Defina o valor como false para ocultar o padrão. Por padrão, todos os padrões aparecerão no inseridor de blocos.

Aqui está um exemplo de uso de register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

Neste código, utilizamos a propriedade postTypes para restringir a disponibilidade do padrão a artigos de blog regulares. No entanto, você tem a flexibilidade de definir um valor diferente para postTypes para torná-lo acessível para vários tipos de artigos. Por exemplo, se você tem um tipo de postagem de product e deseja limitar a disponibilidade do padrão apenas para esse tipo específico, você simplesmente escreverá:

'postTypes' => array( 'product' ),

Agora, crie um novo artigo (ou um tipo de artigo personalizado), abra o inseridor de blocos e clique no rótulo Patterns (Padrões). Você deverá encontrar uma nova categoria de padrão (My Pattern Category) com seu padrão de bloco personalizado. Sinta-se à vontade para explorar as propriedades dos padrões de bloco e personalizá-los conforme sua preferência.

Agora vamos nos aprofundar um pouco mais e tentar criar um padrão de bloco do mundo real.

Um exemplo do mundo real de padrão de bloco

Suponha que você queira criar um padrão de bloco que inclua um título, uma imagem, um parágrafo e um botão.

No editor, crie o layout para seu padrão de bloco, depois mude para o editor de código e copie a marcação.

Em nosso exemplo, temos o seguinte código:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Agora você pode otimizar esse código. Se estiver registrando o padrão de bloco com um plugin, você deverá alterar a URL da imagem da seguinte forma:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

Dessa forma, o WordPress não irá procurar a imagem em uploads, mas na pasta de imagens do seu plugin.

Você pode então usar a propriedade viewportWidth para fornecer uma melhor visualização do padrão no inseridor de blocos:

'viewportWidth' => 800,

Você também pode incluir uma array de palavras-chave para ajudar os usuários a encontrar seu padrão de bloco:

'keywords' => array( 'cta', 'demo', 'kinsta' ),

Outra opção para ajudar os usuários a encontrar o bloco nas pesquisas é adicionar uma array de tipos de blocos:

'blockTypes' => array( 'core/button' ),

Dessa forma, o padrão de bloco aparecerá nas sugestões quando um usuário pesquisar um dos blocos especificados.

A propriedade postTypes permite que você torne o padrão de bloco disponível somente para tipos de artigo específicos. Por exemplo, você pode tornar o padrão visível somente para o tipo de artigo product:

'postTypes' => array( 'product' ),

Por fim, você pode adicionar uma classe CSS ao wrapper do seu padrão de bloco.

Para fazer isso, você precisa criar um novo grupo com o atributo className:

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

Observe que você precisa adicionar o mesmo nome de classe ao seguinte elemento div.

Para que você tenha uma visão mais detalhada dos padrões de bloco e mais exemplos de código, consulte também Padrões de bloco no Manual de temas do WordPress.org.

Criando um padrão de bloco com um arquivo

Conforme mencionado acima, o WordPress 6.0 introduziu uma maneira nova e muito mais fácil de adicionar padrões de bloco aos seus temas de WordPress. Agora você pode registrar implicitamente os padrões de bloco declarando como arquivos PHP em uma pasta /patterns na raiz do seu tema.

Digamos que você queira registrar implicitamente o mesmo padrão de bloco criado na seção anterior em seu tema de bloco. Neste exemplo, usaremos o tema Twenty Twenty-Three.

Você pode definir os mesmos parâmetros do método anterior, mas incluí-los como um comentário no cabeçalho do arquivo. Além disso, em vez de usar nomes de parâmetros em camelCase, você separará as palavras com um espaço e, em vez de arrays, usará itens separados por vírgula em uma lista.

Primeiro, desative o plugin que você usou para registrar o padrão no exemplo anterior. Em seguida, crie um novo arquivo chamado my-block-pattern.php e inclua o seguinte cabeçalho:

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, Kinsta
 * Block Types: core/buttons
 */
?>

Em seguida, você adicionará o conteúdo ao seu padrão de bloco. Você pode usar a mesma marcação do nosso exemplo anterior, mas primeiro precisará alterá-la um pouco:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

O código HTML em si é essencialmente o mesmo do exemplo anterior. Apenas fizemos duas alterações.

A URL da imagem de espaço reservado agora é gerado pela função get_theme_file_uri:

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

Obviamente, você deve primeiro ter colocado a imagem placeholder.jpg na pasta /assets/images do seu tema.

A instrução a seguir gera o texto que você deseja traduzir.

<?php echo __( 'View plans', 'text-domain' ); ?>

Agora, salve o arquivo e crie um novo artigo. Seu padrão de bloco deve aparecer nas categorias Featured e Banners.

Remova o suporte, cancele o registro e oculte padrões de bloco

Em alguns cenários, você pode querer executar ações especiais em padrões de bloco. Por exemplo, você pode querer substituir um padrão de bloco principal por um padrão de bloco próprio ou cancelar o registro de uma categoria sob determinadas condições. Veja a seguir as operações que você pode executar.

1. Remova o suporte para todos os padrões de blocos principais

Primeiro, os desenvolvedores de temas podem remover o suporte para os padrões de bloco principais e fornecer seu próprio conjunto de padrões. Para remover o suporte aos padrões principais, você pode usar a funçãoremove_theme_support da seguinte maneira:

remove_theme_support( 'core-block-patterns' );

Recomenda-se que você anexe a função remove_theme_support ao hook after_setup_theme.

2. Cancele o registro de um único padrão de bloco

Você também pode cancelar o registro de um padrão de bloco específico, caso queira fornecer uma alternativa personalizada ou não queira que ele seja usado com o seu tema.

A API Patterns fornece a função unregister_block_pattern para isso:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

No caso de você também querer cancelar o registro de um padrão de bloco principal, você usará o seguinte:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Você usará unregister_block_pattern com a hook init.

3. Cancele o registro de uma categoria de padrão de bloco

Você também pode cancelar o registro de uma categoria de padrão, conectando a função unregister_block_pattern_category na hook init:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Crie e compartilhe padrões de blocos com o Pattern Creator

Você também pode criar seus padrões e compartilhá-los com a comunidade com uma ferramenta on-line gratuita: O Pattern Creator.

Se você tiver uma conta do WordPress.org, poderá acessar o Pattern Creator no Pattern directory.

Uma vez lá, clique em Create new pattern. Isso abrirá uma versão específica do padrão do editor de blocos que você pode usar para criar seus padrões de blocos.

Você também pode usar imagens gratuitas hospedadas pela Openverse library.

Quando estiver satisfeito com suas alterações, você poderá salvar o rascunho ou enviar o padrão para revisão.

Em seguida, você pode voltar ao diretório Patterns e selecionar My patterns. Lá você encontrará todos os seus padrões em três abas: All (Todos), Drafts (Rascunhos) e Pending Review (Revisão pendente).

Quando terminar de fazer as edições, você poderá compartilhar seu modelo com a comunidade. Basta clicar no botão Submit no canto superior direito do editor para enviar o modelo para revisão (não se esqueça de seguir as diretrizes do modelo antes de enviá-lo).

Resumo

O WordPress completou 20 anos e as estatísticas nos dizem que ele ainda é o CMS mais usado no mundo, com 63,3% de participação de mercado em maio de 2023.

Esses números comprovam que o WordPress é uma excelente ferramenta de publicação usada por milhares de profissionais, desenvolvedores e blogueiros ao redor do mundo.

Dedicar tempo e recursos para adquirir novas habilidades no desenvolvimento do WordPress e aprender sobre recursos avançados, como blocos personalizados ​​e padrões de bloco, pode ser um excelente investimento para sua carreira como profissional de marketing, web designer ou editor.

Agora é com você. Você já criou padrões de bloco? Você compartilhou algum com a comunidade? Adoraríamos ver suas criações. Deixe um comentário com um link ou seus pensamentos sobre padrões de bloco.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.

• Site
• Twitter