¿Cuál es la mejor razón para usar patrones en un block theme?

Los patrones aceleran producción y mantienen coherencia visual sin rehacer bloques desde cero.

Tema de bloques 04: patrones reutilizables que escalan

Crea patrones de bloques orientados a negocio para acelerar edición y mantener consistencia sin duplicar trabajo.

📘 Teoría

Qué hace útil a un patrón

Un patrón no es un bloque bonito; es una solución repetible a un problema editorial.

Define patrones para casos que se repiten: cabeceras de sección, bloques de beneficios, FAQs, CTA finales o grids de tarjetas.

Evita patrones excesivamente rígidos que obliguen a romperlos en cada uso; la estructura debe guiar, no bloquear.

Incluye contenido placeholder realista para que el editor entienda qué texto o medios debe sustituir.

Nombre claro y orientado a uso.
Categoría coherente para encontrarlo rápido.
Estructura robusta pero editable.
Consistencia con tokens de theme.json.

Registrar patrón y categoría en el tema

Registrar por código permite versionar patrones junto al tema y controlarlos en despliegues.

functions.php: categoría + patrón

<?php
add_action('init', function () {
  register_block_pattern_category('mi-tema-marketing', [
    'label' => __('Marketing', 'mi-tema-bloques'),
  ]);

  register_block_pattern('mi-tema/hero-cta', [
    'title'       => __('Hero con CTA', 'mi-tema-bloques'),
    'description' => __('Cabecera con título, texto y botón principal.', 'mi-tema-bloques'),
    'categories'  => ['mi-tema-marketing'],
    'content'     => '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group"><!-- wp:heading --><h2>Tu mensaje principal</h2><!-- /wp:heading --><!-- wp:paragraph --><p>Explica el beneficio en dos líneas.</p><!-- /wp:paragraph --><!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"primary"} --><div class="wp-block-button"><a class="wp-block-button__link has-primary-background-color has-background">Empieza ahora</a></div><!-- /wp:button --></div><!-- /wp:buttons --></div><!-- /wp:group -->',
  ]);
});

QA de patrones antes de release

Un patrón debe verse bien en editor y frontend, con contenidos cortos y largos.

Prueba con textos reales: titulares extensos, párrafos largos y botones con etiquetas variadas.

Valida responsive en móvil para evitar desbordes en columnas o botones del patrón.

Comprueba accesibilidad básica: orden visual, contraste y jerarquía semántica de títulos.

Editor y frontend visualmente alineados.
Sin desbordes en breakpoints pequeños.
Sin dependencia de texto exacto del placeholder.
Documentación breve de cuándo usar cada patrón.

1 Qué hace útil a un patrón 2 Registrar patrón y categoría en el tema 3 QA de patrones antes de release

🧪 Aprende probando

Ejemplo Ejemplo: patrón de 3 beneficios Estructura reutilizable para secciones de ventajas de producto o servicio.

⌄

🏁 Retos

Reto Reto: completar registro de categoría Añade el registro de categoría para organizar patrones del tema.

⌄

🧰 Recursos

Enlaces útiles

Patterns Registering Patterns Pattern Categories Pattern Directory

Test

Comprueba tus conocimientos con un test sobre WordPress Themes Pro.

Test de WordPress Themes Pro

Recursos del curso 30

📘 Glosario 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces

‹

Lección 23

Tema de bloques 03: estilos globales con criterio de sistema

Lección 25

Tema de bloques 05: navegación en FSE sin romper UX

›