Genera un bloque Gutenberg de cuenta atrás
Los countdowns convierten. También suelen provocar Cumulative Layout Shift porque los dígitos cambian de anchura y empujan la página. La mayoría de bloques countdown no lo arreglan.
Un bloque Gutenberg generado puede construirse con contenedores de dígitos fijos desde el inicio, así nunca hay shift, y la lógica de expiración corre server-side (para texto visible a SEO) y client-side (para ticking vivo).
¿Por qué generarlo en vez de instalar un plugin existente?
Ultimate Blocks, Kadence, GenerateBlocks incluyen countdowns. Bien. Vienen con toda su librería. Para un countdown puntual no quieres cargar todo.
Un bloque countdown standalone registra un bloque y un script diminuto. Zonas horarias bien: el editor pica timezone, los visitantes ven deadline igual. Al expirar, el bloque cambia a mensaje de expiración server-side, así SEO ve el post-expiry.
Extra: el bloque soporta varios formatos (D/H/M/S, etiquetas on/off, modo compact) vía atributos para que los editores no toquen CSS.
Prompt de ejemplo
Este es el tipo de descripción que genera este plugin. Puedes partir de aquí y ajustar lo que necesites antes de generar.
Nombre del plugin: Acme Countdown
Bloque acme/countdown:
- end_datetime (ISO 8601, requerido)
- timezone (IANA, default "Europe/Madrid")
- format ("d-h-m-s", "h-m-s", "compact")
- show_labels, expiry_message (rich text)
- cta_label, cta_url (mientras activo)
Save: return null (render dinámico).
render_callback PHP:
- Si current >= end_datetime → expiry_message.
- Si no → contenedores de dígito con anchos fijos y data-remaining.
JS front (1KB): lee data-remaining, tick cada 500ms, formatea. rAF para suavidad. Contenedores fijos → cero CLS.
SEO: estado expirado renderizado server-side.Qué suele incluir el plugin generado
- Bloque con atributos conscientes de timezone
- Render server-side con swap al expirar (visible a SEO)
- JS tick con contenedores fijos (cero CLS)
- CTA opcional mientras activo
- Preview editor coincide con front
Formatos, labels y estilos son atributos por instancia. Multi-idioma de expiry_message: describe locales y el bloque elige por site language.
Preguntas frecuentes
¿Y DST?
El countdown termina en el instante exacto independiente de DST. El formato se ajusta porque contamos hasta el UTC fijo.
¿Evergreen per visitante?
Sí. Describe modo evergreen ("48h desde primera visita"); el plugin pone cookie y la expiración es por visitante.