{"id":228349,"date":"2022-10-17T15:04:00","date_gmt":"2022-10-17T12:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228349"},"modified":"2022-11-09T02:00:07","modified_gmt":"2022-11-08T23:00:07","slug":"uso-de-una-plantilla-con-innerblocks-en-el-editor-de-bloques-de-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/uso-de-una-plantilla-con-innerblocks-en-el-editor-de-bloques-de-wordpress-gutenberg\/","title":{"rendered":"Uso de una plantilla con InnerBlocks en el editor de bloques de WordPress (Gutenberg)"},"content":{"rendered":"\n<p>Cuando crea un bloque en el Editor de bloques de WordPress (Gutenberg), puede crear un \u00e1rea que permita anidar otros tipos de bloques dentro de su bloque. Haces esto con el <code>InnerBlocks<\/code>componente.<\/p>\n<p>En nuestras otras gu\u00edas, exploramos previamente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">patrones<\/a> de bloques y <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">plantillas de bloques<\/a>. Esta gu\u00eda analiza la creaci\u00f3n de una plantilla para bloques anidados.<\/p>\n<h2>requisitos previos<\/h2>\n<ul>\n<li>Familiar\u00edcese con <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la creaci\u00f3n de complementos para WordPress Gutenberg<\/a><\/li>\n<\/ul>\n<h2>Crear un complemento de bloque anidado<\/h2>\n<p>Despu\u00e9s de haber llevado a cabo los pasos en el tutorial de <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">creaci\u00f3n de un complemento de Gutenberg<\/a>, hasta (pero sin incluir) el <strong>paso 5<\/strong>, debe tener el marco en su lugar para crear el complemento de bloque anidado.<\/p>\n<h3>A\u00f1adir InnerBlocks a<code>\/src\/edit.js<\/code><\/h3>\n<p>\u00c1bralo <code>\/src\/edit.js<\/code>en su editor y reemplace la importaci\u00f3n por <code>useBlockProps<\/code>lo siguiente:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Esto nos permitir\u00e1 usar el componente InnerBlocks en nuestro m\u00e9todo de procesamiento de edici\u00f3n.<\/p>\n<p>Luego cambie toda la funci\u00f3n Editar a lo siguiente:<\/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>Esto registra el InnerBlock<\/p>\n<h3>Salida de los atributos en<code>\/src\/save.js<\/code><\/h3>\n<p>\u00c1bralo <code>\/src\/save.js<\/code>en su editor y reemplace la importaci\u00f3n por <code>useBlockProps<\/code>lo siguiente:<\/p>\n<pre><code>import { InnerBlocks, useBlockProps } from '@wordpress\/block-editor';\n<\/code><\/pre>\n<p>Esto nos permitir\u00e1 usar el componente InnerBlocks en nuestro m\u00e9todo de guardar renderizado.<\/p>\n<p>A continuaci\u00f3n, genere el contenido del componente Innerblocks reemplazando la <code>save<\/code>funci\u00f3n con lo siguiente:<\/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>Esto simplemente genera el valor de InnerBlocks en un archivo <code>&lt;div&gt;<\/code>.<\/p>\n<h3>Compilando el complemento<\/h3>\n<p>Abra la terminal, aseg\u00farese de estar en el directorio ra\u00edz de su complemento y ejecute el siguiente comando:<\/p>\n<p>El script se compilar\u00e1. Si tiene alg\u00fan error, la terminal debe informarle cu\u00e1les son.<\/p>\n<h2>Agregar la plantilla InnerBlocks<\/h2>\n<p>Para simplificar las cosas, vamos a utilizar exactamente la misma plantilla que creamos anteriormente para los <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">patrones de bloques<\/a> y la gu\u00eda <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">de plantillas de bloques.<\/a><\/p>\n<p>La plantilla es muy similar a la que definimos en nuestra <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gu\u00eda de plantillas de bloques<\/a>, sin embargo, los atributos est\u00e1n en un objeto en lugar de una matriz multidimensional.<\/p>\n<p>Reemplace la <code>Edit<\/code>funci\u00f3n con el siguiente 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>Esto crea una plantilla para el bloque anidado. Tenga en cuenta el uso de los <code>templateLock<\/code>cuales se establece en todos. Se comporta igual que el <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/#template-lock\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloqueo de plantilla para la plantilla de bloque<\/a> y tiene las siguientes dos opciones:<\/p>\n<ul>\n<li><code>all<\/code>\u2014 impide todas las operaciones. No es posible insertar nuevos bloques, mover bloques existentes o eliminar bloques.<\/li>\n<li><code>insert<\/code>\u2014 evita insertar o quitar bloques, pero permite mover bloques existentes.<\/li>\n<\/ul>\n<p>Tambi\u00e9n puede <a href=\"https:\/\/wholesomecode.ltd\/#allowed-blocks-for-nested-blocks\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">definir qu\u00e9 bloques est\u00e1n permitidos dentro de los bloques anidados<\/a>.<\/p>\n<ol>\n<li>Inserci\u00f3n y visualizaci\u00f3n de la plantilla InnerBlocks<\/li>\n<\/ol>\n<hr \/>\n<p>Puede insertar el bloque anidado de la misma manera que cualquier otro bloque, haciendo clic en el \u00edcono m\u00e1s y buscando <code>Wholesome Plugin<\/code>.<\/p>\n<p>Inserci\u00f3n de la plantilla de bloques anidados<\/p>\n<p>Tenga en cuenta que, como antes, los bloques anidados dentro de los bloques anidados no tienen aplicado el bloqueo de plantilla.<\/p>\n<p>Por supuesto, existen soluciones para esto, al ser creativo con la forma en que crea una combinaci\u00f3n de plantillas de bloques y bloques anidados personalizados.<\/p>\n<h3>Ver el bloque<\/h3>\n<p>Despu\u00e9s de jugar un poco con el SCSS, nuestro bloque de salida se parece a esto:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-168925-61e7f7ef79395.png\" alt=\"Uso de una plantilla con InnerBlocks en el editor de bloques de WordPress (Gutenberg)\" \/>Inserci\u00f3n de la plantilla de bloques anidados<\/p>\n<p>En lugar de bloquear la plantilla, puede restringirla indicando qu\u00e9 bloques puede insertar en ella. Simplemente reemplace la <code>Edit<\/code>funci\u00f3n con el siguiente 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>Aqu\u00ed omitimos el <code>templateLock<\/code>argumento y en su lugar restringimos nuestro bloque anidado a los siguientes bloques:<\/p>\n<ul>\n<li>columna (<code>core\/column<\/code>)<\/li>\n<li>Columnas (<code>core\/column<\/code>s)<\/li>\n<li>Grupo (<code>core\/group<\/code>)<\/li>\n<li>Encabezado (<code>core\/heading<\/code>)<\/li>\n<li>P\u00e1rrafo (<code>core\/paragraph<\/code>)<\/li>\n<\/ul>\n<p>Nuevamente, esto no funcionar\u00e1 en ning\u00fan bloque anidado dentro de la plantilla.<\/p>\n<ul>\n<li>\u00bfNecesitas algo m\u00e1s flexible? Intente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-pattern-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrar un patr\u00f3n de bloque<\/a> en su lugar<\/li>\n<li>\u00bfNecesitas algo m\u00e1s est\u00e1tico? Intente <a href=\"https:\/\/wholesomecode.ltd\/guides\/register-block-template-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">registrar una plantilla de bloque<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando crea un bloque en el Editor de bloques de WordPress (Gutenberg), puede crear un \u00e1rea que permita anidar otros tipos de bloques dentro de su bloque. Haces esto con el 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":[810,716,935,914,840,861],"tags":[1172],"class_list":["post-228349","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-complementos","category-desarrollador","category-gutenberg-2","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228349"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228349\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223619"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}