O WordPress é uma poderosa ferramenta de publicação on-line que permite a qualquer pessoa criar e compartilhar conteúdo textual e multimídia com facilidade. Além disso, também é uma excelente ferramenta profissional para designers, profissionais de marketing e desenvolvedores, independentemente do nível de experiência.
Em resumo, o WordPress pode ser um grande aliado para o seu sucesso em diversas áreas profissionais.
Pensando nisso, publicamos uma série de artigos neste blog para ajudá-lo a adquirir as habilidades necessárias para se tornar um desenvolvedor WordPress:
- Como criar blocos personalizados do Gutenberg
- Como criar blocos dinâmicos para o Gutenberg
- Como adicionar meta boxes e campos personalizados em 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 do WordPress podem tirar proveito de recursos poderosos que lhes permitem criar facilmente layouts de blocos avançados sem complicações. Os usuários do WordPress podem aproveitar recursos poderosos para criar layouts sofisticados de maneira intuitiva. Neste artigo, vamos focar na criação de Padrões de Blocos.
O que são padrões de blocos?
Os padrões de blocos 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 no WordPress 5.5 para permitir que os 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.
Os temas de blocos geralmente fornecem alguns padrões de blocos que você pode adicionar ao seu conteúdo diretamente do inseridor de blocos. O novo tema padrão incluído no WordPress 6.7, Twenty Twenty-Five, inclui mais de 70 padrões de blocos.
E você não está limitado aos padrões fornecidos pelo seu tema.
Primeiro, você encontrará vários padrões de blocos prontos para uso na galeria oficial de padrões do WordPress.
Além disso, você pode criar um número ilimitado de padrões usando a API de Padrões ou as ferramentas de edição disponíveis no editor de blocos. Você pode usar padrões personalizados internamente no seu site, exportá-los para outros sites ou compartilhá-los publicamente na galeria 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 intuitivo. Agora, fica mais claro o tipo de layout que você está construindo e o impacto das suas personalizações em todo o site.
- Padrões de blocos sincronizados
- Padrões de blocos padrão (não sincronizados)
A principal diferença entre os dois tipos é que todas as alterações feitas em um padrão sincronizado são aplicadas a todas as instâncias desse padrão em todo o site. Por outro lado, as alterações feitas em um padrão de bloco padrão afetam apenas uma instância específica do padrão.
Mas os padrões de blocos vão muito além disso. Quer entender melhor como esse sistema funciona e como aproveitar os novos recursos de edição das versões mais recentes do WordPress? Vamos explorar isso em detalhes.
Padrões de blocos pré-construídos
Os padrões pré-construídos são padrões de bloco “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 podem ser personalizados no local, alterando imagens, texto, estilos ou adicionando/removendo elementos.
Depois de criar um padrão de bloco personalizado, você pode adicioná-lo em qualquer lugar do seu site e personalizá-lo com apenas alguns cliques usando os controles internos do editor.
Você pode procurar e inserir padrões de blocos pré-construídos na aba Patterns do Block Inserter ou navegar até a seção de administração de Padrões no Editor de Site. Você também pode descobrir novos padrões em Patterns Gallery.
Na galeria, você pode escolher um padrão, clicar no botão Copy pattern e colá-lo diretamente em seu conteúdo.
Você tem liberdade para personalizar o grupo de blocos incluídos no padrão sem afetar o padrão registrado ou qualquer instância adicional em seu site.
Padrões de blocos sincronizados e não sincronizados
Como mencionado anteriormente, o sistema de padrões foi simplificado e tornou-se mais consistente no WordPress 6.3. Agora é mais fácil para o usuário criar padrões personalizados diretamente no editor de blocos e gerenciá-los no painel do WordPress sem precisar lidar com código. Agora você pode criar:
- Padrões de blocos sincronizados
- Padrões de blocos não sincronizados
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 todas as ocorrências desse bloco em todo o site.
Por outro lado, as alterações feitas em um padrão de bloco não sincronizado afetarão somente 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, os padrões de blocos personalizados são registrados no banco de dados do WordPress como tipos de artigos personalizados wp_block e um campo meta wp_pattern_sync_status armazena o status de sincronização de um padrão.
wp_pattern_sync_status é usado para armazenar o status de sincronização de um padrão de bloco.Graças ao novo sistema de gerenciamento de padrões, agora você pode criar padrões de blocos sincronizados e não sincronizados diretamente no site ou no editor de artigos. Você só precisa criar seu layout de bloco, selecionar os blocos e clicar no ícone de três pontos na barra de ferramentas de bloco. Em seguida, selecione Create pattern no menu suspenso.
No exemplo abaixo, estamos criando um padrão sincronizado a partir de um bloco de grupo, um título, um parágrafo e um botão.
Quando você clica em Create pattern, será solicitado que você preencha o nome e as categorias do seu padrão e escolha se ele será sincronizado ou não sincronizado.
E pronto! Seu padrão sincronizado agora será listado na seção My Patterns dentro do Editor de Sites, na área de administração de padrões.
Aqui, você pode visualizar seus padrões e verificar o status da sincronização de padrões.
Após isso, você pode abrir o Editor de Padrões para personalizar o bloco conforme necessário.
Novamente, as alterações feitas em padrões sincronizados afetam todas as instâncias desse padrão em todo o site. Já as alterações feitas em padrões (não sincronizados) afetam apenas as futuras instâncias do padrão.
Isso é possível porque o WordPress lida com os dois tipos de padrões de forma diferente. Para entender a diferença, crie uma cópia não sincronizada do seu padrão personalizado, crie um novo artigo ou página e adicione os dois padrões. Quando terminar, vá para o editor de código e verifique o código.
O bloco sincronizado é gerado pelo seguinte código:
<!-- wp:block {"ref":512} /-->Isso significa que o WordPress buscará o artigo com o ID 512 para gerar o HTML a ser renderizado na tela.
O segundo bloco, por outro lado, não está identificado com um ID. No editor de código, ele contém toda a marcação que compõe o padrão.
Os padrões sincronizados são particularmente úteis para criar elementos que você pode querer incluir em várias páginas do seu site e/ou em sites diferentes. Pense em CTAs (Call To Actions), banners promocionais, tabelas de preços e assim por diante.
Como mencionamos, o WordPress considera os padrões de blocos personalizados como tipos de postagem wp_block e os armazena na tabela wp_posts.
Depois de criar seus padrões, você poderá gerenciá-los na tela de administração Patterns. 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 Explorar todos os padrões no inseridor de blocos.
- Clicando no botão Meus padrões no editor do site.
Na tela Patterns, você pode:
- Editar, excluir ou exportar um padrão como JSON
- Importar padrões a partir de um arquivo JSON
- Criar novos padrões
No Editor de Site, você também pode duplicar e renomear seus padrões.
Substituições de padrões sincronizados
Introduzido no WordPress 6.6, o Synced Pattern Overrides é um terceiro tipo de padrão que aproveita a API Block Bindings para obter as funcionalidades de ambos os tipos de padrões.
As substituições de padrão sincronizado permitem que você crie padrões de bloco que mantêm a mesma estrutura em todo o site e mudam em sincronia com as personalizações feitas na estrutura e no estilo do padrão no editor do site. Nesse aspecto, as substituições de padrão são semelhantes aos padrões sincronizados.
Porém, as substituições de padrões sincronizados também se assemelham aos padrões não sincronizados, pois permitem alterar o conteúdo de blocos específicos dentro do padrão sem afetar outras instâncias do mesmo padrão no site.
Assim, as substituições de padrões são padrões sincronizados com elementos individuais não sincronizados.
Vamos descobrir como criar uma substituição de padrão.
Passo 1: Acesse Patterns e duplique um dos padrões existentes, como o padrão Preços – 2 colunas do tema padrão Twenty Twenty-Five. Adicione um nome e defina a cópia como um Padrão Sincronizado.
Passo 2: Abra My patterns e encontre o novo padrão sincronizado. Abra-o e selecione um dos blocos que você precisa substituir, como o bloco Heading.
Vá para a barra lateral de configurações do bloco e role para baixo até a seção Advanced. Aqui, você encontrará a opção Enable Overrides.
Ao clicar no botão, você será solicitado a adicionar um nome para a substituição.
Passo 3: Repita o mesmo processo para cada bloco que você deseja substituir. Quando terminar, crie um novo artigo ou página e inclua seu padrão personalizado.
Passo 4: No editor de artigos, altere o conteúdo dos blocos a serem substituídos, salve o artigo e verifique o resultado no frontend.
Você pode ter notado que, ao editar uma instância de uma substituição de padrão no Editor de Artigos, a barra lateral de configurações do bloco exibe os campos que podem ser editados. No exemplo acima, tornamos o cabeçalho e alguns parágrafos substituíveis.
Você pode adicionar quantas substituições de padrões quiser em qualquer lugar do seu site. Cada instância manterá a mesma estrutura original, mas estará pronta para personalização.
Agora, abra seu padrão no Editor de Sites e alterne para o Editor de Código. O código deve ser semelhante ao seguinte:
<!-- wp:heading
{
"textAlign":"center",
"metadata":{
"name":"Heading",
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
}
},
"align":"wide"
}
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->
<!-- wp:paragraph
{
"align":"center",
"metadata":{
"name":"Subtitle",
"bindings":{
"__default":{
"source":"core/pattern-overrides"
}
}
}
}
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->
No delimitador de blocos, você notará a propriedade metadata.bindings. Isso torna os blocos de Heading e Paragraph editáveis. A propriedade __default instrui o WordPress a conectar todos os atributos suportados a uma fonte específica, que é "core/pattern-overrides".
Agora, no Editor de Artigo, mude para o Editor de Código. O código deve ser semelhante ao seguinte:
<!-- wp:block
{
"ref":518,
"content":{
"Heading":{
"content":"Choose your plan"
},
"Subtitle":{
"content":"Try our services with no risk thanks to our 30-day guarantee"
},
"Plan 1 title":{
"content":"Starter"
},
"Plan 2 title":{
"content":"Business"
}
}
}
/-->Aqui, você verá uma referência ao padrão de bloco e um conjunto de propriedades para cada bloco definido como editável.
Observe que, como as substituições de padrão são uma implementação da API Block Bindings, você pode substituir apenas os blocos compatíveis. No momento em que este texto foi escrito, as substituições de padrão eram compatíveis com os blocos Heading, Paragraph, Image e Buttons.
Partes de template
Antes da era Gutenberg, os temas e templates de WordPress eram criados principalmente em PHP. O conhecimento sólido de temas secundários, hierarquia de templates e as principais linguagens de desenvolvimento de frontend eram requisitos básicos para criar ou personalizar templates. Mas as coisas mudaram com a introdução dos temas de bloco.
Nos temas de blocos e nos temas clássicos que ativaram essa funcionalidade, você pode criar ou personalizar um template, ou uma parte de template diretamente na interface do Editor de Sites. Não são necessárias habilidades de desenvolvimento, a menos que você decida se tornar um desenvolvedor de temas.
Um template de bloco é uma lista de itens de bloco. Exemplos incluem título do site, logo e menu de navegação.
As partes de template são seções específicas de uma página que podem ser reutilizadas em vários locais, como cabeçalhos e rodapés, e podem ser exibidas em todas as páginas do seu site WordPress.
Você pode criar e editar partes de template por meio da interface do Editor de Sites, utilizando todas as ferramentas de edição disponíveis para blocos.
No entanto, diferente dos padrões de blocos, as partes de template são destinadas a áreas do site que não mudam frequentemente.
Diferenças entre padrões e partes de template
Para resumir, aqui estão as principais diferenças entre os três:
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 afetarão apenas essa instância única do padrão de bloco.
- Você pode copiar e colar padrões pré-construídos do diretório de padrões.
- Você pode criar novos padrões e publicá-los no diretório de padrões.
Padrões de blocos personalizados
- Os 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.
- Os padrões de blocos personalizados são armazenados na tabela
wp_postscomo tipo de artigowp_block. - Você pode importar e exportar padrões de blocos personalizados para outros sites.
Partes de template
- 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 template por meio da interface do editor do site.
- São indicadas para á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 apenas alguns cliques no painel do WordPress.
No entanto, o WordPress também oferece outras maneiras 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 templates” 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 dentro da pasta patterns do seu tema.
Criando um padrão de bloco com um plugin
O primeiro método é voltado para desenvolvedores do WordPress, mas é simples o suficiente para ser utilizado também por usuários com menos experiência.
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 functions.php do seu tema.
Selecione ou registre uma categoria de padrão
Primeiro, escolha uma categoria para o seu padrão. Com as versões mais recentes do WordPress, novas categorias de padrão foram adicionadas e algumas categorias existentes foram modificadas.
Para obter a lista de todas as categorias registradas, abra o Editor de Artigos e cole o seguinte código no console do navegador:
wp.data.select('core').getBlockPatternCategories()No WordPress 6.7 com o tema Twenty Twenty-Five ativo, você obterá a seguinte lista de categorias de padrão:
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çãoregister_block_pattern_category. Essa função aceita dois argumentos:
$category_name: Nome da categoria do padrão, incluindo o namespace.$category_properties: Um array de propriedades da 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' );
}Registrar um padrão de bloco
Depois que a categoria do padrão for registrada, o próximo passo é registrar o próprio padrão de bloco. Isso é feito usando a função auxiliarregister_block_pattern, como mostrado abaixo:
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 no formatonamespace/pattern-name.$pattern_properties: Um 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 para o padrão.content(obrigatório): A marcação HTML para o padrão.description: Texto descritivo exibido no inseridor de blocos. Embora opcional, é recomendado para ajudar os usuários a encontrar o padrão.categories: Um array contendo uma ou mais categorias registradas para o padrão. A categoria deve ser registrada antes de ser usada aqui (veja a seção anterior).keywords: Um array de palavras-chave para ajudar os usuários a encontrar o padrão.viewportWidth: Um número inteiro que especifica a largura do padrão na visualização.blockTypes: Um array opcional de tipos de blocos que serão usados com o padrão.postTypes: Um array de tipos de artigos que podem usar o padrão.templateTypes: Um array de tipos de template onde 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 comofalsepara ocultar o padrão. Por padrão, todos os padrões aparecerão no inseridor de blocos.source(opcional): Uma string que identifica a origem do padrão. Usepluginse estiver registrando o padrão a partir de um plugin. Para um tema, usetheme.
Aqui está um exemplo do 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' => '<p>My awesome block pattern</p>'
)
);
}
add_action( 'init', 'my_plugin_register_block_pattern' );
}Nesse código, usamos a propriedade postTypes é usada para limitar o padrão apenas a artigos de blog. No entanto, você pode alterar esse valor para permitir que o padrão seja usado em outros tipos de artigos. Por exemplo, se você tiver um tipo de postagem product e quiser limitar a disponibilidade do padrão apenas a esse tipo específico, basta escrever:
'postTypes' => array( 'product' ),Agora, crie um novo artigo (ou um tipo de artigo personalizado), abra o inseridor de blocos e clique na aba Padrões. Você deverá encontrar a nova categoria de padrões (My Pattern Category) com o seu padrão de bloco personalizado.
Sinta-se à vontade para explorar as propriedades do padrão e personalizar seus blocos conforme necessário.
Um exemplo 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 o 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 procurará a imagem na pasta de uploads, mas sim 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 um 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 um 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 artigos específicos. Por exemplo, você pode tornar o padrão visível somente para o tipo de postagem product:
'postTypes' => array( 'product' ),Por fim, você pode adicionar uma classe CSS ao contêiner do seu padrão de bloco, crie um novo grupo e adicione o atributo className:
<div class="wp-block-group my-css-class">
</div>
Observe que você precisa adicionar o mesmo nome de classe ao seguinte elemento div.
Para obter 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 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-os 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.
Se você deseja registrar implicitamente o mesmo padrão de bloco criado na seção anterior em seu tema de blocos, siga este exemplo usando o tema Twenty Twenty-Three.
Os parâmetros usados são os mesmos do método anterior, mas agora são incluídos em um comentário no cabeçalho do arquivo. Além disso, em vez de usar camelCase nos nomes dos parâmetros, as palavras são separadas por espaços e as listas são separadas por vírgulas.
<?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 -->
A marcação é essencialmente inalterada em relação ao exemplo anterior.
Fizemos apenas duas alterações. A URL da imagem de espaço reservado agora é gerada pela funçãoget_theme_file_uri:
<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>Obviamente, você deve primeiro colocar 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 seu arquivo e crie um novo artigo. Seu padrão de bloco deve aparecer nas categorias Featured e Banners.
Remover o suporte, cancelar o registro e ocultar 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. Remover o suporte a todos os padrões de blocos principais
Primeiro, os desenvolvedores de temas podem remover o suporte aos padrões de blocos principais e fornecer seu próprio conjunto de padrões. Para remover o suporte ao padrão principal, você pode usar a funçãoremove_theme_support desta forma:
remove_theme_support( 'core-block-patterns' );Recomenda-se que você anexe a função remove_theme_support ao hook after_setup_theme.
2. Cancelar o registro de um único padrão de bloco
Você também pode cancelar o registro de um padrão de bloco específico se quiser fornecer uma alternativa personalizada ou não quiser que ele seja usado com o seu tema.
A API Patterns fornece a funçãounregister_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' );Caso também possa 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' );O hook init deve ser usado com a função unregister_block_pattern.
3. Cancelar o registro de uma categoria de padrão de bloco
Também é possível cancelar o registro de uma categoria de padrões de bloco usando a função unregister_block_pattern_category no 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 próprios padrões e compartilhá-los com a comunidade utilizando uma ferramenta on-line gratuita: Pattern Creator.
Se você possui uma conta no WordPress.org, pode acessar o Pattern Creator no diretório de padrões.
Uma vez lá, clique em Criar novo padrão. Isso iniciará 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 biblioteca Openverse.
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 guias: All (Todos), Drafts (Rascunhos) e Pending Review (Revisão pendente).
Quando terminar de fazer as edições, você poderá compartilhar seu template com a comunidade. Clique no botão Submit (Enviar) no canto superior direito do editor para enviar o template para revisão (não se esqueça de seguir as diretrizes do template 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 uma participação de mercado de 63,3% em maio de 2023. Esses números comprovam que o WordPress é uma excelente ferramenta de publicação usada por milhares de profissionais, desenvolvedores e simples blogueiros em todo o 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 blocos, 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 blocos? Já compartilhou algum com a comunidade? Adoraríamos ver suas criações! Deixe um comentário com um link ou suas opiniões sobre os padrões de blocos.
Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.
