Genera un bloque Gutenberg de tabla de precios
Toda landing SaaS tiene tabla de precios, y la mayoría se montan con librerías de bloques genéricas. El resultado suele estar OK pero rara vez optimizado para conversión ni SEO.
Un bloque dedicado te deja controlar lo importante: alineación consistente entre tiers, toggle mensual/anual funcional, tooltips en features complejas y structured data que dice a Google qué cuesta cada tier.
¿Por qué generarlo en vez de instalar un plugin existente?
Kadence y GenerateBlocks incluyen pricing tables. Funcionan. El toggle mensual/anual que ofrecen es cosmético — cambia un número. Un toggle correcto cambia el contexto entero: precios distintos, URLs CTA distintas (porque el Stripe price id difiere), anotaciones "ahorras 2 meses" distintas.
El bloque generado maneja el toggle correctamente como estado a nivel de bloque, mantiene las CTAs sincronizadas y emite JSON-LD Product + Offer para que cada plan sea machine-readable.
Alineación entre features es la segunda victoria. Si en tier B un feature es largo y envuelve, el equivalente en tier A mantiene su posición vertical vía CSS grid — sin drift.
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 Pricing
Bloque acme/pricing-table con 3 InnerBlocks acme/pricing-tier.
Atributos tier:
- name, tagline
- price_monthly, price_yearly, currency
- cta_label, cta_url_monthly, cta_url_yearly
- features: [{label, tooltip?, included}]
- highlighted
Toggle arriba. Estado a nivel bloque (JS, aria-pressed).
Features en CSS grid entre tiers para alineación vertical de la nth feature.
Schema.org: cada tier emite Product + Offer con precio del periodo actual.
Toggle accesible por teclado. Tooltip como <details> (zero JS fallback).Qué suele incluir el plugin generado
- Estructura parent + child para tiers
- Toggle cambia precio, CTA y divisa
- CSS grid alineación entre tiers
- Schema.org Product + Offer por tier
- Tooltip vía <details> (sin JS)
- Estilo destacado para tier recomendado
Número tiers, divisa, formato features y estilo highlight por instancia. Divisas con Intl.NumberFormat.
Preguntas frecuentes
¿Afecta el toggle al SEO?
JSON-LD emite ambos periodos; Google ve superficie completa. El toggle visible es para usuarios.
¿Conectar con Stripe checkout links?
Sí. Mete el Payment Link URL en cta_url_monthly/yearly. Sin backend.