Bloques
Un bloque es un fragmento reutilizable de contenido estructurado que insertas en cualquier página o publicación con un único shortcode: {{block:name}}. Cuando se compila el sitio, cada shortcode es reemplazado por el HTML renderizado del bloque: edita el bloque una vez, y cada página que lo incluye cambia.
Cómo funciona la inclusión
En el editor de cuerpo de cualquier página o publicación, escribe:
{{block:my-block-name}}- El nombre debe coincidir con el Nombre Interno de un bloque publicado, en el mismo idioma que la página.
- Un bloque no publicado se omite silenciosamente: el marcador de posición se elimina del resultado en lugar de renderizarse.
- El mismo bloque puede incluirse varias veces en un mismo cuerpo: cada ubicación lo renderiza de forma idéntica.
- Para averiguar dónde se usa un bloque, ábrelo en el panel de administración y consulta su vista de uso, que enumera cada página y publicación cuyo cuerpo lo menciona.
Tipos de bloque simples
Estos tipos no necesitan JSON, solo campos planos:
| Type | Ideal para | Campos clave |
|---|---|---|
| cta | Sección de llamada a la acción | encabezado, subencabezado, texto del botón, URL del botón |
| image | Imagen independiente con leyenda | URL de la imagen, texto alternativo, leyenda |
| quote | Cita destacada | texto de la cita, atribución, etiqueta |
| hero | Banner de ancho completo | encabezado, subencabezado, texto del botón, URL del botón, imagen |
| testimonial | Testimonio de cliente | texto de la cita, atribución, avatar, etiqueta |
| stat | Estadística destacada individual | encabezado (el número), subencabezado (la etiqueta) |
| promo | Imagen + texto en dos columnas | imagen, encabezado, texto del cuerpo, botón |
| embed | Iframe / contenido incrustado de terceros | cuerpo HTML sin procesar, leyenda |
| video | Video incrustado con imagen de portada | URL de inclusión, encabezado, leyenda, imagen de portada |
| form | Formulario de contacto | encabezado, subencabezado, texto de envío, URL de acción |
| newsletter | Franja de suscripción por correo electrónico | encabezado, subencabezado, texto del botón |
| audio | Reproductor de audio incrustado | encabezado, URL del archivo de audio |
| callout | Cuadro de nota / advertencia / consejo | encabezado, texto del cuerpo, variante (información, advertencia, éxito, nota) |
| code_block | Muestra de código con resaltado de sintaxis | idioma, etiqueta opcional, texto del código |
| divider | Línea horizontal entre secciones | ninguno: solo estilo |
| heading | Encabezado de sección independiente | texto del encabezado, nivel (h1 h6), subencabezado opcional |
| spacer | Espacio vertical entre bloques | ninguno: la altura se define mediante los controles de apariencia de relleno/margen |
| text | Sección de texto enriquecido de formato libre | encabezado, texto del cuerpo |
Tipos de bloque estructurados
Estos repiten filas de datos almacenados como JSON; el formulario de administración de cada tipo incluye un editor de filas que escribe el JSON por ti:
| Type | Ideal para | Estructura de datos |
|---|---|---|
| accordion | Preguntas frecuentes / secciones plegables | filas repetidas de título + cuerpo, renderizadas de forma nativa (sin JavaScript) |
| table | Tabla de datos | una fila de encabezado más filas de valores de celda |
| columns | Cuadrícula de características de 2, 3 o 4 columnas | filas repetidas de encabezado, cuerpo, imagen opcional |
| gallery | Cuadrícula de imágenes | filas repetidas de URL de imagen, texto alternativo, leyenda opcional |
| button_group | Fila de botones de llamada a la acción | filas repetidas de texto del botón, URL, estilo opcional; variante de estilo del grupo |
| citations | Lista de fuentes / referencias | filas repetidas de texto de la cita, URL opcional, id de anclaje |
| faq | Sección de preguntas frecuentes con marcado SEO | filas repetidas de pregunta + respuesta; genera automáticamente datos Schema.org FAQPage |
| feature_grid | Lista de características con ícono | filas repetidas de ícono (imagen o glifo), encabezado, cuerpo |
| grid | Diseño de cuadrícula en HTML personalizado de formato libre | celdas HTML sin procesar repetidas; número de columnas y espaciado |
| logo_bar | Franja de logotipos de socios / clientes | filas repetidas de imagen de logotipo, texto alternativo, URL de enlace opcional |
| page_list | Lista enlazada automáticamente de las páginas hijas de una página | una referencia a la página padre: las tarjetas (título, URL, descripción) se generan a partir de datos de página en vivo durante la compilación, sin filas manuales |
| pricing_table | Comparación de planes / precios | filas de nivel repetidas: nombre, precio, período, lista de características, botón opcional, indicador "destacado" opcional |
| team | Lista de equipo / personal | filas repetidas de foto, nombre, cargo, biografía, enlaces opcionales |
| timeline | Historial cronológico o cronograma de proyecto | filas repetidas de fecha, título, cuerpo |
| schedule | Horario semanal recurrente (horarios, misas) más excepciones con fecha | filas repetidas de día/hora/etiqueta semanales, más filas repetidas de excepciones con fecha; genera automáticamente datos Schema.org Event para las próximas excepciones |
Convenciones de seguridad de texto: se acepta HTML enriquecido en un conjunto específico de campos de cuerpo: cuerpos de fila de accordion y columns, cuerpos de embed, texto del cuerpo de callout, respuestas de faq, cuerpos de elemento de feature_grid, celdas de grid, texto del cuerpo de bloques text, y cuerpos de evento de timeline. Cualquier otro campo (títulos, encabezados, URLs de imagen, leyendas, textos de botón) se escapa automáticamente.
Opciones de apariencia para cada bloque
Cada bloque tiene controles de estilo compartidos que se aplican como estilos en línea en su contenedor:
- Color de fondo: un valor hexadecimal, rgb o hsl. También puedes poner aquí el nombre de una clase de utilidad en lugar de un color: esa cadena se adjunta como clase CSS al contenedor en lugar de un estilo de fondo.
- Borde: actívalo, define un ancho y anula el color del borde.
- Color de texto: se aplica a los elementos de encabezado y cuerpo en los tipos que lo admiten.
- Relleno y margen: abreviatura de estilo CSS alrededor de todo el bloque.
Trabajar con bloques en el panel de administración
Los bloques se gestionan desde la pantalla Bloques, una lista paginada agrupada por tipo, con el nombre, idioma, indicador de publicación y fecha de última actualización de cada entrada.
- Los bloques nuevos comienzan en blanco; los errores durante el guardado se muestran todos a la vez.
- Bloques de muestra: la página de lista puede generar un conjunto inicial: hero, CTA, promo, stat, quote y testimonial: con estilo predefinido y en inglés; los bloques existentes con los mismos nombres se dejan intactos.
- Papelera: eliminar un bloque lo mueve a la papelera con un enlace para deshacer, de modo que los errores son recuperables.
- El informe de uso muestra dónde se referencia un bloque.
- Las acciones masivas operan sobre hasta 500 bloques seleccionados: publicar, despublicar, mover a la papelera, duplicar como borradores, cambiar el tipo de bloque (solo a tipos actualmente registrados), y otras. Cualquier cambio desencadena globalmente una compilación del sitio.
- Importar: los bloques (y los fragmentos) pueden incorporarse mediante JSON o CSV.
Cuando cambias un bloque, sus contenedores de shortcode se reconstruyen automáticamente para que el sitio en vivo refleje la actualización.
Extensión: agregar un nuevo tipo de bloque
Los nuevos tipos de bloque son una entrada de registro más dos archivos: registra el slug del tipo en la pantalla Tipos de Bloque (esa tabla es la única autoridad para los tipos válidos), y luego agrega una plantilla de construcción y un formulario de administración para el tipo. Al escribir la plantilla de construcción, escapa los campos controlados por el usuario como de costumbre; los únicos campos de HTML sin procesar esperados son los cuerpos de embed y las filas de cuerpo dentro del contenido de accordion/columns.
Pilas: secuencias reutilizables de bloques
Para secciones más grandes que se repiten en varias páginas, las pilas te permiten exportar/importar, duplicar, ver dónde se usa cada una y comparar revisiones: todo desde la sección Pilas, junto a Bloques.
También en Bloques
El block grid organiza celdas libres en una cuadrícula CSS: sus campos de columnas, espacio y número de celdas, y cómo se renderiza su HTML.
Usa el block feature_grid para mostrar funciones repetidas con icono, título y cuerpo opcionales, con sus campos y reglas de seguridad HTML.
Usa el bloque pricing_table para comparar planes: su encabezado y los campos por nivel de nombre, precio, periodo, características, botón y destacado.
Añade un bloque team: una cuadrícula de personas con foto, nombre, cargo, bio y enlaces opcionales, con sus campos y cómo agregar miembros.
El block timeline: una lista ordenada de eventos con fecha, título y descripción, con sus campos y el tratamiento del HTML.
Usa el block faq para mostrar pares de pregunta y respuesta con datos estructurados FAQPage automáticos: campos, respuestas en HTML y apariencia.
Añade una lista numerada de fuentes al final de un artículo con el block citations: su encabezado, la URL y el texto de cada cita, y los IDs de ancla.
El block form incrusta un formulario en una página o post: cómo se enlaza a un Form por form_id, sus campos de encabezado y botón, y dónde envía.
Usa el block page_list para listar las páginas hijas publicadas de una página padre como cards sincronizadas en el build, con campos y reglas HTML.
Usa el bloque embed para insertar código de terceros, como un iframe, un mapa o un vídeo, con sus campos y la advertencia de HTML sin escapar.
Añade un bloque table: una tabla HTML simple con encabezados y filas, sus campos y cuándo usarla en lugar del bloque de tabla de precios.
El bloque schedule: horario semanal recurrente más excepciones con fecha, con datos Schema.org Event automáticos.