Como criar padrões de tema de bloco no WordPress 6.0

Padrões de bloco, também conhecido como seções, foram introduzidos em WordPress 5.5 para permitir que os usuários criem e compartilhem layouts de blocos predefinidos no diretório padrão. O diretório é o lar de uma ampla variedade de padrões selecionados pela comunidade WordPress. Esses padrões estão disponíveis em formato simples de copiar e colar, não requerem conhecimento de codificação e, portanto, economizam muito tempo para os usuários.

Apesar de muitos artigos sobre padrões, há uma falta de artigos abrangentes e atualizados sobre criação de padrões cobrindo os recursos aprimorados mais recentes. Este artigo visa preencher a lacuna com foco nos recursos aprimorados recentes, como criar padrões sem registro e oferecer um guia passo a passo atualizado para criá-los e usá-los em temas de bloco para iniciantes e autores experientes.

Desde o lançamento de WordPress 5.9 e os votos de Vinte e Vinte e Dois (TT2) tema padrão, o uso de padrões de bloco em temas de bloco se proliferou. Eu tenho sido um grande fã de padrões de blocos e os criei e usei em meus temas de bloco.

O novo WordPress 6.0 ofertas três padrões principais apresentam aprimoramentos para autores:

• Permitindo o registro de padrões através /patterns pasta (semelhante a /parts, /templates e /styles cadastro).
• Registrando padrões do diretório de padrões públicos usando o theme.json.
• Adicionando padrões que podem ser oferecidos ao usuário ao criar uma nova página.

Em uma introdução Explorando o vídeo do WordPress 6.0, a representante de produtos da Automattic, Ann McCathy, destaca alguns recursos de padrões recentemente aprimorados (a partir das 15:00) e discute planos futuros de aprimoramento de padrões - que incluem padrões como elementos de corte, oferecendo opções de escolha o padrão na criação da página, integrando a pesquisa de diretório padrão e muito mais.

Pré-requisitos

O artigo pressupõe que os leitores tenham conhecimento básico da interface de edição completa do site (FSE) do WordPress e bloqueiem temas. o Manual do Editor de Blocos e Edição Completa do Site site fornece os guias tutoriais mais atualizados para aprender todos os recursos do FSE, incluindo temas e padrões de bloco discutidos neste artigo.

Seção 1: Evoluindo abordagens para criar padrões de bloco

A abordagem inicial para criar padrões de bloco exigia o uso da API de padrão de bloco como um plugin personalizado ou registrado diretamente no functions.php arquivo para agrupar com um tema de bloco. O recém-lançado WordPress 6.0 introduziu vários recursos novos e aprimorados que trabalham com padrões e temas, incluindo registro de padrões por meio de um /patterns pasta e um modal de padrão de criação de página.

Como pano de fundo, vamos primeiro ver brevemente como o fluxo de trabalho de registro de padrão evoluiu do uso da API de padrão de registro para o carregamento direto sem registro.

Exemplo de caso de uso 1: vinte e um e vinte e um

O padrão Tema Vinte Vinte e Um (TT1) e Tema TT1 Blocos (irmão do TT1) mostra como os padrões de bloco podem ser registrados no tema functions.php. No tema experimental do TT1 Blocks, este single bloco-padrão.php arquivo contendo oito padrões de bloco é adicionado ao functions.php como include como mostrado aqui.

Um padrão de bloco personalizado precisa ser registrado usando o register_block_pattern função, que recebe dois argumentos — title (nome dos padrões) e properties (uma matriz que descreve as propriedades do padrão).

Aqui está um exemplo de registro de um padrão de parágrafo simples “Hello World” a partir deste Artigo do Modelador de Temas:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

Após o registro, o register_block_pattern() função deve ser chamada de um manipulador anexado ao init gancho como descrito SUA PARTICIPAÇÃO FAZ A DIFERENÇA.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

Uma vez que os padrões de bloco são registrados, eles ficam visíveis no editor de blocos. Uma documentação mais detalhada é encontrada neste Registro de padrão de bloco.

Propriedades do padrão de bloco

Além do necessário title e content propriedades, o manual do editor de blocos lista os seguintes opcionais propriedades do padrão:

• title (requerido): um título legível para o padrão.
• content (requerido): Bloqueia a marcação HTML para o padrão.
• description (Opcional): um texto visualmente oculto usado para descrever o padrão no insersor. Uma descrição é opcional, mas é fortemente recomendada quando o título não descreve completamente o que o padrão faz. A descrição ajudará os usuários a descobrir o padrão durante a pesquisa.
• categories (Opcional): Uma matriz de categorias de padrão registradas usadas para agrupar padrões de bloco. Padrões de bloco podem ser mostrados em várias categorias. Uma categoria deve ser registrada separadamente para ser usada aqui.
• keywords (Opcional): uma matriz de aliases ou palavras-chave que ajudam os usuários a descobrir o padrão durante a pesquisa.
• viewportWidth (Opcional): um número inteiro que especifica a largura pretendida do padrão para permitir uma visualização em escala do padrão no dispositivo de inserção.
• blockTypes (Opcional): uma matriz de tipos de bloco com os quais o padrão deve ser usado. Cada valor precisa ser o do bloco declarado name.
• inserter (Opcional): Por padrão, todos os padrões aparecerão no insersor. Para ocultar um padrão para que ele só possa ser inserido programaticamente, defina o inserter para false.

Veja a seguir um exemplo de trechos de código de plug-in de padrão de cotação retirados do Blog WordPress.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

Usando padrões em um arquivo de modelo

Depois que os padrões são criados, eles podem ser usados ​​em um arquivo de modelo de tema com a seguinte marcação de bloco:

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

Um exemplo de este repositório do GitHub mostra o uso de “footer-with-background” lesma padrão com “tt2gopher” prefixo no tema dos blocos TT2 Gopher.

Os primeiros adeptos de temas de bloco e plugin Gutenberg também tiraram proveito de padrões em temas clássicos. O padrão Vinte vinte e meus temas favoritos do Eksell (um site de demonstração aqui) são bons exemplos que mostram como os recursos de padrão podem ser adicionados a temas clássicos.

Exemplo de caso de uso 2: Vinte e vinte e dois

Se um tema inclui apenas alguns padrões, o desenvolvimento e a manutenção são bastante gerenciáveis. No entanto, se um tema de bloco inclui muitos padrões, como no tema TT2, então o pattern.php arquivo fica muito grande e difícil de ler. O tema TT2 padrão, que agrupa mais de 60 padrões, mostra um fluxo de trabalho de registro de padrão refatorado estrutura que é mais fácil de ler e manter.

Tomando exemplos do tema TT2, vamos discutir brevemente como esse fluxo de trabalho simplificado funciona.

2.1: Registrando Categorias de Padrões

Para fins de demonstração, criei um tema filho TT2 e o configurei no meu site de teste local com algum conteúdo fictício. Seguindo o TT2, me registrei footer-with-background e adicionado à lista de matrizes de categorias de padrão a seguir em sua block-patterns.php arquivo.

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $block_pattern_categories = apply_filters( 'twentytwentytwo_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); } } $block_patterns = array( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

Neste exemplo de código, cada padrão listado no $block_patterns = array() é chamado por foreach() função que requires um patterns diretório com o nome do padrão listado na matriz que adicionaremos na próxima etapa.

2.2: Adicionando um arquivo de padrão ao /inc/patterns dobrador

Em seguida, devemos ter todos os arquivos de padrões listados no $block_patterns = array(). Aqui está um exemplo de um dos arquivos de padrão, footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

Vamos referenciar o padrão no footer.html parte do modelo:

<!-- wp:template-part {"slug":"footer"} /-->

Isso é semelhante a adicionar partes de cabeçalho ou rodapé em um arquivo de modelo.

Os padrões também podem ser adicionados ao parts/footer.html modelo modificando-o para se referir a slug do arquivo de padrão do tema (footer-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

Agora, se visitarmos o insersor de padrões do editor de blocos, o Footer with background deve estar disponível para nosso uso:

A captura de tela a seguir mostra o rodapé recém-criado com padrão de fundo no front-end.

Agora que os padrões se tornaram parte integrante do tema de bloco, muitos padrões são agrupados em temas de bloco - como Quadrado, Semente, Mayland, Zoólogo, Geólogo — seguindo o fluxo de trabalho discutido acima. Aqui está um exemplo do tema Quadrat /inc/patterns pasta com um registro de padrão de bloco arquivo e lista de arquivos com fonte de conteúdo e cabeçalho de padrão necessário dentro return array() função.

Seção 2: Criando e carregando padrões sem registro

Observe que esse recurso requer a instalação do plugin WordPress 6.0 ou Gutenberg 13.0 ou superior em seu site.

Esta novo recurso do WordPress 6.0 permite o registro de padrões através de arquivos e pastas padrão – /patterns, trazendo convenções semelhantes como /parts, /templates e /styles.

O processo, como também descrito em esta taverna WP artigo, envolve as três etapas a seguir:

• criando uma pasta de padrões na raiz do tema
• adicionando cabeçalho de padrão de estilo de plug-in
• conteúdo da fonte padrão

Uma marcação de cabeçalho padrão típica, retirada do artigo é mostrada abaixo:

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

Conforme descrito na seção anterior, apenas Title e Slug campos são obrigatórios e outros campos são opcionais.

Fazendo referência a exemplos de temas lançados recentemente, refatorei o registro de padrões em este TT2 Gopher Blocks tema de demonstração, preparado para um artigo anterior sobre CSS-Tricks.

Nas etapas a seguir, vamos explorar como um footer-with-background.php de cinto de segurança registrado com PHP e usado em um footer.html modelo é refatorado.

2.1: Crie um /patterns pasta na raiz do tema

O primeiro passo é criar um /patterns pasta na raiz do tema TT2 Gopher e mova o footer-with-background.php arquivo de padrão para /patterns pasta e refatore.

2.2: Adicionar dados de padrão ao cabeçalho do arquivo

Em seguida, crie os seguintes campos de registro de cabeçalho de padrão.

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

Um arquivo de padrão tem um campo de título superior escrito como comentários PHP. Seguido pelo conteúdo de bloco escrito em formato HTML.

2.3: Adicionar conteúdo de padrão ao arquivo

Para a seção de conteúdo, vamos copiar os snippets de código dentro aspas simples (por exemplo, '...') da seção de conteúdo do footer-with-background e substituir o <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

Todo o trecho de código do patterns/footer-with-background.php arquivo pode ser visualizado aqui no GitHub.

Por favor, note que o /inc/patterns e block-patterns.php e guarante que os mesmos estão extras, não obrigatório no WordPress 6.0 e incluído apenas para fins de demonstração.

2.4: Referenciando o slug de padrões no modelo

Adicionando o refatorado acima footer-with-background.php padrão para footer.html template é exatamente o mesmo descrito na seção anterior (Seção 1, 2.2).

Agora, se visualizarmos a parte do rodapé do site em um editor de blocos ou front-end do nosso site em um navegador, a seção de rodapé será exibida.

Categorias e tipos de padrões Registro (opcional)

Para categorizar padrões de blocos, as categorias e tipos de padrões devem ser registrados no functions.php arquivo.

Vamos considerar um exemplo de registrando categorias de padrão de bloco do tema TT2 Gopher.

Após o registro, os padrões são exibidos no insersor de padrões junto com os padrões padrão do núcleo. Para adicionar rótulos de categoria específicos de tema no insersor de padrões, devemos modificar os snippets anteriores adicionando namespace de tema:

/**
* Registers block categories, and type.
*/ function tt2gopher_register_block_pattern_categories() { $block_pattern_categories = array( 'tt2gopher-header' => array( 'label' => __( 'TT2 Gopher - Headers', 'tt2gopher' ) ), 'tt2gopher-footer' => array( 'label' => __( 'TT2 Gopher - Footers', 'tt2gopher' ) ), 'tt2gopher-page' => array( 'label' => __( 'TT2 Gopher - Page', 'tt2gopher' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$block_pattern_categories = apply_filters( 'tt2gopher_block_pattern_categories', $block_pattern_categories ); foreach ( $block_pattern_categories as $name => $properties ) { if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( $name ) ) { register_block_pattern_category( $name, $properties ); }
}
add_action( 'init', 'tt2gopher_register_block_pattern_categories', 9 );

A footer-with-background padrão é visível nos padrões inseridos com sua visualização (se selecionado):

Esse processo simplifica muito a criação e exibição de padrões de bloco em temas de bloco. Está disponível no WordPress 6.0 sem usar o plugin Gutenberg.

Exemplos de temas sem registro de padrões

Os primeiros usuários já começaram a usar esse recurso em seus temas de bloco. Alguns exemplos dos temas, que estão disponíveis no diretório de tema, que os padrões de carga sem registro estão listados abaixo:

• Archaeo – 12 padrões
• Pingente – 13 padrões
• Remote – 11 padrões
• Skatepark – 10 padrões
• Stewart – 17 padrões
• livro – 16 padrões
• Vanguarda – 14 padrões

Seção 3: Criando e usando padrões com low-code

A diretório oficial de padrões contém designs criativos de contribuição da comunidade, que podem ser copiados e personalizados conforme desejado para criar conteúdo. Usar padrões com um editor de blocos nunca foi tão fácil!

Quaisquer padrões do diretório cada vez maior também podem ser adicionados para bloquear temas apenas por simples “copiar e colar” ou incluir no theme.json arquivo referindo-se ao seu diretório lesma padrão. A seguir, falarei brevemente sobre a facilidade com que isso pode ser feito com uma codificação muito limitada.

Adicionando e personalizando padrões do diretório de padrões

3.1: Copie o padrão do diretório para uma página

Aqui estou usando este padrão de seção de rodapé por FirstWebGeek do diretório de padrões. Copiou o padrão selecionando o botão “Copiar Padrão” e o colou diretamente em uma nova página.

3.2: Faça a personalização desejadas

Fiz apenas algumas alterações na cor das fontes e no fundo do botão. Em seguida, copiou todo o código do editor de código para uma prancheta.

Se você não estiver familiarizado com o uso do editor de código, vá para opções (com três pontos, no canto superior direito), clique no botão Editor de código e copie todo o código daqui.

3.3: Crie um novo arquivo na pasta /patterns

Primeiro, vamos criar um novo /patterns/footer-pattern-test.php e adicione a seção de cabeçalho de padrão necessária. Em seguida, cole todo o código (etapa 3, acima). O padrão é categorizado na área do rodapé (linhas: 5), podemos visualizar o recém-adicionado no insersor de padrões.

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4: Visualize o novo padrão no insersor

Para ver os recém-adicionados Footer pattern from patterns library padrão, vá para qualquer postagem ou página e selecione o ícone de inserção (símbolo de adição azul, canto superior esquerdo) e, em seguida, selecione as categorias “TT2 Gopher – Rodapé”. O padrão recém-adicionado é mostrado no painel esquerdo, junto com outros padrões de rodapé e sua visualização à direita (se selecionado):

Registrando padrões diretamente em theme.json lima

No WordPress 6.0, é possível registrar quaisquer padrões desejados do diretório de padrões com theme.json arquivo com a seguinte sintaxe. o 6.0 estados da nota do desenvolvedor, “o campo de padrões é uma matriz de [lesmas padrão] do Diretório de padrões. Os slugs de padrão podem ser extraídos pelo [URL] na visualização de padrão único no Diretório de padrões.”

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

Esta vídeo curto de recursos do WordPress 6.0 demonstra como os padrões são registrados no /patterns pasta (às 3:53) e registrando os padrões desejados do diretor de padrões em um theme.json arquivo (em 3:13).

Em seguida, o padrão registrado fica disponível na caixa de pesquisa do insersor de padrões, que fica disponível para uso da mesma forma que a biblioteca de padrões de pacote de temas.

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

Neste exemplo, o slug padrão footer-section-design-with-3-column-description-social-media-contact-and-newsletter do exemplo anterior é registrado através theme.json.

Modelo de padrão de criação de página

Como parte de "construindo com padrões” iniciativas, WordPress 6.0 oferece uma opção modal padrão aos autores de temas para adicionar padrões de layout de página no tema de bloco, permitindo que os usuários do site selecionem padrões de layout de página (por exemplo, uma página sobre, uma página de contato, uma página de equipe, etc.) ao criar uma página. Segue um exemplo retirado de a nota do desenvolvedor:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

Este recurso está atualmente limitado ao tipo de postagem na página apenas e não para “Posts Post Type”, ainda.

A modal de padrão de criação de página também pode ser desabilitado completamente removendo o tipo de bloco pós-conteúdo de todos os padrões. Um exemplo de código de exemplo está disponível aqui.

Você pode seguir e participar da discussão do GitHub nos links listados na seção de recursos abaixo.

Usando o diretório de padrões para construir a página

Os padrões do diretório também podem ser usados ​​para criar o layout de postagem ou página desejado, semelhante aos construtores de páginas. o GutenbergHub equipe criou um aplicativo de criação de páginas online experimental usando padrões diretamente do diretório (vídeo introdutório). Em seguida, os códigos do aplicativo podem ser copiados e colados em um site, o que simplifica muito o processo de criação de layout de página complexo sem codificação.

In este pequeno vídeo, Jamie Marsland demonstra (às 1:30) como o aplicativo pode ser usado para criar um layout de página inteiro semelhante ao construtor de páginas usando as seções de página desejadas do diretório.

Resumindo

Os padrões permitem que os usuários recriem seu layout de conteúdo comumente usado (por exemplo, página principal, chamada etc.) em qualquer página e reduzam as barreiras para apresentar conteúdo em estilos, que antes não eram possíveis sem habilidades de codificação. Assim como o plugins e temas diretórios, o novo padrões O diretório oferece aos usuários opções para usar uma ampla variedade de padrões de suas escolhas do diretório de padrões e gravar e exibir conteúdo com estilo.

Com efeito, padrões de bloco vão mudar tudo e com certeza este é um trocador de jogos recurso no cenário de temas do WordPress. Quando todo o potencial de construindo com padrões esforço se tornar disponível, isso mudará a maneira como projetamos temas de bloco e criamos conteúdo bonito, mesmo com conhecimento de pouco código. Para muitos designers criativos, o diretório de padrões também pode fornecer um caminho apropriado para mostrar seus criatividade.

---

Recursos

WordPress 6.0

• Guia de campo do WordPress 6.0 (Núcleo WordPress)
• Explorando o WordPress 6.0: variações de estilo, interface de bloqueio de bloco, melhorias de escrita – Vídeo de 22 minutos (Anne McCarthy)
• Recursos do WordPress 6.0 em 4 minutos (Dave Smith)
• O que há de novo no WordPress 6.0: novos blocos, troca de estilo, edição de modelos, API Webfonts e muito mais (Kinsta)

Criando padrões

• Introdução aos padrões de bloco (Edição completa do site)
• Vídeo de introdução aos padrões de blocos, 14 minutos (Aprenda WordPress)
• Padrões de bloco (Manual do Editor de Bloco)
• Então você quer fazer padrões de blocos? (Blog WordPress)
• Como criar e compartilhar padrões de bloco de baixo código no WordPress (Vai Papai)

Aprimoramento de padrões (GitHub)

• Construindo com Padrões #38529
• Padrões como elementos de seccionamento #39281
• Adicionar: Opção para escolher um padrão na criação da página. #40034
• Padrões de bloco para criação de páginas. #38787
• Adicionar: Opções de início de página (modelos e padrões) #39147

Artigos do blog

• Padrões Gutenberg: o futuro da construção de páginas no WordPress (Rico Tabor)
• Usando padrões de bloco para acelerar a construção de sites WordPress (Vai Papai)
• Os padrões de bloco mudarão tudo (WP Taverna)

---

Como criar padrões de tema de bloco no WordPress 6.0 publicado originalmente em Truques de CSS. Você deve receba o boletim informativo.

• Coinsmart. A melhor troca de Bitcoin e criptografia da Europa.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. ACESSO LIVRE.
• CryptoHawk. Radar Altcoin. Teste grátis.
• Fonte: https://css-tricks.com/how-to-create-block-theme-patterns-in-wordpress-6-0/