register_block_pattern<\/code>voc\u00ea pode criar rapidamente um padr\u00e3o de bloco para voc\u00ea ou seus clientes.<\/p>\nPr\u00e9-requisitos<\/h2>\n\n- Instala\u00e7\u00e3o do WordPress<\/li>\n
- Editor de c\u00f3digo<\/li>\n<\/ul>\n
Crie seu padr\u00e3o de bloco<\/h2>\n
Voc\u00ea cria padr\u00f5es de blocos a partir dos blocos registrados em seu site. Estes podem ser blocos principais ou qualquer n\u00famero de blocos personalizados ou de terceiros.<\/p>\n
Comece usando o editor do WordPress para criar um layout de bloco. Voc\u00ea pode usar as configura\u00e7\u00f5es para tornar isso t\u00e3o complexo ou t\u00e3o simples quanto desejar.<\/p>\n
Neste exemplo, vamos mant\u00ea-lo simples e simplesmente criar um padr\u00e3o de bloco com as seguintes estruturas:<\/p>\n
\n- Bloco de grupo\n
\n- Cabe\u00e7alho<\/li>\n
- Par\u00e1grafo<\/li>\n
- Colunas\n
\n- Coluna 1\n
\n- Cabe\u00e7alho<\/li>\n
- Par\u00e1grafo<\/li>\n<\/ul>\n<\/li>\n
- Coluna 2\n
\n- Cabe\u00e7alho<\/li>\n
- Par\u00e1grafo<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Depois de construir seu padr\u00e3o de bloco, basta copiar o c\u00f3digo que foi gerado para voc\u00ea.<\/p>\n
Copie o c\u00f3digo do padr\u00e3o de bloco<\/p>\n
Para fazer isso, v\u00e1 para os tr\u00eas pontos no canto superior direito do editor (op\u00e7\u00f5es rotuladas) e selecione ‘Editor de c\u00f3digo’. Isso mostrar\u00e1 o HTML por tr\u00e1s do padr\u00e3o de bloco que voc\u00ea acabou de criar.<\/p>\n
Copie este c\u00f3digo em sua \u00e1rea de transfer\u00eancia.<\/p>\n
Registre o padr\u00e3o de bloco<\/h2>\n
Cole este c\u00f3digo do editor de blocos em seu editor de c\u00f3digo. Se voc\u00ea n\u00e3o tiver certeza de onde, poder\u00e1 usar o functions.php<\/code>do seu tema.<\/p>\nCertifique-se de pass\u00e1-lo para uma vari\u00e1vel colocando aspas simples ('<\/code>) ao redor do texto colado, assim:<\/p>\n$block_pattern_content = '\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<h2>Example Block Pattern<\/h2>\n\n<p>Lorem ipsum dolor sit amet labore cras venenatis.<\/p>\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<h3>Sub Heading 1<\/h3>\n\n<p>Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.<\/p>\n<\/div>\n\n<div class=\"wp-block-column\">\n<h3>Sub Heading 2<\/h3>\n\n<p>Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n';\n<\/code><\/pre>\nVoc\u00ea pode precisar fazer alguns escapes dos caracteres, dependendo da complexidade do seu padr\u00e3o de bloco.<\/p>\n
Em seguida, precisamos passar isso para a register_block_pattern<\/code>fun\u00e7\u00e3o:<\/p>\nregister_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'text',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\n\u00c9 isso, o padr\u00e3o de bloco \u00e9 registrado.<\/p>\n
Quebrarregister_block_pattern<\/code><\/h3>\n\n- Namespace<\/strong> \u2014 (
wholesomecode\/example-block-pattern<\/code>) \u00e9 o namespace do padr\u00e3o de bloco. Certifique-se de que isso seja exclusivo para seu padr\u00e3o de bloco. Se precisarmos cancelar o registro do padr\u00e3o de bloco, esta \u00e9 a string que precisaremos.<\/li>\n- Categorias<\/strong> \u2014 Esta \u00e9 a categoria do padr\u00e3o de bloco em que o padr\u00e3o de bloco aparecer\u00e1, quando inserirmos nosso padr\u00e3o de bloco. Tamb\u00e9m podemos adicionar nossas pr\u00f3prias categorias<\/a>.<\/li>\n
- Conte\u00fado<\/strong> \u2014 Este \u00e9 o HTML que gera o padr\u00e3o de bloco. Este exemplo usa a vari\u00e1vel que criamos no editor.<\/li>\n
- Descri\u00e7\u00e3o<\/strong> \u2014 Uma descri\u00e7\u00e3o do padr\u00e3o de bloco.<\/li>\n
- Palavras<\/strong> -chave \u2014 Palavras-chave que podem ser usadas para pesquisar o padr\u00e3o de bloco.<\/li>\n
- T\u00edtulo<\/strong> \u2014 O t\u00edtulo do padr\u00e3o de bloco.<\/li>\n
- Largura<\/strong> da janela de visualiza\u00e7\u00e3o \u2014 A janela de visualiza\u00e7\u00e3o do padr\u00e3o de bloco, usada para a \u00e1rea de visualiza\u00e7\u00e3o.<\/li>\n<\/ul>\n
Insira o padr\u00e3o de bloco<\/h2>\n
Para inserir o padr\u00e3o de bloco, basta usar o sinal de mais no canto superior esquerdo do editor e selecionar os padr\u00f5es de bloco.<\/p>\n
Selecione a categoria na qual voc\u00ea registrou seu padr\u00e3o e ela deve aparecer.<\/p>\n
Inserindo o padr\u00e3o de bloco<\/p>\n
Alternativamente, voc\u00ea pode pesquisar pelas palavras-chave que voc\u00ea registrou.<\/p>\n
Para cadastrar uma categoria de bloco, basta utilizar a register_block_pattern_category<\/code>fun\u00e7\u00e3o.<\/p>\nregister_block_pattern_category(\n 'my-client',\n [\n 'label' => esc_html__( 'My Client Patterns', 'wholesome-plugin' ),\n ]\n);\n<\/code><\/pre>\nEnt\u00e3o voc\u00ea pode usar a categoria que voc\u00ea acabou de registrar em seu c\u00f3digo de padr\u00e3o de bloco, assim:<\/p>\n
register_block_pattern(\n 'wholesomecode\/example-block-pattern',\n [\n 'categories' => [\n 'my-client',\n ],\n 'content' => $block_pattern_content,\n 'description' => 'An example block pattern',\n 'keywords' => 'example',\n 'title' => 'Example Block Pattern',\n 'viewportWidth' => 800,\n ],\n);\n<\/code><\/pre>\nAgora, quando voc\u00ea encontrar seu padr\u00e3o de bloco, ele estar\u00e1 localizado em sua categoria personalizada:<\/p>\n
![\"Registre](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168978-61e7f9e9b9076.png\")
Categoria de padr\u00e3o de bloco personalizado<\/p>\n
Agora voc\u00ea pode agrupar todos os padr\u00f5es de blocos personalizados que acabou de criar para seu cliente em um s\u00f3 lugar.<\/p>\n