Tema de bloques 07: bloques dinámicos e híbridos en producción

Integra bloques dinámicos en un block theme para mostrar datos actualizados sin perder experiencia editorial en el Site Editor.

En un block theme, no todo debe ser estático: hay bloques que necesitan datos vivos, como posts recientes, métricas o listados personalizados.

Para eso están los bloques dinámicos, que renderizan en servidor y permiten mantener contenido actualizado sin editar cada página.

El reto está en equilibrar flexibilidad editorial y control técnico para que el resultado sea estable en frontend y comprensible en editor.

También debes cuidar rendimiento y seguridad: consultas limitadas, escape correcto y atributos validados.

  • Usa render dinámico cuando el contenido cambia por contexto, tiempo o datos del sistema.
  • Bloques estáticos son perfectos para contenido fijo; dinámicos para listas, estados o información dependiente de base de datos.
  • Si el equipo necesita actualizar un módulo en decenas de páginas a la vez, un bloque dinámico evita retrabajo editorial.
  • No conviertas todo en dinámico: añade complejidad solo cuando el beneficio sea claro y medible.
  • Ideal para contenido que cambia con frecuencia.

Cuándo usar bloque dinámico

Usa render dinámico cuando el contenido cambia por contexto, tiempo o datos del sistema.

Bloques estáticos son perfectos para contenido fijo; dinámicos para listas, estados o información dependiente de base de datos.

Si el equipo necesita actualizar un módulo en decenas de páginas a la vez, un bloque dinámico evita retrabajo editorial.

No conviertas todo en dinámico: añade complejidad solo cuando el beneficio sea claro y medible.

  • Ideal para contenido que cambia con frecuencia.
  • Menos mantenimiento manual de páginas.
  • Control centralizado del markup final.
  • Evitar dinámico cuando un patrón estático ya resuelve.

Registrar bloque con render_callback

El render_callback permite construir HTML final en PHP con datos actualizados.

Experiencia editorial en bloques híbridos

Un bloque dinámico útil no solo renderiza bien: también se entiende bien en el editor.

Define atributos claros (por ejemplo, número de elementos o tipo de contenido) para que el editor pueda ajustar comportamiento sin código.

Incluye preview razonable para que la persona que edita entienda qué verá el usuario final.

Si la salida depende de consultas costosas, añade límites y defaults estrictos para proteger rendimiento.

  • Atributos con validación y límites.
  • Preview comprensible en editor.
  • Consultas optimizadas en render_callback.
  • Escape de salida en todo el HTML generado.
WordPress Themes Pro
27

Tema de bloques 07: bloques dinámicos e híbridos en producción

Integra bloques dinámicos en un block theme para mostrar datos actualizados sin perder experiencia editorial en el Site Editor.

Código del tema: recent-posts-compact

📘 Teoría

Cuándo usar bloque dinámico

Usa render dinámico cuando el contenido cambia por contexto, tiempo o datos del sistema.

Bloques estáticos son perfectos para contenido fijo; dinámicos para listas, estados o información dependiente de base de datos.

Si el equipo necesita actualizar un módulo en decenas de páginas a la vez, un bloque dinámico evita retrabajo editorial.

No conviertas todo en dinámico: añade complejidad solo cuando el beneficio sea claro y medible.

  • Ideal para contenido que cambia con frecuencia.
  • Menos mantenimiento manual de páginas.
  • Control centralizado del markup final.
  • Evitar dinámico cuando un patrón estático ya resuelve.

Registrar bloque con render_callback

El render_callback permite construir HTML final en PHP con datos actualizados.

Bloque dinámico de posts recientes
<?php
add_action('init', function () {
  register_block_type('mi-tema/recent-posts-compact', [
    'attributes' => [
      'postsToShow' => [
        'type' => 'number',
        'default' => 4,
      ],
    ],
    'render_callback' => function ($attributes) {
      $limit = isset($attributes['postsToShow']) ? (int) $attributes['postsToShow'] : 4;
      $limit = max(1, min(12, $limit));

      $q = new WP_Query([
        'post_type' => 'post',
        'posts_per_page' => $limit,
        'no_found_rows' => true,
      ]);

      if (!$q->have_posts()) {
        return '<p>' . esc_html__('No hay entradas recientes.', 'mi-tema-bloques') . '</p>';
      }

      ob_start();
      echo '<ul class="recent-posts-compact">';
      while ($q->have_posts()) {
        $q->the_post();
        echo '<li><a href="' . esc_url(get_permalink()) . '">' . esc_html(get_the_title()) . '</a></li>';
      }
      echo '</ul>';
      wp_reset_postdata();

      return ob_get_clean();
    },
  ]);
});

Experiencia editorial en bloques híbridos

Un bloque dinámico útil no solo renderiza bien: también se entiende bien en el editor.

Define atributos claros (por ejemplo, número de elementos o tipo de contenido) para que el editor pueda ajustar comportamiento sin código.

Incluye preview razonable para que la persona que edita entienda qué verá el usuario final.

Si la salida depende de consultas costosas, añade límites y defaults estrictos para proteger rendimiento.

  • Atributos con validación y límites.
  • Preview comprensible en editor.
  • Consultas optimizadas en render_callback.
  • Escape de salida en todo el HTML generado.

🧪 Aprende probando

Ejemplo Ejemplo: atributos mínimos del bloque Definición simple para controlar número de posts desde el editor.

🏁 Retos

Reto Reto: completar registro dinámico Completa el bloque para que use render_callback en PHP.

🧰 Recursos

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .