Cuadrícula

El block grid dispone una cantidad fija de celdas de forma libre en una CSS grid. Acude a él cuando necesitas una disposición personalizada de contenido, imágenes u otros blocks que no encaja en uno de los tipos más estructurados (feature grid, pricing table, team, etc.).

Campos

Campo	Descripción	¿Obligatorio?
heading	Encabezado de la sección mostrado encima de la cuadrícula. Ejemplo de placeholder: "Featured items".	No
grid_cols	Número de columnas, seleccionado de 1 a 4. De forma predeterminada es 2.	No
grid_gap	Valor de gap de CSS entre celdas (por ejemplo 1rem). De forma predeterminada es 1rem.	No
cell_count	Número de celdas a renderizar, seleccionado de 1 a 6. De forma predeterminada es 4 (o el número de celdas existentes).	No
Cell 1 ... Cell N	Un cuadro de texto libre por celda (N = cell_count). Cada cuadro acepta HTML sin procesar, y su placeholder indica que puedes anidar un shortcode como {{block:my-block-name​}} dentro de él.	No

Seguridad HTML

heading se escapa y renderiza como texto plano. El cuerpo de cada celda se renderiza sin escapar, así que las celdas aceptan HTML sin procesar. Este es también el único tipo de block en el que el contenido de una celda puede contener por sí mismo un shortcode {{block:...​}}: los shortcodes de blocks anidados dentro de una celda de la cuadrícula se resuelven recursivamente en el momento del build, de modo que puedes componer otros blocks (un callout, un embed, incluso otra cuadrícula) dentro de una celda de la cuadrícula.

Cómo usarlo

{{block:homepage-services-grid​}}

Coloca el shortcode en el cuerpo de una página o entrada donde quieras que aparezca la cuadrícula. Define grid_cols y grid_gap en el editor del backend para controlar la disposición; cada celda se edita como su propio cuadro de texto.

Ejemplo

Una sección de "Services" de una página de inicio con 3 columnas y 3 celdas, cada celda con un pequeño fragmento de HTML escrito a mano:

Campo	Valor
heading	Services
grid_cols	3
grid_gap	1.5rem
cell_count	3
Cell 1	<h3>Consulting</h3><p>Strategy and roadmap work.</p>
Cell 2	<h3>Implementation</h3><p>Hands-on build and migration.</p>
Cell 3	{{block:support-callout​}}

La celda 3 muestra la capacidad de blocks anidados: en lugar de escribir HTML directamente, el editor coloca un shortcode para un block callout existente, que se resuelve y renderiza en su lugar cuando la página se compila.