{"id":228785,"date":"2022-10-17T10:25:00","date_gmt":"2022-10-17T07:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228785"},"modified":"2022-11-09T04:16:01","modified_gmt":"2022-11-09T01:16:01","slug":"registre-um-modelo-de-bloco-para-o-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/registre-um-modelo-de-bloco-para-o-wordpress-block-editor-gutenberg\/","title":{"rendered":"Registre um modelo de bloco para o WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>No meu guia anterior, explorei <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">o poder dos padr\u00f5es de blocos<\/a>. Os modelos de bloco s\u00e3o semelhantes, mas em vez de depender de seu cliente para inserir padr\u00f5es de bloco no editor, ele fornece um layout completo assim que insere uma nova postagem.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<ul>\n<li>Instala\u00e7\u00e3o do WordPress<\/li>\n<li>Editor de c\u00f3digo<\/li>\n<\/ul>\n<h2>Crie seu modelo de bloco<\/h2>\n<p>Neste exemplo vou inserir o mesmo <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">padr\u00e3o de bloco que criei no meu guia anterior<\/a>, mas como um modelo de bloco.<\/p>\n<p>Nesse guia, copiamos o HTML da sa\u00edda do editor. Neste guia, faremos algo um pouco diferente e criaremos uma matriz de namespaces, propriedades e conte\u00fado de blocos.<\/p>\n<p>Em sua forma mais simples, um modelo de bloco se parece um pouco com isso:<\/p>\n<pre><code>$block_template = [\n  [ 'core\/heading', [ 'level'   =&gt; 2, 'content' =&gt; 'Example Block Template' ] ],\n  [ 'core\/paragraph', [ 'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.' ] ],\n];\n<\/code><\/pre>\n<p>Como voc\u00ea pode ver, \u00e9 um array, que cont\u00e9m blocos no seguinte padr\u00e3o:<\/p>\n<ul>\n<li>Bloquear namespace<\/li>\n<li>Bloquear Atributos<\/li>\n<\/ul>\n<p>No entanto, queremos usar blocos aninhados, ent\u00e3o vamos passar um terceiro par\u00e2metro para este array de blocos, que \u00e9 o innerBlocks.<\/p>\n<p><strong>Quer apenas a coloca\u00e7\u00e3o do bloco?<\/strong><\/p>\n<p>Observe que voc\u00ea pode deixar os atributos vazios, apenas para fornecer os blocos sem conte\u00fado definido.<\/p>\n<p>A matriz para criar o mesmo bloco que criamos no guia de padr\u00f5es de blocos, precisamos de uma matriz mais complexa, assim:<\/p>\n<pre><code>$block_template = [\n  [\n    'core\/group',\n    [],\n    [\n      [\n        'core\/heading',\n        [\n          'level'   =&gt; 2,\n          'content' =&gt; 'Example Block Template',\n        ]\n      ],\n      [\n        'core\/paragraph',\n        [\n          'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n        ]\n      ],\n      [\n        'core\/columns',\n        [],\n        [\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 1',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                ]\n              ],\n            ]\n          ],\n          [\n            'core\/column',\n            [],\n            [\n              [\n                'core\/heading',\n                [\n                  'level'   =&gt; 3,\n                  'content' =&gt; 'Sub Heading 2',\n                ]\n              ],\n              [\n                'core\/paragraph',\n                [\n                  'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                ]\n              ],\n            ]\n          ],\n        ],\n      ],\n    ]\n  ]\n];\n<\/code><\/pre>\n<h2>Registre o modelo de bloco<\/h2>\n<h3>Registrando um modelo de bloco para um tipo de postagem existente<\/h3>\n<p>Para registrar um modelo de bloco para um tipo de postagem existente (como o <code>post<\/code>tipo de postagem), voc\u00ea pode usar o c\u00f3digo abaixo para substituir o objeto de tipo de postagem.<\/p>\n<pre><code>function register_block_template() {\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<p>Este c\u00f3digo simplesmente define o modelo e (opcionalmente) o <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>tipo.<\/p>\n<p>O c\u00f3digo completo ficaria assim:<\/p>\n<pre><code>function register_block_template() {\n    $block_template = [\n      [\n        'core\/group',\n        [],\n        [\n          [\n            'core\/heading',\n            [\n              'level'   =&gt; 2,\n              'content' =&gt; 'Example Block Template',\n            ]\n          ],\n          [\n            'core\/paragraph',\n            [\n              'content' =&gt; 'Lorem ipsum dolor sit amet labore cras venenatis.',\n            ]\n          ],\n          [\n            'core\/columns',\n            [],\n            [\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 1',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.',\n                    ]\n                  ],\n                ]\n              ],\n              [\n                'core\/column',\n                [],\n                [\n                  [\n                    'core\/heading',\n                    [\n                      'level'   =&gt; 3,\n                      'content' =&gt; 'Sub Heading 2',\n                    ]\n                  ],\n                  [\n                    'core\/paragraph',\n                    [\n                      'content' =&gt; 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.',\n                    ]\n                  ],\n                ]\n              ],\n            ],\n          ],\n        ]\n      ]\n    ];\n\n    $post_type_object                = get_post_type_object( 'post' );\n    $post_type_object-&gt;template      = $block_template;\n    $post_type_object-&gt;template_lock = 'all';\n}\nadd_action( 'init', 'register_block_template' );\n<\/code><\/pre>\n<h3>Registrando um modelo de bloco para um novo tipo de postagem<\/h3>\n<p>Se voc\u00ea estiver registrando um tipo de postagem, poder\u00e1 passar o modelo para o <code>template<\/code>argumento de <code>register_post_type<\/code>.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode passar o <code>[template_lock](https:\/\/wholesomecode.ltd\/#template-lock)<\/code>argumento para <code>register_post_type<\/code>.<\/p>\n<h3>Bloqueio de modelo<\/h3>\n<p>O <code>template_lock<\/code>argumento pode fazer v\u00e1rias coisas dependendo do argumento que \u00e9 passado para ele. Estes est\u00e3o listados no <a href=\"https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-templates\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia de desenvolvimento do Gutenberg<\/a> como:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 impede todas as opera\u00e7\u00f5es. N\u00e3o \u00e9 poss\u00edvel inserir novos blocos, mover blocos existentes ou deletar blocos.<\/li>\n<li><code>insert<\/code>\u2014 impede a inser\u00e7\u00e3o ou remo\u00e7\u00e3o de blocos, mas permite mover os blocos existentes.<\/li>\n<\/ul>\n<p><strong>O bloqueio de modelo n\u00e3o funciona em blocos aninhados<\/strong><\/p>\n<p>O bloqueio de modelo funciona apenas em blocos de n\u00edvel superior. Use isso a seu favor criando um layout que tenha t\u00edtulos fixos, imagens e par\u00e1grafos e uma \u00e1rea de grupo para o seu cliente inserir o conte\u00fado que desejar.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">criar um modelo de bloco aninhado personalizado com InnerBlocks<\/a>.<\/p>\n<p>Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/wholesomecode.ltd\/#allowed-block-types\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">limitar os blocos que voc\u00ea tem permiss\u00e3o para inserir em determinados tipos de postagem<\/a>.<\/p>\n<h2>Use o modelo de bloco<\/h2>\n<p>Para usar o modelo de bloco, basta criar uma nova postagem (ou tipo de postagem personalizada, dependendo de como voc\u00ea configurou as coisas). O modelo ser\u00e1 inserido e agora voc\u00ea ter\u00e1 \u00e1reas de conte\u00fado fixas em sua p\u00e1gina.<\/p>\n<p>Inserir uma postagem mostra o modelo de bloco<\/p>\n<p>Voc\u00ea pode limitar os blocos dispon\u00edveis para v\u00e1rios tipos de postagem usando o c\u00f3digo a seguir.<\/p>\n<pre><code>function filter_allowed_block_types( $allowed_block_types, $post) {\n\n  if ($post-&gt;post_type !== 'post') {\n    return $allowed_block_types;\n  }\n\n  $allowed_block_types = [\n    'core\/column',\n    'core\/columns',\n    'core\/group',\n    'core\/heading',\n    'core\/paragraph',\n  ];\n\n  return $allowed_block_types;\n}\nadd_filter( 'allowed_block_types', 'filter_allowed_block_types', 10, 2 );\n<\/code><\/pre>\n<p>O c\u00f3digo acima limita os blocos permitidos no <code>post<\/code>tipo de postagem ao seguinte:<\/p>\n<ul>\n<li>\n<p>Coluna (<code>core\/column<\/code>)<\/p>\n<\/li>\n<li>\n<p>Colunas (<code>core\/column<\/code>s)<\/p>\n<\/li>\n<li>\n<p>Grupo (<code>core\/group<\/code>)<\/p>\n<\/li>\n<li>\n<p>T\u00edtulo (<code>core\/heading<\/code>)<\/p>\n<\/li>\n<li>\n<p>Par\u00e1grafo (<code>core\/paragraph<\/code>)<\/p>\n<\/li>\n<li>\n<p>Precisa de algo mais flex\u00edvel? Tente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrar um padr\u00e3o de bloco<\/a> em vez disso<\/p>\n<\/li>\n<li>\n<p>Precisa de algo que se aplique a bloqueios infantis? Tente <a href=\"https:\/\/wholesomecode.ltd\/guides\/template-innerblocks-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrar um modelo do InnerBlocks<\/a><\/p>\n<\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>No meu guia anterior, explorei o poder dos padr\u00f5es de blocos. Os modelos de bloco s\u00e3o semelhantes, mas em vez de depender de seu cliente para inserir padr\u00f5es de bloco no editor, ele fornece &#8230;<\/p>\n","protected":false},"author":1,"featured_media":223608,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[930,898,722,867],"tags":[1170],"class_list":["post-228785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-assuntos","category-codigo-2","category-desenvolvedor","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228785","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=228785"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228785\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}