O Guia Completo para Padrões de Blocos de Gutenberg (II)

Este post é a segunda parte do Guia Completo sobre Padrões de Bloco Gutenberg, que inclui os seguintes pontos:

1. Introdução aos padrões de bloco
2. Inserir um padrão em uma página
3. Padrões pré-definidos e outros disponíveis em diretórios
4. Adicione padrões disponíveis em diretórios ao seu site
5. Como criar um padrão do zero
6. Como criar um padrão se você não for um desenvolvedor
7. Como converter blocos reutilizáveis ​​em padrões de bloco
8. Tópicos usando padrões de bloco
9. Documentação oficial.

Na primeira parte vimos os primeiros 4 pontos de todos os tópicos abordados no guia: o que é um padrão de bloco, como inserir padrões pré-definidos em suas páginas e onde encontrar e como copiar padrões que estão disponíveis em alguns diretórios. Lá vimos que podemos colar um padrão na página que estamos editando, mas ele não será armazenado em nossa biblioteca de padrões para uso futuro.

Se quisermos adicionar um novo padrão à nossa biblioteca de padrões Gutenberg, devemos criar e registrar esse padrão. É bastante simples, embora você precise de algumas habilidades básicas de codificação. Se este não for o seu caso, não se preocupe, pois aprenderemos mais tarde como obter o mesmo resultado sem exigir nenhuma codificação.

5. Crie um novo padrão

Para criar um padrão de bloco, você deve usar a API Block Pattern. Especificamente, a função PHP register_block_pattern() . Vamos ver brevemente os diferentes passos que devemos seguir com um exemplo simples.

Mas antes de começarmos, deixe-me acrescentar uma nota lateral. Ao personalizar o WordPress usando trechos de código, você deve sempre se perguntar onde deve escrever esse trecho. A maioria dos tutoriais recomenda o arquivo functions.php do seu tema ativo, pois é a solução mais fácil de fazer o trabalho, mas David escreveu este post sobre como criar um plugin para acompanhar todas as suas personalizações e argumentou que essa era uma solução melhor .

Agora, e os padrões de bloco? Você pode adicionar a definição de um novo padrão de bloco em seu tema (alguns temas, como Twenty Twenty-One, já incluem seus próprios), ou você pode adicioná-lo em um plugin personalizado. Tenho certeza de que você encontrará defensores e detratores de ambas as soluções, portanto, escolha a que melhor se adapte às suas necessidades.

#1 Projete os blocos que formarão seu padrão

Como já mencionei no post anterior, um padrão é um conjunto de blocos agrupados como você quiser. Suponha que eu queira criar um padrão de blocos que eu possa usar para criar uma seção descrevendo os recursos básicos de um produto.

Para fazer isso, em uma página intitulada “Criando um padrão”, começo criando um bloco de título, “Seção de 6 recursos”, e depois insiro um bloco de 3 colunas.

No primeiro bloco adiciono uma imagem e, abaixo dela, o título e a descrição do recurso.

Copio a imagem, o título e a descrição nos próximos dois blocos. E, finalmente, duplico esta linha para que eu tenha uma seção que incluirá a descrição dos seis recursos.

Claro, só faz sentido criar um padrão de bloco se você acha que vai usá-lo mais de uma vez.

#2 Copie o conteúdo dos blocos

Depois de definir o conjunto de blocos, basta selecioná-los com o mouse e na barra de ferramentas clicar em Copiar .

#3 Escape do conteúdo HTML copiado

Para evitar problemas, precisamos escapar do texto que acabamos de copiar, para que caracteres especiais como quebras de linha, caracteres de tabulação e assim por diante possam ser entendidos pelo computador. Você pode facilmente escapar de um texto usando ferramentas online como onlinestringtools.com ou JSON Escape/Unescape: basta colar o código que você copiou anteriormente e você obterá um texto com escape correto.

#4 Registre o padrão

Neste ponto, a única coisa que resta é usar a função register_block_pattern() . Esta função recebe dois argumentos: o nome do padrão e um array de propriedades. No final deste post, dou mais detalhes sobre as propriedades que você pode definir em um padrão, mas primeiro vamos ver as etapas necessárias para criar um.

Este é o nosso exemplo:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

Como você pode ver no trecho anterior, primeiro especificamos um nome exclusivo para identificar nosso padrão ( ruth-gutenberg-blocks-patterns/section-with-six-features ), e então especificamos um array com algumas propriedades: o title (“Seção com 6 recursos”) que um usuário do padrão verá e o próprio content . O content é o texto que escapamos na etapa anterior.

#5 Crie um plugin com o padrão registrado

Para ter o padrão registrado em nosso editor, podemos criar um plugin ou podemos colocá-lo em nosso tema ativo. Se você criar um plugin, isto é o que você precisa:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

E voilá! Se agora atualizarmos nosso editor (supondo que você tenha ativado o plugin, é claro), você verá o novo padrão:

mas, infelizmente, está listado em Uncategorized . Isso ocorre porque não indicamos se nosso bloco pertence a alguma das categorias existentes ou a uma nova.

#6 Adicionar uma nova categoria de padrões

Você pode adicionar novos padrões de bloco em categorias existentes ou criar uma categoria completamente nova usando a função register_block_pattern_category . Esta função também recebe dois argumentos: o nome da categoria e um array de opções. Soa familiar?

Aqui está um exemplo:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Quando a nova categoria estiver pronta, não se esqueça de atualizar seu padrão de bloco para que ele especifique explicitamente que deve ser listado nessa nova categoria:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

E aí está:

Agora podemos adicioná-lo a qualquer nova página que criarmos e depois fazer as modificações que acharmos apropriadas, como você pode ver na seção criada em uma nova página para o lançamento do nosso novo produto:

Propriedades do padrão de bloco

Em nosso exemplo, definimos as propriedades title , content e categories de um padrão de bloco, mas há mais. Você encontrará detalhes na documentação que descreve a função register_block_pattern , mas aqui está um resumo:

• title (obrigatório): o título do padrão.
• content (obrigatório): o conteúdo do padrão.
• description : um texto visualmente oculto usado para descrever o padrão no insersor. A descrição é opcional, mas é fortemente recomendada quando o título não descreve completamente o que o padrão faz.
• categories : uma série de categorias de padrões usadas para agrupar padrões de blocos. Os padrões de bloco podem ser exibidos em várias categorias.
• palavras- keywords : um conjunto de aliases ou palavras-chave que ajudam os usuários a descobrir o padrão durante a pesquisa.
• viewportWidth : um inteiro que especifica a largura do padrão no insersor.

No caso de registro de categoria, basta definir uma propriedade de label , pois não há mais props.

Hoje vimos que criar um padrão de blocos para que você sempre o tenha disponível em seu site é bastante fácil. No próximo post veremos como podemos criar padrões sem saber nada sobre código. Não perca!

Imagem em destaque de John Cameron no Unsplash.