Optimizar el espaciado de listas dentro de bloques de columnas en WordPress (Gutenberg)

En muchos temas de WordPress las listas dentro de bloques de columnas presentan un espaciado que no encaja con el diseño deseado: demasiado separación entre ítems, indentaciones desalineadas, o diferencias entre editor y frontend. Este artículo explica, con todo lujo de detalles, cómo identificar la fuente del problema y aplicar soluciones precisas y seguras —desde un ajuste rápido en CSS hasta la integración en el editor— para controlar el espaciado de las listas dentro de columnas sin afectar el resto del sitio.

Por qué sucede y cómo inspeccionarlo

Las causas habituales son:

• Reglas globales del tema que aplican margen o padding a ul/ol o li.
• Estilos del bloque de columna (.wp-block-columns .wp-block-column) que influyen en el flujo y la tipografía.
• List-style-position (inside / outside) que modifica la alineación visual y el padding del contenedor.
• Diferencias entre estilos del editor (editor-style) y los estilos del frontend.

Pasos para inspeccionar:

1. Abrir la página en el navegador y usar las DevTools (Inspeccionar elemento).
2. Seleccionar la lista dentro del bloque de columna y observar reglas CSS aplicadas (margen, padding, line-height, list-style-position).
3. Repetir en el editor de bloques (Gutenberg) para detectar diferencias.

Estrategia general

La idea es usar selectores específicos para afectar solo las listas dentro de columnas (o solo las columnas a las que señales explícitamente) y ajustar margin/padding/line-height/list-style-position. Evitar cambios globales en ul/ol/li salvo que quieras que apliquen en todo el sitio.

Solución rápida: CSS en Apariencia → Personalizar → CSS adicional

Si necesitas corregirlo rápido y el cambio puede ser global para todas las columnas, pega este CSS en CSS adicional. Ajusta valores según diseño.

/ Espaciado razonable para listas dentro de bloques de columnas /
.wp-block-columns .wp-block-column ul,
.wp-block-columns .wp-block-column ol {
  margin: 0 0 0.5rem 1.25rem / reduce margen superior/inferior y mantiene indentado /
  padding: 0
  line-height: 1.45 / controlar la altura de línea para ritmo vertical /
}

.wp-block-columns .wp-block-column ul li,
.wp-block-columns .wp-block-column ol li {
  margin: 0 0 0.4rem 0 / espacio entre elementos de la lista /
  padding: 0
}

/ Si las viñetas aparecen demasiado separadas del texto /
.wp-block-columns .wp-block-column ul {
  list-style-position: outside / o inside según prefieras /
}

Solución segura: aplicar solo a columnas concretas usando una clase CSS

Recomendado para no afectar otras áreas. En el editor, selecciona la columna (o bloque de columnas) y en la barra lateral añade una clase en Additional CSS class(es) (por ejemplo: tight-lists). Luego aplica CSS solo a esa clase.

/ Clase personalizada aplicada a la columna: tight-lists /
.wp-block-column.tight-lists ul,
.wp-block-column.tight-lists ol {
  margin: 0 0 0.35rem 1.1rem
  line-height: 1.35
}

.wp-block-column.tight-lists ul li,
.wp-block-column.tight-lists ol li {
  margin: 0 0 0.25rem 0
}

Control de listas anidadas

Si tienes sublistas (ul dentro de li) conviene usar reglas específicas para mantener la jerarquía visual adecuada:

/ Espaciado para sublistas /
.wp-block-column.tight-lists ul ul,
.wp-block-column.tight-lists ol ol {
  margin: 0.35rem 0 0.35rem 1.1rem / más indentación para sublistas /
}

.wp-block-column.tight-lists ul ul li {
  margin: 0 0 0.2rem 0
  font-size: 0.95em / opcional: ligera reducción de tamaño para subitems /
}

Ajustes en el editor (Gutenberg) para ver el resultado mientras trabajas

Para que los cambios también aparezcan en el editor, añade un archivo de estilos para el editor o encola el CSS desde functions.php del tema hijo. Ejemplo de snippet para functions.php:

// En functions.php del tema hijo
function tema_hijo_editor_styles() {
    add_theme_support( editor-styles )
    add_editor_style( editor-style.css ) // crea este archivo y pega ahí tu CSS
}
add_action( after_setup_theme, tema_hijo_editor_styles )

En editor-style.css copia las mismas reglas CSS que uses en el frontend para evitar discrepancias.

Consideraciones responsive

Ajusta el espaciado en móviles si es necesario usando media queries. Ejemplo:

/ Ajuste en pantallas pequeñas /
@media (max-width: 600px) {
  .wp-block-column.tight-lists ul li,
  .wp-block-column.tight-lists ol li {
    margin-bottom: 0.28rem
    line-height: 1.35
  }

  .wp-block-column.tight-lists ul,
  .wp-block-column.tight-lists ol {
    margin-left: 1rem
  }
}

Aumentar especificidad o usar !important (cuando sea estrictamente necesario)

Si un tema aplica reglas muy específicas, puede que tu CSS no se aplique. Antes de usar !important intenta aumentar la especificidad, por ejemplo incluyendo el contenedor del bloque: .entry-content .wp-block-column.tight-lists ul li. Si no queda otra, usar !important como último recurso:

.entry-content .wp-block-column.tight-lists ul li {
  margin-bottom: 0.25rem !important
}

Otros ajustes útiles

• list-style-position: inside coloca la viñeta dentro del flujo del texto (puede reducir el espaciado horizontal), outside la coloca fuera. Prueba cuál te encaja.
• padding-left/margin-left: controla la indentación total. No mezcles padding y margin sin propósito claro.
• line-height: fundamental para el ritmo vertical a menudo ajustando solo line-height se resuelve la sensación de demasiado espacio.
• gap: la propiedad gap funciona para contenedores flex/grid, pero no controla el espacio entre elementos de lista por defecto. Para listas sigue usando margin en li.

Checklist antes de publicar

• Probar los cambios en varias resoluciones (desktop/tablet/móvil).
• Verificar en el editor (si añadiste editor-style.css) y en el frontend.
• Comprobar que no has roto otras listas fuera de columnas (usa clase específica si es crítico).
• Limpiar caché (plugins y CDN) tras aplicar CSS para ver resultados reales.
• Evitar uso extendido de !important documenta cualquier uso que quede en producción.

Ejemplo completo práctico

Situación: quieres listas más compactas solo en una columna. Añades la clase tight-lists a la columna y pegas esto en CSS adicional o en tu archivo CSS del tema:

.wp-block-column.tight-lists ul,
.wp-block-column.tight-lists ol {
  margin: 0 0 0.35rem 1.05rem
  padding: 0
  line-height: 1.34
  list-style-position: outside
}

.wp-block-column.tight-lists ul li,
.wp-block-column.tight-lists ol li {
  margin: 0 0 0.22rem 0
  padding: 0
}

/ Sublistas /
.wp-block-column.tight-lists ul ul,
.wp-block-column.tight-lists ol ol {
  margin-left: 1.05rem
  margin-top: 0.35rem
  margin-bottom: 0.35rem
}

Con esto mantienes control total del espaciado dentro de las columnas sin afectar otras partes del sitio.

Resumen final

Optimizar el espaciado de listas dentro de bloques de columnas es, en la práctica, cuestión de:

• Inspeccionar qué reglas afectan a tus listas.
• Decidir si el cambio será global o limitado a columnas concretas (usar clases es preferible).
• Ajustar margin/padding/line-height y list-style-position.
• Sincronizar estilos en el editor si necesitas previsualizar el resultado mientras trabajas.

Aplicando selectores específicos y probando en móviles y editor, conseguirás un ritmo visual coherente y controlado para las listas dentro de tus columnas en WordPress.