Registre um padrão de bloco no WordPress Block Editor (Gutenberg)

Padrões de bloco no editor de blocos do WordPress (Gutenberg) são um recurso poderoso que permite criar layouts variados com muito pouco esforço.

Usando register_block_patternvocê pode criar rapidamente um padrão de bloco para você ou seus clientes.

Pré-requisitos

• Instalação do WordPress
• Editor de código

Crie seu padrão de bloco

Você cria padrões de blocos a partir dos blocos registrados em seu site. Estes podem ser blocos principais ou qualquer número de blocos personalizados ou de terceiros.

Comece usando o editor do WordPress para criar um layout de bloco. Você pode usar as configurações para tornar isso tão complexo ou tão simples quanto desejar.

Neste exemplo, vamos mantê-lo simples e simplesmente criar um padrão de bloco com as seguintes estruturas:

• Bloco de grupo
  • Cabeçalho
  • Parágrafo
  • Colunas
    • Coluna 1
      • Cabeçalho
      • Parágrafo
    • Coluna 2
      • Cabeçalho
      • Parágrafo

Depois de construir seu padrão de bloco, basta copiar o código que foi gerado para você.

Copie o código do padrão de bloco

Para fazer isso, vá para os três pontos no canto superior direito do editor (opções rotuladas) e selecione ‘Editor de código’. Isso mostrará o HTML por trás do padrão de bloco que você acabou de criar.

Copie este código em sua área de transferência.

Registre o padrão de bloco

Cole este código do editor de blocos em seu editor de código. Se você não tiver certeza de onde, poderá usar o functions.phpdo seu tema.

Certifique-se de passá-lo para uma variável colocando aspas simples (') ao redor do texto colado, assim:

$block_pattern_content = '
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<h2>Example Block Pattern</h2>

<p>Lorem ipsum dolor sit amet labore cras venenatis.</p>

<div class="wp-block-columns">
<div class="wp-block-column">
<h3>Sub Heading 1</h3>

<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.</p>
</div>

<div class="wp-block-column">
<h3>Sub Heading 2</h3>

<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.</p>
</div>
</div>
</div></div>
';

Você pode precisar fazer alguns escapes dos caracteres, dependendo da complexidade do seu padrão de bloco.

Em seguida, precisamos passar isso para a register_block_patternfunção:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'text',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

É isso, o padrão de bloco é registrado.

Quebrarregister_block_pattern

• Namespace — (wholesomecode/example-block-pattern) é o namespace do padrão de bloco. Certifique-se de que isso seja exclusivo para seu padrão de bloco. Se precisarmos cancelar o registro do padrão de bloco, esta é a string que precisaremos.
• Categorias — Esta é a categoria do padrão de bloco em que o padrão de bloco aparecerá, quando inserirmos nosso padrão de bloco. Também podemos adicionar nossas próprias categorias.
• Conteúdo — Este é o HTML que gera o padrão de bloco. Este exemplo usa a variável que criamos no editor.
• Descrição — Uma descrição do padrão de bloco.
• Palavras -chave — Palavras-chave que podem ser usadas para pesquisar o padrão de bloco.
• Título — O título do padrão de bloco.
• Largura da janela de visualização — A janela de visualização do padrão de bloco, usada para a área de visualização.

Insira o padrão de bloco

Para inserir o padrão de bloco, basta usar o sinal de mais no canto superior esquerdo do editor e selecionar os padrões de bloco.

Selecione a categoria na qual você registrou seu padrão e ela deve aparecer.

Inserindo o padrão de bloco

Alternativamente, você pode pesquisar pelas palavras-chave que você registrou.

Para cadastrar uma categoria de bloco, basta utilizar a register_block_pattern_categoryfunção.

register_block_pattern_category(
    'my-client',
    [
        'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),
    ]
);

Então você pode usar a categoria que você acabou de registrar em seu código de padrão de bloco, assim:

register_block_pattern(
    'wholesomecode/example-block-pattern',
    [
        'categories'    => [
            'my-client',
        ],
        'content'       => $block_pattern_content,
        'description'   => 'An example block pattern',
        'keywords'      => 'example',
        'title'         => 'Example Block Pattern',
        'viewportWidth' => 800,
    ],
);

Agora, quando você encontrar seu padrão de bloco, ele estará localizado em sua categoria personalizada:

Categoria de padrão de bloco personalizado

Agora você pode agrupar todos os padrões de blocos personalizados que acabou de criar para seu cliente em um só lugar.

• Precisa de algo mais estático? Tente registrar um modelo de bloco em vez disso
• Precisa de algo que se aplique a bloqueios infantis? Tente registrar um modelo do InnerBlocks