{"id":233356,"date":"2023-02-12T17:03:00","date_gmt":"2023-02-12T14:03:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233356"},"modified":"2022-11-10T20:39:03","modified_gmt":"2022-11-10T17:39:03","slug":"patrones-de-bloques-de-gutenberg-la-mirada-de-un-desarrollador","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/patrones-de-bloques-de-gutenberg-la-mirada-de-un-desarrollador\/","title":{"rendered":"Patrones de bloques de Gutenberg: la mirada de un desarrollador"},"content":{"rendered":"\n<p>Una mirada a los nuevos patrones de bloques de WordPress Gutenberg, a los ojos de un desarrollador. Veremos qu\u00e9 son, para qu\u00e9 se pueden usar y profundizaremos en c\u00f3mo escribir c\u00f3digo para ellos.<\/p>\n<h2>Patrones de bloques y su uso.<\/h2>\n<p>Los patrones de bloque se introdujeron en WordPress 5.5 (11 de agosto de 2020). Son una nueva caracter\u00edstica en el insertador de bloques para insertar m\u00e1s f\u00e1cilmente una configuraci\u00f3n predefinida de m\u00faltiples bloques. Los desarrolladores de temas o complementos pueden definir un grupo de bloques, c\u00f3mo se anidan, su contenido y sus atributos, y los usuarios finales pueden insertarlos con una simple operaci\u00f3n de un solo clic. La idea es que los usuarios finales ya no necesiten crear manualmente dise\u00f1os complejos y todas sus configuraciones personalizadas, y anidarlos en contenedores adecuados para los bloques que usan con frecuencia.<\/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=\"Patrones de bloques de Gutenberg: la mirada de un desarrollador\" ><\/a><\/p>\n<p>Una vez que se agrega un patr\u00f3n de bloque al editor, los bloques no saben que se agregaron a trav\u00e9s de un patr\u00f3n de bloque. Se agregan como bloques normales que permiten a los usuarios modificar su contenido y configuraci\u00f3n. Es b\u00e1sicamente un atajo para agregar una configuraci\u00f3n de m\u00faltiples bloques.<\/p>\n<p>\u00a1La idea es buena! No todos los usuarios finales se sienten c\u00f3modos creando una gran estructura de bloques anidados en el editor para que se vea perfecto. Sin embargo, hasta ahora, esta caracter\u00edstica es principalmente un beneficio para los desarrolladores, ya que los usuarios finales no pueden crear sus propios patrones. Para los propios bloques personalizados de los usuarios, deben seguir usando bloques reutilizables. Pero especialmente para los desarrolladores de temas, los patrones de bloques les permiten realmente mostrar a los usuarios finales la mejor configuraci\u00f3n de bloques que funciona bien en el tema.<\/p>\n<p>WordPress ha agregado un nuevo soporte de tema para patrones de bloque: <code>'core-block-patterns'<\/code>. Core, desde 5.5.0, ejecutar\u00e1 autom\u00e1ticamente una funci\u00f3n <code>add_theme_support('core-block-patterns')<\/code>, por lo que no es necesario que haga esto en su tema.<\/p>\n<p>Dado que todas las funciones de patr\u00f3n de bloque solo existen en una versi\u00f3n muy nueva de WordPress, es una buena idea verificar su existencia primero, para no interrumpir los sitios con versiones anteriores de WordPress. En todos los ejemplos de c\u00f3digo a continuaci\u00f3n, he hecho exactamente eso.<\/p>\n<p>WordPress 5.5 viene con 9 patrones de bloques predefinidos (ver la lista a continuaci\u00f3n). Los patrones de bloques se muestran en categor\u00edas de patrones (el n\u00facleo agrega 5 categor\u00edas). Las categor\u00edas de patrones de bloques funcionan como categor\u00edas de publicaciones; puede poner un patr\u00f3n de bloque en varias categor\u00edas. Los desarrolladores de temas y complementos pueden registrar sus propios patrones de bloques y categor\u00edas de patrones de bloques, as\u00ed como anular el registro de los que est\u00e1n en el n\u00facleo. \u00a1As\u00ed que echemos un vistazo m\u00e1s de cerca a c\u00f3mo!<\/p>\n<h2>Patrones de bloques y categor\u00edas de patrones de bloques incluidos en WordPress 5.5<\/h2>\n<p>Los patrones de bloques incluidos en WordPress 5.5 son los siguientes (el espacio de nombres y el ID de slug de cada patr\u00f3n se muestran entre par\u00e9ntesis):<\/p>\n<ul>\n<li>Dos botones (&#8216; <code>core\/two-buttons<\/code>&#8216;)<\/li>\n<li>Tres botones (&#8216; <code>core\/three-buttons<\/code>&#8216;)<\/li>\n<li>Dos columnas de texto (&#8216; <code>core\/text-two-columns<\/code>&#8216;)<\/li>\n<li>Dos columnas de texto con im\u00e1genes (&#8216; <code>core\/text-two-columns-with-images<\/code>&#8216;)<\/li>\n<li>Tres columnas de texto con botones (&#8216; <code>core\/text-three-columns-buttons<\/code>&#8216;)<\/li>\n<li>Dos im\u00e1genes una al lado de la otra (&#8216; <code>core\/two-images<\/code>&#8216;)<\/li>\n<li>Encabezado grande con un encabezado (&#8216; <code>core\/large-header<\/code>&#8216;)<\/li>\n<li>Encabezado grande con un encabezado y un bot\u00f3n (&#8216; <code>core\/large-header-button<\/code>&#8216;)<\/li>\n<li>Citar (&#8216; <code>core\/quote<\/code>&#8216;)<\/li>\n<\/ul>\n<p>Las categor\u00edas agregadas en WordPress 5.5 son (sus ID de slug se muestran entre par\u00e9ntesis):<\/p>\n<ul>\n<li>Botones (&#8216; <code>buttons<\/code>&#8216;)<\/li>\n<li>Columnas (&#8216; <code>columns<\/code>&#8216;)<\/li>\n<li>Galer\u00eda (&#8216; <code>gallery<\/code>&#8216;)<\/li>\n<li>Encabezados (&#8216; <code>header<\/code>&#8216; \u2013 nota no &#8216;s&#8217; al final)<\/li>\n<li>Texto (&#8216; <code>text<\/code>&#8216;)<\/li>\n<\/ul>\n<h2>Anular el registro de patrones de bloques<\/h2>\n<p>Puede anular el registro de patrones de bloques utilizando la funci\u00f3n <code>[unregister_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern)()<\/code>. Simplemente proporcione una cadena con el patr\u00f3n de bloque para eliminar como par\u00e1metro. Consulte la descripci\u00f3n general anterior para conocer los patrones de bloques b\u00e1sicos. Ejecute esta funci\u00f3n dentro de una funci\u00f3n vinculada a la <code>init<\/code>acci\u00f3n.<\/p>\n<p>Un ejemplo de anulaci\u00f3n del registro de los patrones de bloques principales &quot;Dos botones&quot; y &quot;Tres botones&quot;:<\/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>Registro de patrones de bloques<\/h2>\n<p>El registro de un nuevo patr\u00f3n de bloques se realiza mediante la funci\u00f3n <code>[register_block_pattern](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern)()<\/code>. Acepta dos par\u00e1metros; el primero es una cadena de un nombre \u00fanico para su patr\u00f3n, incluido el espacio de nombres. El segundo es una serie de configuraciones para su patr\u00f3n de bloques.<\/p>\n<p><strong>Sugerencia<\/strong>: la definici\u00f3n de un patr\u00f3n de bloque requiere que proporcione contenido HTML sin procesar para la configuraci\u00f3n de su bloque. No recomiendo escribir esto manualmente, ya que esto f\u00e1cilmente causar\u00e1 conflictos de bloques no v\u00e1lidos. En su lugar, vaya al editor y configure los bloques como desee tenerlos en su patr\u00f3n. Luego haga clic en el &quot;men\u00fa de puntos&quot; en la barra de herramientas del bloque de crianza y haga clic en &quot;Copiar&quot;. Despu\u00e9s de esto, puede volver a su editor de c\u00f3digo y pegar (Ctrl+V). Esto le da el c\u00f3digo HTML sin procesar de la configuraci\u00f3n que copi\u00f3. Use la funcionalidad del editor de c\u00f3digo para reemplazar todas las l\u00edneas nuevas <code>n<\/code>y aseg\u00farese de escapar las comillas correctamente.<\/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=\"Patrones de bloques de Gutenberg: la mirada de un desarrollador\" ><\/a><\/p>\n<p>Las propiedades para su patr\u00f3n de bloque son las siguientes (segunda matriz de argumentos):<\/p>\n<ul>\n<li><strong><code>title<\/code><\/strong>(requerido): el nombre visible de su patr\u00f3n de bloque<\/li>\n<li><code>**content**<\/code>(requerido): HTML RAW de la configuraci\u00f3n del bloque<\/li>\n<li><strong><code>description<\/code><\/strong>: Descripci\u00f3n de su patr\u00f3n de bloque. Est\u00e1 oculto visualmente<\/li>\n<li><strong><code>categories<\/code><\/strong>: una matriz de categor\u00edas para agregar este patr\u00f3n de bloque. Si no proporciona esta propiedad, el bloque se colocar\u00e1 en una categor\u00eda de patr\u00f3n de bloque &quot;Sin categorizar&quot;.<\/li>\n<li><strong><code>keywords<\/code><\/strong>: una variedad de palabras clave que pueden ayudar a los usuarios a encontrar su patr\u00f3n mientras buscan<\/li>\n<li><strong><code>viewportWidth<\/code><\/strong>: Proporcione un n\u00famero entero del ancho del patr\u00f3n de bloque en el insertador. Afecta solo a la vista previa en el insertador.<\/li>\n<\/ul>\n<p>Este es un ejemplo de registro de un patr\u00f3n de bloque que consta de un bloque de portada de ancho completo que tiene un color de fondo, que contiene un bloque de encabezado alineado al centro con un color de texto espec\u00edfico y un p\u00e1rrafo alineado al centro de un color de texto espec\u00edfico:<\/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>Registro de categor\u00edas de patrones de bloques<\/h2>\n<p>Los desarrolladores tambi\u00e9n pueden registrar categor\u00edas de patrones de bloques personalizados. Esto se hace con la funci\u00f3n <code>[register_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#register_block_pattern_category)()<\/code>. Acepta dos par\u00e1metros; primero una cadena de la categor\u00eda slug y segundo una matriz de propiedades. A partir de ahora, solo se admite una propiedad en el segundo argumento; <code>label<\/code>para el nombre legible de la categor\u00eda.<\/p>\n<p>A continuaci\u00f3n se muestra un ejemplo de registro de una categor\u00eda de patr\u00f3n de bloque 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>Con esto, puede agregar &#8216;awp-patterns&#8217; al <code>categories<\/code>argumento &#8216; &#8216; de <code>register_block_pattern()<\/code>. Tenga en cuenta que si una categor\u00eda no tiene patrones de bloques registrados, la categor\u00eda no se mostrar\u00e1 en el insertador de bloques. Deber\u00e1 agregar al menos un patr\u00f3n de bloque en esta categor\u00eda para que aparezca.<\/p>\n<h2>Anular el registro de categor\u00edas de patrones de bloque<\/h2>\n<p>Finalmente, hay una funci\u00f3n <code>[unregister_block_pattern_category](https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-patterns\/#unregister_block_pattern_category)()<\/code>para cancelar el registro de una categor\u00eda de patr\u00f3n de bloque. Proporcione la categor\u00eda slug como par\u00e1metro. Consulte la descripci\u00f3n general de las categor\u00edas de patrones de bloque anterior para conocer las categor\u00edas principales y sus slugs.<\/p>\n<p>No olvide que las categor\u00edas de patrones de bloques sin patrones de bloques asignados no ser\u00e1n visibles en el insertador de bloques. Por lo tanto, si anula el registro de todos los patrones de bloques asignados a una categor\u00eda, la categor\u00eda en s\u00ed ya no estar\u00e1 visible y no es necesario que anule el registro de la categor\u00eda. Cualquier patr\u00f3n de bloque que solo est\u00e9 asignado a la categor\u00eda que est\u00e1 eliminando, se mover\u00e1 a una categor\u00eda &quot;Sin categorizar&quot;.<\/p>\n<p>Aqu\u00ed hay un ejemplo de c\u00f3mo cancelar el registro de la categor\u00eda de patr\u00f3n de bloque central &#8216;botones&#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>Conclusi\u00f3n<\/h2>\n<p>La nueva funci\u00f3n de patr\u00f3n de bloques en WordPress Gutenberg definitivamente est\u00e1 un paso m\u00e1s cerca de hacer que el editor de bloques funcione m\u00e1s como un creador de p\u00e1ginas. En mi opini\u00f3n, la desventaja es que los usuarios finales no pueden crear sus propios patrones. Pero es una buena funci\u00f3n para los desarrolladores de temas ya que permite a los usuarios finales establecer f\u00e1cilmente configuraciones y dise\u00f1os de bloques que funcionen bien en el tema. \u00a1Esta es una caracter\u00edstica completamente nueva y probablemente evolucionar\u00e1 y mejorar\u00e1 en un futuro cercano! Yo por mi parte, no puedo esperar!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La mirada de un desarrollador a los patrones de bloques de WordPress Gutenberg. Qu\u00e9 son, para qu\u00e9 se pueden usar y una mirada m\u00e1s profunda a c\u00f3mo escribir c\u00f3digo para ellos.<\/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":[892,892,810,716,716,935,935,1110,800,800,810,840,840,861,861],"tags":[1172],"class_list":["post-233356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-complementos","category-desarrollador","category-gutenberg-2","category-n-a","category-php-2","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233356","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=233356"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/233356\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223885"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=233356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=233356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=233356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}