Tutorial de Advanced Patterns en Gutenberg

Contents

Tutorial de Advanced Patterns en Gutenberg

En este artículo encontrarás un recorrido exhaustivo y detallado para dominar los Advanced Patterns en el editor de bloques Gutenberg de WordPress. Se abordarán conceptos, ejemplos prácticos, recomendaciones de diseño y buenas prácticas.

Índice

¿Qué son los Patterns y por qué avanzarlos
Registro y organización de Advanced Patterns
Creación de patrones dinámicos y condicionales
Variaciones de patrones y personalización
Estilos y CSS inline en Patterns
Rendimiento y buenas prácticas
Ejemplos prácticos de código
Fuentes y enlaces recomendados

1. ¿Qué son los Patterns y por qué avanzarlos

Un Pattern en Gutenberg es una colección predefinida de bloques organizados para estructurar contenido de manera rápida y consistente. Mientras los patrones básicos cubren casos comunes (encabezados con evocaciones, galerías sencillas, llamados a la acción), los Advanced Patterns permiten:

Incorporar lógica condicional o datos dinámicos desde APIs.
Registrar patrones específicos según roles o tipos de contenido.
Crear Variations que respondan a atributos del bloque padre.

2. Registro y organización de Advanced Patterns

Para mantener un proyecto limpio, es esencial:

Estructurar los archivos en carpetas (src/patterns/).
Nombrado claro: hero-featured.js, dynamic-latest-posts.php.
Registrar patrones usando register_block_pattern (PHP) o wp.blocks.registerBlockPattern (JS).

2.1. Ejemplo en PHP

  
add_action(init, function() {  
  register_block_pattern(  
    mi-plugin/hero-avanzado,  
    [  
      title       => Hero Avanzado,  
      description => Hero con imagen dinámica y llamado a la acción,  
      categories  => [featured],  
      content     => ...,  
    ]  
  )  
})

3. Creación de patrones dinámicos y condicionales

Los Dynamic Patterns se generan en tiempo real, obteniendo datos desde PHP. Son útiles para llamadas a listas de posts, eventos o productos.

3.1. Patrón dinámico de últimos posts

  
// En functions.php  
add_action(init, function() {  
  register_block_pattern(  
    mi-plugin/latest-posts,  
    [  
      title       => Últimos Posts Dinámicos,  
      render_callback => render_latest_posts_pattern,  
      categories  => [text],  
    ]  
  )  
})  

function render_latest_posts_pattern(attributes) {  
  posts = get_posts([numberposts => 3])  
  ob_start()  
  echo   
  foreach(posts as post) {  
    echo .esc_html(post->post_title).  
  }  
  echo   
  return ob_get_clean()  
}

4. Variaciones de patrones y personalización

Las Variations permiten una misma base de patrón con ajustes en atributos como colores, disposición o tipografía.

Atributo	Variación A	Variación B
Color de fondo	#ffffff	#f5f5f5
Tipografía	Serif	Sans-serif

5. Estilos y CSS inline en Patterns

Para respetar la filosofía de diseño minimalista, recomendamos usar CSS inline controlado o asignar classes y agrupar estilos en un único archivo separado.

6. Rendimiento y buenas prácticas

Minimizar llamadas a funciones costosas dentro de render callbacks.
Cachear resultados de consultas complejas (transients).
Validar y sanear atributos siempre.
Lazy-load imágenes usando atributos nativos (loading=lazy).

7. Ejemplos prácticos de código

7.1. Patrón con condición de rol de usuario

  
add_action(init, function() {  
  register_block_pattern(  
    mi-plugin/only-admin-notice,  
    [  
      title => Aviso solo Administradores,  
      render_callback => function() {  
        if (!current_user_can(administrator)) {  
          return   
        }  
        return Bienvenido, administrador.  
      }  
    ]  
  )  
})

8. Fuentes y enlaces recomendados

Acepto donaciones de BAT's mediante el navegador Brave 🙂

Tutorial de Advanced Patterns en Gutenberg