Noções básicas do construtor: como criar padrões de bloco

No artigo Builder Basics do mês passado, exploramos os padrões de bloco: o que são e como você pode usá-los. Aprendemos que um padrão de bloco é simplesmente uma coleção predefinida de blocos que forma um layout específico. Mostramos o poder dos padrões e discutimos como eles são a base do desenvolvimento moderno de temas WordPress. Hoje vamos aprender a desenhar, compartilhar e registrar nossos próprios padrões!

Observe que este artigo usa o tema Twenty Twenty-Two em todos os seus exemplos. Este tema baseado em blocos foi lançado junto com o WordPress 5.9 e é um recurso fantástico com mais de 60 padrões de blocos.

Design Padrão

A parte mais difícil de criar um padrão de bloco é decidir como ele deve ficar. Vamos começar com algo relativamente simples: uma grade de itens, duas fileiras de três. Poderíamos usar esse design para mostrar diferentes serviços de negócios ou recursos de produtos.

Dica rápida: Os padrões podem ser criados a partir de qualquer bloco, incluindo blocos de terceiros. No entanto, se você pretende distribuir seus padrões para um público amplo, tente usar apenas os blocos principais do WordPress – dessa forma, o usuário não precisa instalar plugins adicionais para usar seus designs.

Para mim, o design de padrões começa no Editor. Embora os padrões possam ser codificados manualmente, é muito mais fácil fazer as coisas visualmente. Vou começar adicionando um bloco Columns com três colunas para a primeira linha da grade. Em seguida, adicione blocos de Título, Parágrafo e Botões a cada coluna. Duplique o bloco Columns para criar a segunda linha da grade. Por fim, aplicarei algumas configurações de estilo e envolverei os dois blocos Columns em um bloco Group com uma cor de fundo. O resultado fica assim:

Você pode ver os 33 blocos que compõem este design na imagem acima!

Se eu quiser criar uma versão alternativa “dark” da grade, só preciso duplicar o design original e ajustar o estilo.

Embora ambos os designs sejam relativamente simples, criá-los do zero pode ser tedioso. Ser capaz de compartilhar e/ou salvar esses padrões de bloco economizaria muito tempo.

Compartilhando um projeto

Compartilhar um design de padrão é fácil! Digamos que você queira mover o design para outra página do seu site, ou talvez para outro site inteiramente. É tão simples quanto copiar e colar a marcação do bloco. Existem várias maneiras de fazer isso.

Se o desenho do padrão estiver contido em um bloco “contêiner”, como um bloco Grupo, Capa ou Colunas, selecione o contêiner mais externo e use o menu de ferramentas para selecionar “Copiar”. A marcação de bloco é copiada para a área de transferência e você pode colar onde quiser.

Uma segunda opção é usar o Editor de Código, que você pode acessar no painel Opções.

O Editor de código fornece uma representação visual de todas as marcações de bloco na página ou postagem atual. Eu prefiro esse método porque é fácil ver exatamente qual código está sendo copiado.

Registrando um padrão

Copiar e colar a marcação de bloco pode ser fácil, mas geralmente queremos uma versão mais permanente de nossos designs de padrão. Para isso, usaremos a API de padrões para “registrar” um padrão de bloco personalizado. Isso torna nosso design disponível no Inserter e no Pattern Explorer dentro do WordPress.

Para registrar um padrão, usamos a função PHP register_block_pattern(). Esta função aceita dois parâmetros, um título e um array de propriedades. Antes de passar por cada um, vejamos um exemplo.

registrar_block_pattern(

'exemplo/recurso-grade-luz',

variedade(

'title' => __( 'Recurso Grade – Luz', 'textdomain' ),

'description' => __( 'Mostrar seis itens em destaque em uma grade em um fundo claro.', 'textdomain' ),

'categorias' => array( 'destaque', 'colunas' ),

'palavras-chave' => array( 'recurso', 'grade' ),

'viewportWidth' => 1400,

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

'conteúdo' => 'CONTEÚDO DE PADRÃO'

)

);

Aqui estamos registrando o padrão Feature Grid que projetamos anteriormente. O título segue uma convenção de nomenclatura de namespace/título. Ao registrar vários padrões no mesmo projeto, é uma prática recomendada manter o namespace consistente.

Apenas os parâmetros de título e conteúdo na matriz de propriedades são tecnicamente necessários. Por brevidade, o conteúdo do padrão é excluído no exemplo acima. No entanto, este é o mesmo código que copiamos e colamos na seção anterior. As categorias são definidas usando o campo de categorias e um padrão pode ter várias. No Editor, os padrões são organizados por categoria. Para as propriedades restantes, um detalhamento fantástico é fornecido no Manual do Editor de Blocos.

Para registrar o padrão Feature Grid com o fundo escuro, basta duplicar o código de registro e atualizar de acordo. Finalmente, nós envolvemos ambas as funções assim e colocamos tudo no arquivo functions.php do nosso tema.

function my_pattern_library_register_block_patterns() {

registrar_block_pattern(

'exemplo/recurso-grade-luz',

variedade( … )

);

registrar_block_pattern(

'exemplo/recurso-grade-escuro,

variedade( … )

);

}

add_action( 'init', 'example_register_block_patterns');

O código completo está disponível em um Gist no GitHub.

Depois que o código for adicionado, nossos padrões recém-registrados serão exibidos no Inserter e no Pattern Explorer.

Registrando uma categoria de padrão

Ao trabalhar com padrões personalizados, geralmente é útil colocá-los em categorias personalizadas. O WordPress simplifica com register_block_pattern_category(). Esta função é semelhante à que usamos para registrar padrões. Tudo o que você precisa fazer é fornecer um título de categoria e uma matriz de propriedades. A partir do WordPress 5.9, label é a única propriedade suportada, mas esperamos mais no futuro.

O exemplo a seguir registra a categoria “Custom” com o título custom. Coloque este código no arquivo functions.php do seu tema junto com os exemplos de registro de padrões.

function example_register_block_pattern_categories() {

register_block_pattern_category(

'personalizadas',

array( 'label' => __( 'Personalizado', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

As categorias de padrões só serão exibidas no Editor se tiverem padrões associados a elas. Portanto, se adicionarmos personalizado aos dois padrões de grade de recursos que registramos anteriormente, a categoria “Personalizado” aparecerá assim:

Criar um plug-in de biblioteca de padrões

Nas seções anteriores, registramos padrões e uma categoria de padrões colocando o código no arquivo functions.php do nosso tema. Embora isso funcione, não é ideal para o longo prazo. Suponha que precisamos atualizar nosso tema? Talvez queiramos usar os padrões em outro site?

O WordPress ainda não forneceu uma solução nativa para gerenciamento de padrões personalizados, portanto, devemos procurar soluções alternativas. Além disso, geralmente é preferível ter padrões em um formato mais portátil.

A melhor abordagem que encontrei é criar um plugin WordPress simples para armazenar minha coleção de padrões personalizados. Os plug-ins fornecem versatilidade máxima e são independentes do tema. Mostrarei como criar seu próprio plugin de biblioteca de padrões nas etapas a seguir.

Dica rápida: Se você quiser pular as etapas a seguir, preparei um plugin completo “My Pattern Library” que deve fornecer um ótimo ponto de partida para sua própria biblioteca. O código está disponível como um Gist no GitHub.

Etapa 1: obter a configuração

Antes de começar a construir o plugin, você precisará de uma versão funcional do WordPress e um editor de texto de alguma variedade. Eu recomendo o Local para criar instalações locais do WordPress e o uso exclusivamente há muitos anos. Eu uso o Atom para edição de texto, mas há muitas opções excelentes. Até mesmo o editor de texto básico que vem com seu sistema operacional serve.

Configure um site local do WordPress usando o Local ou um aplicativo semelhante. Certifique-se de que o WordPress esteja atualizado para a versão 5.9 ou superior. Os padrões funcionarão no 5.5+, mas é sempre melhor usar a versão mais recente do WordPress sempre que possível.

Etapa 2: criar o plug-in

A próxima coisa que você precisa fazer é criar a “base” do plugin. Se você é novo no desenvolvimento de plugins, não tenha medo. Parece mais assustador do que é.

Navegue até o diretório wp-content → plugins em sua instalação local do WordPress e crie um novo diretório intitulado my-pattern-library. Você pode nomear o diretório como quiser. Basta substituir “my-pattern-library” pelo seu nome personalizado em todas as etapas subsequentes.

Dentro do novo diretório wp-content → plugins → my-pattern-library , crie um arquivo PHP chamado my-pattern-library.php. Abra o arquivo em seu editor de texto e adicione o seguinte comentário de cabeçalho de plug-in na parte superior do arquivo. Não se esqueça do <?php. Observe que eu simplifiquei o cabeçalho para este tutorial.

<?php

/**

* Nome do Plugin: Minha Biblioteca de Padrões

* Descrição: Uma biblioteca simples de padrões de blocos.

* Versão: 0.1.0

* Requer pelo menos: 5,8

* Requer PHP: 7.0

* Autor: Seu nome

* Licença: GPL v2 ou posterior

* Domínio de texto: my-pattern-library

*/

Sinta-se à vontade para alterar as informações do cabeçalho como achar melhor. Em seguida, salve o arquivo. Agora você tem um plugin WordPress totalmente funcional. Confirme se está visível na página de plug-ins do administrador e clique em "Ativar". Deve ficar assim.

Embora agora você tenha um plug-in em funcionamento, ele não faz nada. Vamos mudar isso.

Etapa 3: registrar padrões e categorias

Nesta etapa final, tudo o que você precisa fazer é copiar o padrão e o código de registro da categoria do padrão anteriormente neste artigo para o novo plug-in. Anteriormente, colocamos este código no arquivo functions.php do tema. Agora, basta colá-lo abaixo do comentário do cabeçalho em seu arquivo my-pattern-library.php.

Salve o arquivo e navegue até o Editor no WordPress. Abra o Inserter, clique na aba Patterns e escolha a categoria Custom. Você deverá ver os dois padrões registrados pelo plugin.

Sua biblioteca de padrões agora está operacional! Quando houver necessidade de novos padrões ou categorias personalizadas, basta adicioná-los ao plugin. Um exemplo de código completo está disponível como Gist no GitHub.

Antes de encerrarmos, é importante mencionar que este exemplo é para uso pessoal. Você provavelmente gostaria de incluir mais funcionalidades se o plug-in fosse distribuído publicamente. A localização vem à mente. Dito isso, este tutorial demonstra como é fácil criar um plugin simples que armazena padrões de blocos personalizados.

Empacotando

Neste artigo, você aprendeu como projetar, compartilhar e registrar padrões de bloco. Você até aprendeu a construir um plugin WordPress simples para abrigar sua própria biblioteca de padrões. Acredito firmemente que os padrões de blocos são essenciais para o desenvolvimento de temas modernos e estou animado para ver o que o futuro reserva. Se você ainda não começou a explorar padrões, espero que este artigo o encoraje a fazê-lo. O Learn WordPress é um recurso fantástico para aprendizado adicional e, se você tiver alguma dúvida, deixe-me saber nos comentários.