{"id":228795,"date":"2022-10-17T14:36:00","date_gmt":"2022-10-17T11:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228795"},"modified":"2022-11-09T04:18:32","modified_gmt":"2022-11-09T01:18:32","slug":"usando-um-modelo-com-innerblocks-no-wordpress-block-editor-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/usando-um-modelo-com-innerblocks-no-wordpress-block-editor-gutenberg\/","title":{"rendered":"Usando um modelo com InnerBlocks no WordPress Block Editor (Gutenberg)"},"content":{"rendered":"\n<p>Ao criar um bloco no WordPress Block Editor (Gutenberg), voc\u00ea pode criar uma \u00e1rea que permite que outros tipos de bloco sejam aninhados dentro do seu bloco. Voc\u00ea faz isso com o <code>InnerBlocks<\/code>componente.<\/p>\n<p>Em nossos outros guias, exploramos anteriormente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">padr\u00f5es<\/a> de blocos e <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelos<\/a> de blocos. Este guia analisa a cria\u00e7\u00e3o de um modelo para blocos aninhados.<\/p>\n<h2>Pr\u00e9-requisitos<\/h2>\n<ul>\n<li>Familiarize-se com a <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cria\u00e7\u00e3o de plugins para WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Criar um plug-in de bloco aninhado<\/h2>\n<p>Depois de executar as etapas no tutorial de <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">cria\u00e7\u00e3o de um plug-in do Gutenberg<\/a>, at\u00e9 (mas n\u00e3o incluindo) <strong>a etapa 5<\/strong>, voc\u00ea deve ter a estrutura pronta para criar o plug-in de bloco aninhado.<\/p>\n<h3>Adicionar InnerBlocks a<code>\/src\/edit.js<\/code><\/h3>\n<p>Abra <code>\/src\/edit.js<\/code>no seu editor e substitua a importa\u00e7\u00e3o pelo <code>useBlockProps<\/code>seguinte:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Isso nos permitir\u00e1 usar o componente InnerBlocks em nosso m\u00e9todo de renderiza\u00e7\u00e3o de edi\u00e7\u00e3o.<\/p>\n<p>Em seguida, altere toda a fun\u00e7\u00e3o Editar para o seguinte:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Isso registra o InnerBlock<\/p>\n<h3>Sa\u00edda dos atributos em<code>\/src\/save.js<\/code><\/h3>\n<p>Abra <code>\/src\/save.js<\/code>no seu editor e substitua a importa\u00e7\u00e3o pelo <code>useBlockProps<\/code>seguinte:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Isso nos permitir\u00e1 usar o componente InnerBlocks em nosso m\u00e9todo save render.<\/p>\n<p>Em seguida, imprima o conte\u00fado do componente Innerblocks substituindo a <code>save<\/code>fun\u00e7\u00e3o pelo seguinte:<\/p>\n<pre><code>export default function save() {\n    return (&lt;div { ...useBlockProps.save() }&gt;\n            &lt;InnerBlocks.Content \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Isso simplesmente gera o valor dos InnerBlocks em um arquivo <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Compilando o Plugin<\/h3>\n<p>Abra o terminal, verifique se voc\u00ea est\u00e1 no diret\u00f3rio raiz do seu plugin e execute o seguinte comando:<\/p>\n<p>O script ir\u00e1 compilar. Se voc\u00ea tiver algum erro, o terminal deve inform\u00e1-lo sobre o que s\u00e3o.<\/p>\n<h2>Adicionando o modelo InnerBlocks<\/h2>\n<p>Para manter as coisas simples, vamos usar exatamente o mesmo modelo que criamos anteriormente para os <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">padr\u00f5es de bloco<\/a> e o guia <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de modelo de bloco.<\/a><\/p>\n<p>O template \u00e9 muito semelhante ao que definimos em nosso <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">guia de templates de blocos<\/a>, por\u00e9m os atributos est\u00e3o em um objeto ao inv\u00e9s de um array multidimensional.<\/p>\n<p>Substitua a <code>Edit<\/code>fun\u00e7\u00e3o pelo seguinte c\u00f3digo:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                templateLock=\"all\"\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Isso cria um modelo para o bloco aninhado. Observe o uso de <code>templateLock<\/code>que est\u00e1 definido como todos. Isso se comporta da mesma forma que o <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloqueio de modelo para o modelo de bloco<\/a> e tem as duas op\u00e7\u00f5es a seguir:<\/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>Voc\u00ea tamb\u00e9m pode <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">definir quais blocos s\u00e3o permitidos dentro dos blocos aninhados<\/a>.<\/p>\n<ol>\n<li>Inserindo e Visualizando o Template InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Voc\u00ea pode inserir o bloco aninhado da mesma forma que qualquer outro bloco, clicando no \u00edcone de mais e pesquisando por <code>Wholesome Plugin<\/code>.<\/p>\n<p>Inserindo o modelo de bloco aninhado<\/p>\n<p>Observe que, como antes, os blocos aninhados dentro dos blocos aninhados n\u00e3o t\u00eam o bloqueio de modelo aplicado a eles.<\/p>\n<p>\u00c9 claro que existem solu\u00e7\u00f5es alternativas para isso, sendo criativo com a forma como voc\u00ea cria uma combina\u00e7\u00e3o de modelos de bloco e blocos aninhados personalizados.<\/p>\n<h3>Visualizando o Bloco<\/h3>\n<p>Depois de alguns ajustes com o SCSS, nosso bloco de sa\u00edda se parece com algo assim:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Usando um modelo com InnerBlocks no WordPress Block Editor (Gutenberg)\" \/>Inserindo o modelo de bloco aninhado<\/p>\n<p>Em vez de bloquear o modelo, voc\u00ea pode restringi-lo declarando quais blocos voc\u00ea tem permiss\u00e3o para inserir nele. Basta substituir a <code>Edit<\/code>fun\u00e7\u00e3o pelo seguinte c\u00f3digo:<\/p>\n<pre><code>export default function Edit() {\n    return (&lt;div { ...useBlockProps() }&gt;\n            &lt;InnerBlocks\n                template={ [\n                    [ 'core\/heading', { level: 2, content: 'Example Nested Block Template' } ],\n                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],\n                    [ 'core\/columns', {},\n                        [\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 1' } ],\n                                    [ 'core\/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],\n                                ]\n                            ],\n                            [ 'core\/column', {}, [\n                                    [ 'core\/heading', { level: 3, content: 'Sub Heading 2' } ],\n                                    [ 'core\/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],\n                                ]\n                            ],\n                        ]\n                    ],\n                ] }\n                allowedBlocks={ [\n                    'core\/column',\n                    'core\/columns',\n                    'core\/heading',\n                    'core\/paragraph',\n                ] }\n            \/&gt;\n        &lt;\/div&gt;\n    );\n}\n<\/code><\/pre>\n<p>Aqui omitimos o <code>templateLock<\/code>argumento e, em vez disso, restringimos nosso bloco aninhado aos seguintes blocos:<\/p>\n<ul>\n<li>Coluna (<code>core\/column<\/code>)<\/li>\n<li>Colunas (<code>core\/column<\/code>s)<\/li>\n<li>Grupo (<code>core\/group<\/code>)<\/li>\n<li>T\u00edtulo (<code>core\/heading<\/code>)<\/li>\n<li>Par\u00e1grafo (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>Novamente, isso n\u00e3o funcionar\u00e1 em nenhum bloco aninhado dentro do modelo.<\/p>\n<ul>\n<li>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<\/li>\n<li>Precisa de algo mais est\u00e1tico? Tente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrar um modelo de bloco<\/a><\/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>Ao criar um bloco no WordPress Block Editor (Gutenberg), voc\u00ea pode criar uma \u00e1rea que permite que outros tipos de bloco sejam aninhados dentro do seu bloco. Voc\u00ea faz isso com o InnerBlo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":223619,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[722,941,920,816,846,867],"tags":[1170],"class_list":["post-228795","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-gutenberg-8","category-outro","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\/228795","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=228795"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228795\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}