Padrões de bloco de Gutenberg: o olhar de um desenvolvedor
Uma olhada nos novos padrões de blocos do WordPress Gutenberg, aos olhos de um desenvolvedor. Veremos o que são, para que podem ser usados e uma análise mais profunda de como escrever código para eles.
Padrões de bloco e seu uso
Padrões de bloco foram introduzidos no WordPress 5.5 (11 de agosto de 2020). Eles são um novo recurso no inseridor de blocos para facilitar a inserção de uma configuração predefinida de vários blocos. Desenvolvedores de temas ou plugins podem definir um grupo de blocos, como eles são aninhados, seu conteúdo e seus atributos, e os usuários finais podem inserir isso com uma simples operação de um clique. A ideia é que os usuários finais não precisem mais criar manualmente layouts complexos e todas as suas configurações personalizadas, e aninha-los em contêineres adequados para blocos que eles usam com frequência.
Depois que um padrão de bloco é adicionado ao editor, os blocos não sabem que foram adicionados por meio de um padrão de bloco. Eles são adicionados como blocos normais, permitindo que os usuários ajustem seu conteúdo e configurações. É basicamente um atalho para adicionar uma configuração de vários blocos.
A ideia é boa! Nem todos os usuários finais se sentem à vontade para criar uma grande estrutura de blocos aninhados no editor para torná-la perfeita. No entanto, até agora, esse recurso é principalmente um benefício para os desenvolvedores, pois os usuários finais não podem criar seus próprios padrões. Para os próprios blocos personalizados dos usuários, eles precisam usar blocos reutilizáveis. Mas, especialmente para desenvolvedores de temas, os padrões de bloco permitem que eles mostrem aos usuários finais a melhor configuração de blocos que funciona bem no tema.
O WordPress adicionou um novo suporte de tema para padrões de bloco: 'core-block-patterns'. O Core, desde a versão 5.5.0, executará automaticamente a, add_theme_support('core-block-patterns')então você não precisa fazer isso no seu tema.
Como todas as funções do padrão de bloco só existem em uma versão muito nova do WordPress, é uma boa ideia verificar sua existência primeiro, para que você não quebre sites com versões mais antigas do WordPress. Em todos os exemplos de código abaixo eu fiz exatamente isso.
O WordPress 5.5 vem com 9 padrões de blocos predefinidos (veja a lista abaixo). Padrões de bloco são exibidos em categorias de padrão (o núcleo adiciona 5 categorias). As categorias de padrão de bloco funcionam como categorias de postagem; você pode colocar um padrão de bloco em várias categorias. Desenvolvedores de temas e plugins podem registrar seus próprios padrões de blocos e categorias de padrões de blocos, bem como cancelar o registro dos que estão no núcleo. Então, vamos dar uma olhada em como!
Padrões de bloco e categorias de padrão de bloco incluídos no WordPress 5.5
Os padrões de bloco enviados no WordPress 5.5 são os seguintes (o namespace e o ID do slug para cada padrão são exibidos entre parênteses):
- Dois botões (‘
core/two-buttons‘) - Três botões (‘
core/three-buttons‘) - Duas colunas de texto (‘
core/text-two-columns‘) - Duas colunas de texto com imagens (‘
core/text-two-columns-with-images‘) - Três colunas de texto com botões (‘
core/text-three-columns-buttons‘) - Duas imagens lado a lado (‘
core/two-images‘) - Cabeçalho grande com um cabeçalho (‘
core/large-header‘) - Cabeçalho grande com um cabeçalho e um botão (‘
core/large-header-button‘) - Citação (‘
core/quote‘)
As categorias adicionadas no WordPress 5.5 são (seus IDs de slug são exibidos entre parênteses):
- Botões (‘
buttons‘) - Colunas (‘
columns‘) - Galeria (‘
gallery‘) - Cabeçalhos (‘
header‘ – não observe ‘s’ no final) - Texto (‘
text‘)
Cancelando o registro de padrões de bloqueio
Você pode cancelar o registro de padrões de bloco usando a função [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Basta fornecer uma string com o padrão de bloco para remover como parâmetro. Consulte a visão geral acima para obter os padrões do bloco principal. Execute esta função dentro de uma função vinculada à initação.
Um exemplo de cancelamento do registro dos padrões de bloco principal “Dois botões" e “Três botões”:
add_action('init', function() {
if (!function_exists('unregister_block_pattern')) {
return;
}
unregister_block_pattern('core/two-buttons');
unregister_block_pattern('core/three-buttons');
});Registrando padrões de bloco
O registro de um novo padrão de bloco é feito usando a função [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Aceita dois parâmetros; o primeiro é uma string de um nome exclusivo para seu padrão, incluindo namespace. A segunda é uma série de configurações para seu padrão de bloco.
Dica: Definir um padrão de bloco requer que você forneça conteúdo HTML bruto para sua configuração de bloco. Eu não recomendo digitar isso manualmente, pois isso causará facilmente conflitos de bloco inválidos. Em vez disso, vá no editor e configure os blocos como você deseja tê-los em seu padrão. Em seguida, clique no “menu ponto” na barra de ferramentas do bloco parental e clique em “Copiar”. Depois disso, você pode voltar ao seu editor de código e colar (Ctrl+V). Isso fornece o HTML bruto para a configuração que você copiou. Use a funcionalidade do editor de código para substituir todas as novas linhas ne certifique-se de escapar aspas corretamente.
As propriedades para seu padrão de bloco são as seguintes (segundo array de argumentos):
title(obrigatório): o nome exibível do seu padrão de bloco**content**(obrigatório): HTML RAW da configuração do blocodescription: Descrição do seu padrão de bloco. Está visualmente ocultocategories: Uma matriz de categorias para adicionar este padrão de bloco. Se você não fornecer essa propriedade, o bloco será colocado em uma categoria de padrão de bloco "Sem categoria".keywords: uma variedade de palavras-chave que podem ajudar os usuários a encontrar seu padrão enquanto pesquisamviewportWidth: Forneça um número inteiro da largura do padrão de bloco no insersor. Afeta apenas a visualização no dispositivo de inserção.
Aqui está um exemplo de registro de um padrão de bloco que consiste em um bloco de capa de largura total que tem uma cor de fundo, que contém um bloco de título alinhado ao centro com uma cor de texto específica e um parágrafo alinhado ao centro de uma cor de texto específica:
Registrando categorias de padrão de bloco
Os desenvolvedores também podem registrar categorias de padrões de blocos personalizados. Isso é feito com a função [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Aceita dois parâmetros; primeiro uma string do slug de categoria e depois uma matriz de propriedades. A partir de agora, apenas uma propriedade é suportada no segundo argumento; labelpara o nome legível da categoria.
Abaixo está um exemplo de registro de uma categoria de padrão de bloco personalizado:
Com isso, você pode adicionar ‘awp-patterns’ ao categoriesargumento ‘ ‘ para register_block_pattern(). Lembre-se de que, se uma categoria não tiver padrões de bloco registrados, a categoria não será exibida no inseridor de blocos. Você precisará adicionar pelo menos um padrão de bloco nesta categoria para fazê-lo aparecer.
Cancelando o registro de categorias de padrão de bloco
Finalmente, há uma função [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()para cancelar o registro de uma categoria de padrão de bloco. Forneça o slug de categoria como parâmetro. Consulte a visão geral das categorias de padrão de bloco acima para categorias principais e seus slugs.
Não se esqueça de que as categorias de padrão de bloco sem nenhum padrão de bloco atribuído a ela não serão visíveis no insersor de bloco. Portanto, se você cancelar o registro de todos os padrões de bloco atribuídos a uma categoria, a própria categoria não será mais visível e você não precisa necessariamente cancelar o registro da categoria. Quaisquer padrões de bloco atribuídos apenas à categoria que você está removendo serão movidos para uma categoria “Sem categoria”.
Aqui está um exemplo de cancelamento do registro da categoria de padrão de bloco principal ‘botões’:
add_action('init', function() {
if (!function_exists('unregister_block_pattern_category')) {
return;
}
unregister_block_pattern_category('buttons');
});Conclusão
O novo recurso de padrão de bloco no WordPress Gutenberg é definitivamente um passo mais próximo de fazer o editor de blocos funcionar mais como um construtor de páginas. Na minha opinião, a desvantagem é que os usuários finais não podem criar seus próprios padrões. Mas é uma boa função para desenvolvedores de temas, pois permite que os usuários finais configurem facilmente as configurações de blocos e layouts que funcionem bem no tema. Este é um recurso totalmente novo e provavelmente evoluirá e será aprimorado em um futuro próximo! Eu, por exemplo, mal posso esperar!