{"id":233395,"date":"2023-02-12T17:07:00","date_gmt":"2023-02-12T14:07:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233395"},"modified":"2022-11-10T23:27:46","modified_gmt":"2022-11-10T20:27:46","slug":"padroes-de-bloco-de-gutenberg-o-olhar-de-um-desenvolvedor","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/padroes-de-bloco-de-gutenberg-o-olhar-de-um-desenvolvedor\/","title":{"rendered":"Padr\u00f5es de bloco de Gutenberg: o olhar de um desenvolvedor"},"content":{"rendered":"\n<p>Uma olhada nos novos padr\u00f5es de blocos do WordPress Gutenberg, aos olhos de um desenvolvedor. Veremos o que s\u00e3o, para que podem ser usados \u200b\u200be uma an\u00e1lise mais profunda de como escrever c\u00f3digo para eles.<\/p>\n<h2>Padr\u00f5es de bloco e seu uso<\/h2>\n<p>Padr\u00f5es de bloco foram introduzidos no WordPress 5.5 (11 de agosto de 2020). Eles s\u00e3o um novo recurso no inseridor de blocos para facilitar a inser\u00e7\u00e3o de uma configura\u00e7\u00e3o predefinida de v\u00e1rios blocos. Desenvolvedores de temas ou plugins podem definir um grupo de blocos, como eles s\u00e3o aninhados, seu conte\u00fado e seus atributos, e os usu\u00e1rios finais podem inserir isso com uma simples opera\u00e7\u00e3o de um clique. A ideia \u00e9 que os usu\u00e1rios finais n\u00e3o precisem mais criar manualmente layouts complexos e todas as suas configura\u00e7\u00f5es personalizadas, e aninha-los em cont\u00eaineres adequados para blocos que eles usam com frequ\u00eancia.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e5135f8834f.png\" alt=\"Padr\u00f5es de bloco de Gutenberg: o olhar de um desenvolvedor\" ><\/a><\/p>\n<p>Depois que um padr\u00e3o de bloco \u00e9 adicionado ao editor, os blocos n\u00e3o sabem que foram adicionados por meio de um padr\u00e3o de bloco. Eles s\u00e3o adicionados como blocos normais, permitindo que os usu\u00e1rios ajustem seu conte\u00fado e configura\u00e7\u00f5es. \u00c9 basicamente um atalho para adicionar uma configura\u00e7\u00e3o de v\u00e1rios blocos.<\/p>\n<p>A ideia \u00e9 boa! Nem todos os usu\u00e1rios finais se sentem \u00e0 vontade para criar uma grande estrutura de blocos aninhados no editor para torn\u00e1-la perfeita. No entanto, at\u00e9 agora, esse recurso \u00e9 principalmente um benef\u00edcio para os desenvolvedores, pois os usu\u00e1rios finais n\u00e3o podem criar seus pr\u00f3prios padr\u00f5es. Para os pr\u00f3prios blocos personalizados dos usu\u00e1rios, eles precisam usar blocos reutiliz\u00e1veis. Mas, especialmente para desenvolvedores de temas, os padr\u00f5es de bloco permitem que eles mostrem aos usu\u00e1rios finais a melhor configura\u00e7\u00e3o de blocos que funciona bem no tema.<\/p>\n<p>O WordPress adicionou um novo suporte de tema para padr\u00f5es de bloco: <code>'core-block-patterns'<\/code>. O Core, desde a vers\u00e3o 5.5.0, executar\u00e1 automaticamente a, <code>add_theme_support('core-block-patterns')<\/code>ent\u00e3o voc\u00ea n\u00e3o precisa fazer isso no seu tema.<\/p>\n<p>Como todas as fun\u00e7\u00f5es do padr\u00e3o de bloco s\u00f3 existem em uma vers\u00e3o muito nova do WordPress, \u00e9 uma boa ideia verificar sua exist\u00eancia primeiro, para que voc\u00ea n\u00e3o quebre sites com vers\u00f5es mais antigas do WordPress. Em todos os exemplos de c\u00f3digo abaixo eu fiz exatamente isso.<\/p>\n<p>O WordPress 5.5 vem com 9 padr\u00f5es de blocos predefinidos (veja a lista abaixo). Padr\u00f5es de bloco s\u00e3o exibidos em categorias de padr\u00e3o (o n\u00facleo adiciona 5 categorias). As categorias de padr\u00e3o de bloco funcionam como categorias de postagem; voc\u00ea pode colocar um padr\u00e3o de bloco em v\u00e1rias categorias. Desenvolvedores de temas e plugins podem registrar seus pr\u00f3prios padr\u00f5es de blocos e categorias de padr\u00f5es de blocos, bem como cancelar o registro dos que est\u00e3o no n\u00facleo. Ent\u00e3o, vamos dar uma olhada em como!<\/p>\n<h2>Padr\u00f5es de bloco e categorias de padr\u00e3o de bloco inclu\u00eddos no WordPress 5.5<\/h2>\n<p>Os padr\u00f5es de bloco enviados no WordPress 5.5 s\u00e3o os seguintes (o namespace e o ID do slug para cada padr\u00e3o s\u00e3o exibidos entre par\u00eanteses):<\/p>\n<ul>\n<li>Dois bot\u00f5es (&#8216; <code>core\/two-buttons<\/code>&#8216;)<\/li>\n<li>Tr\u00eas bot\u00f5es (&#8216; <code>core\/three-buttons<\/code>&#8216;)<\/li>\n<li>Duas colunas de texto (&#8216; <code>core\/text-two-columns<\/code>&#8216;)<\/li>\n<li>Duas colunas de texto com imagens (&#8216; <code>core\/text-two-columns-with-images<\/code>&#8216;)<\/li>\n<li>Tr\u00eas colunas de texto com bot\u00f5es (&#8216; <code>core\/text-three-columns-buttons<\/code>&#8216;)<\/li>\n<li>Duas imagens lado a lado (&#8216; <code>core\/two-images<\/code>&#8216;)<\/li>\n<li>Cabe\u00e7alho grande com um cabe\u00e7alho (&#8216; <code>core\/large-header<\/code>&#8216;)<\/li>\n<li>Cabe\u00e7alho grande com um cabe\u00e7alho e um bot\u00e3o (&#8216; <code>core\/large-header-button<\/code>&#8216;)<\/li>\n<li>Cita\u00e7\u00e3o (&#8216; <code>core\/quote<\/code>&#8216;)<\/li>\n<\/ul>\n<p>As categorias adicionadas no WordPress 5.5 s\u00e3o (seus IDs de slug s\u00e3o exibidos entre par\u00eanteses):<\/p>\n<ul>\n<li>Bot\u00f5es (&#8216; <code>buttons<\/code>&#8216;)<\/li>\n<li>Colunas (&#8216; <code>columns<\/code>&#8216;)<\/li>\n<li>Galeria (&#8216; <code>gallery<\/code>&#8216;)<\/li>\n<li>Cabe\u00e7alhos (&#8216; <code>header<\/code>&#8216; \u2013 n\u00e3o observe &#8216;s&#8217; no final)<\/li>\n<li>Texto (&#8216; <code>text<\/code>&#8216;)<\/li>\n<\/ul>\n<h2>Cancelando o registro de padr\u00f5es de bloqueio<\/h2>\n<p>Voc\u00ea pode cancelar o registro de padr\u00f5es de bloco usando a fun\u00e7\u00e3o <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Basta fornecer uma string com o padr\u00e3o de bloco para remover como par\u00e2metro. Consulte a vis\u00e3o geral acima para obter os padr\u00f5es do bloco principal. Execute esta fun\u00e7\u00e3o dentro de uma fun\u00e7\u00e3o vinculada \u00e0 <code>init<\/code>a\u00e7\u00e3o.<\/p>\n<p>Um exemplo de cancelamento do registro dos padr\u00f5es de bloco principal &#8220;Dois bot\u00f5es&quot; e &#8220;Tr\u00eas bot\u00f5es&#8221;:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern')) {\n        return;\n    }\n    unregister_block_pattern('core\/two-buttons');\n    unregister_block_pattern('core\/three-buttons');\n});<\/code><\/pre>\n<h2>Registrando padr\u00f5es de bloco<\/h2>\n<p>O registro de um novo padr\u00e3o de bloco \u00e9 feito usando a fun\u00e7\u00e3o <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. Aceita dois par\u00e2metros; o primeiro \u00e9 uma string de um nome exclusivo para seu padr\u00e3o, incluindo namespace. A segunda \u00e9 uma s\u00e9rie de configura\u00e7\u00f5es para seu padr\u00e3o de bloco.<\/p>\n<p><strong>Dica<\/strong>: Definir um padr\u00e3o de bloco requer que voc\u00ea forne\u00e7a conte\u00fado HTML bruto para sua configura\u00e7\u00e3o de bloco. Eu n\u00e3o recomendo digitar isso manualmente, pois isso causar\u00e1 facilmente conflitos de bloco inv\u00e1lidos. Em vez disso, v\u00e1 no editor e configure os blocos como voc\u00ea deseja t\u00ea-los em seu padr\u00e3o. Em seguida, clique no &#8220;menu ponto&#8221; na barra de ferramentas do bloco parental e clique em &#8220;Copiar&#8221;. Depois disso, voc\u00ea pode voltar ao seu editor de c\u00f3digo e colar (Ctrl+V). Isso fornece o HTML bruto para a configura\u00e7\u00e3o que voc\u00ea copiou. Use a funcionalidade do editor de c\u00f3digo para substituir todas as novas linhas <code>n<\/code>e certifique-se de escapar aspas corretamente.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-153813-61e513609a439.png\" alt=\"Padr\u00f5es de bloco de Gutenberg: o olhar de um desenvolvedor\" ><\/a><\/p>\n<p>As propriedades para seu padr\u00e3o de bloco s\u00e3o as seguintes (segundo array de argumentos):<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(obrigat\u00f3rio): o nome exib\u00edvel do seu padr\u00e3o de bloco<\/li>\n<li><code>**content**<\/code>(obrigat\u00f3rio): HTML RAW da configura\u00e7\u00e3o do bloco<\/li>\n<li><strong><code>description<\/code><\/strong>: Descri\u00e7\u00e3o do seu padr\u00e3o de bloco. Est\u00e1 visualmente oculto<\/li>\n<li><strong><code>categories<\/code><\/strong>: Uma matriz de categorias para adicionar este padr\u00e3o de bloco. Se voc\u00ea n\u00e3o fornecer essa propriedade, o bloco ser\u00e1 colocado em uma categoria de padr\u00e3o de bloco &quot;Sem categoria&quot;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: uma variedade de palavras-chave que podem ajudar os usu\u00e1rios a encontrar seu padr\u00e3o enquanto pesquisam<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: Forne\u00e7a um n\u00famero inteiro da largura do padr\u00e3o de bloco no insersor. Afeta apenas a visualiza\u00e7\u00e3o no dispositivo de inser\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>Aqui est\u00e1 um exemplo de registro de um padr\u00e3o de bloco que consiste em um bloco de capa de largura total que tem uma cor de fundo, que cont\u00e9m um bloco de t\u00edtulo alinhado ao centro com uma cor de texto espec\u00edfica e um par\u00e1grafo alinhado ao centro de uma cor de texto espec\u00edfica:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern')) {\n        return;\n    }\n    register_block_pattern('awp\/standard-cta-section', [\n        'title' =&gt; __('Standard CTA Section', 'awp'),\n        'keywords' =&gt; ['cta'],\n        'categories' =&gt; ['header'],\n        'viewportWidth' =&gt; 1000,\n        'content' =&gt; \"&lt;!-- wp:cover {\"customOverlayColor\":\"#dadee2\",\"align\":\"full\"} --&gt;n&lt;div class=\"wp-block-cover alignfull has-background-dim\" style=\"background-color:#dadee2\"&gt;&lt;div class=\"wp-block-cover__inner-container\"&gt;&lt;!-- wp:heading {\"align\":\"center\",\"level\":1,\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;h1 class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Section title&lt;\/h1&gt;n&lt;!-- \/wp:heading --&gt;nn&lt;!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#414446\"}}} --&gt;n&lt;p class=\"has-text-align-center has-text-color\" style=\"color:#414446\"&gt;Write your text here.&lt;\/p&gt;n&lt;!-- \/wp:paragraph --&gt;&lt;\/div&gt;&lt;\/div&gt;n&lt;!-- \/wp:cover --&gt;\",\n    ]);\n});<\/code><\/pre>\n<h2>Registrando categorias de padr\u00e3o de bloco<\/h2>\n<p>Os desenvolvedores tamb\u00e9m podem registrar categorias de padr\u00f5es de blocos personalizados. Isso \u00e9 feito com a fun\u00e7\u00e3o <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. Aceita dois par\u00e2metros; primeiro uma string do slug de categoria e depois uma matriz de propriedades. A partir de agora, apenas uma propriedade \u00e9 suportada no segundo argumento; <code>label<\/code>para o nome leg\u00edvel da categoria.<\/p>\n<p>Abaixo est\u00e1 um exemplo de registro de uma categoria de padr\u00e3o de bloco personalizado:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('register_block_pattern_category')) {\n        return;\n    }\n    register_block_pattern_category('awp-patterns', ['label' =&gt; __('AWhitePixel Block Patterns', 'awp')]);\n});<\/code><\/pre>\n<p>Com isso, voc\u00ea pode adicionar &#8216;awp-patterns&#8217; ao <code>categories<\/code>argumento &#8216; &#8216; para <code>register_block_pattern()<\/code>. Lembre-se de que, se uma categoria n\u00e3o tiver padr\u00f5es de bloco registrados, a categoria n\u00e3o ser\u00e1 exibida no inseridor de blocos. Voc\u00ea precisar\u00e1 adicionar pelo menos um padr\u00e3o de bloco nesta categoria para faz\u00ea-lo aparecer.<\/p>\n<h2>Cancelando o registro de categorias de padr\u00e3o de bloco<\/h2>\n<p>Finalmente, h\u00e1 uma fun\u00e7\u00e3o <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>para cancelar o registro de uma categoria de padr\u00e3o de bloco. Forne\u00e7a o slug de categoria como par\u00e2metro. Consulte a vis\u00e3o geral das categorias de padr\u00e3o de bloco acima para categorias principais e seus slugs.<\/p>\n<p>N\u00e3o se esque\u00e7a de que as categorias de padr\u00e3o de bloco sem nenhum padr\u00e3o de bloco atribu\u00eddo a ela n\u00e3o ser\u00e3o vis\u00edveis no insersor de bloco. Portanto, se voc\u00ea cancelar o registro de todos os padr\u00f5es de bloco atribu\u00eddos a uma categoria, a pr\u00f3pria categoria n\u00e3o ser\u00e1 mais vis\u00edvel e voc\u00ea n\u00e3o precisa necessariamente cancelar o registro da categoria. Quaisquer padr\u00f5es de bloco atribu\u00eddos apenas \u00e0 categoria que voc\u00ea est\u00e1 removendo ser\u00e3o movidos para uma categoria &#8220;Sem categoria&#8221;.<\/p>\n<p>Aqui est\u00e1 um exemplo de cancelamento do registro da categoria de padr\u00e3o de bloco principal &#8216;bot\u00f5es&#8217;:<\/p>\n<pre><code>add_action('init', function() {\n    if (!function_exists('unregister_block_pattern_category')) {\n        return;\n    }\n    unregister_block_pattern_category('buttons');\n});<\/code><\/pre>\n<h2>Conclus\u00e3o<\/h2>\n<p>O novo recurso de padr\u00e3o de bloco no WordPress Gutenberg \u00e9 definitivamente um passo mais pr\u00f3ximo de fazer o editor de blocos funcionar mais como um construtor de p\u00e1ginas. Na minha opini\u00e3o, a desvantagem \u00e9 que os usu\u00e1rios finais n\u00e3o podem criar seus pr\u00f3prios padr\u00f5es. Mas \u00e9 uma boa fun\u00e7\u00e3o para desenvolvedores de temas, pois permite que os usu\u00e1rios finais configurem facilmente as configura\u00e7\u00f5es de blocos e layouts que funcionem bem no tema. Este \u00e9 um recurso totalmente novo e provavelmente evoluir\u00e1 e ser\u00e1 aprimorado em um futuro pr\u00f3ximo! Eu, por exemplo, mal posso esperar!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A vis\u00e3o de um desenvolvedor sobre os padr\u00f5es de bloco do WordPress Gutenberg. O que s\u00e3o, para que podem ser usados \u200b\u200be uma vis\u00e3o mais profunda de como escrever c\u00f3digo para eles.<\/p>\n","protected":false},"author":1,"featured_media":223885,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[898,898,722,722,941,941,1110,806,806,816,816,846,846,867,867],"tags":[1170],"class_list":["post-233395","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-gutenberg-8","category-n-a","category-php-8","category-plug-ins","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233395","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=233395"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/233395\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=233395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=233395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=233395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}