Tutorial WordPress: Corregir espacios excesivos entre bloques Gutenberg con CSS

Introducción

Gutenberg (el editor de bloques de WordPress) aplica espaciados entre bloques que, dependiendo del tema y de estilos heredados de CSS, pueden parecer excesivos o inconsistentes en el editor y/o en el front-end. Este tutorial explica de forma detallada cómo diagnosticar y corregir esos espacios excesivos usando CSS y, cuando procede, con ajustes de theme.json o funciones en functions.php. Se muestran varias estrategias —desde la más segura (theme.json) hasta correcciones CSS puntuales— y se indican ventajas, riesgos y recomendaciones.

Conceptos clave que necesitas entender

Bloques y contenedores: Muchos bloques de Gutenberg llevan clases como wp-block, wp-block-paragraph, wp-block-heading, wp-block-group, wp-block-columns, etc. El espaciado puede venir del propio bloque (márgenes en p, h2, etc.) o de reglas generales que aplican entre bloques (sibling selectors).
Variable CSS global de gap: theme.json puede definir settings.spacing.blockGap, que genera la variable CSS –wp–style–block-gap. Si el tema usa esta variable, ajustarla es la forma más “oficial” y compatible de controlar el espaciado.
Editor vs Front-end: Los estilos del editor (editor-style) y los estilos del front-end pueden ser distintos. Si arreglas algo solo en el front-end, puede que el editor siga mostrando espacios diferentes y viceversa.
Reglas sibling: Reglas como .wp-block .wp-block (o variantes con contenedores) son muy comunes para establecer separación entre bloques. Cambiarlas ajusta el espaciado entre bloques hermanos.

Proceso recomendado — diagnóstico rápido

Abre la página con el problema en el navegador y activa las herramientas de desarrollo (Inspector).
Selecciona el bloque que parece generar espacio y observa el panel Computed para ver márgenes (margin-top / margin-bottom) y paddings.
Revisa las reglas CSS aplicadas —especialmente busca .wp-block .wp-block, p, h2, h3, .wp-block-paragraph, .wp-block-heading y cualquier variable –wp–style–block-gap.
Decide tu estrategia: ajuste de theme.json (recomendado si controlas el tema), o CSS front-end/editor para un ajuste rápido.

Solución 1 — Recomendada: controlar el gap con theme.json

Si tu tema usa theme.json (temas modernos), lo ideal es definir la escala y el valor del bloque gap. Esto aplica de forma nativa tanto al editor como —cuando el tema lo soporta— al front-end.

Ejemplo mínimo de theme.json:

{
  version: 2,
  settings: {
    spacing: {
      blockGap: 1rem,
      units: [ px, em, rem, % ]
    }
  }
}

Notas:

Si el tema no utiliza esa configuración o ignora ciertas reglas, es posible que haga falta un CSS adicional.
El valor 1rem es solo un ejemplo ajusta a tus necesidades.

Solución 2 — Cambiar la variable CSS global (rápido y efectivo)

Si no quieres tocar theme.json o necesitas una corrección inmediata, puedes sobrescribir la variable –wp–style–block-gap en tu CSS del tema. Esto influirá en reglas que usan la variable para definir espacios entre bloques.

Ejemplo de CSS para front-end y editor:

/ Front-end: ajuste global del block gap /
:root {
  --wp--style--block-gap: 1rem / reduce el espacio entre bloques /
}

/ Editor (opcional, para que el bloque se vea igual en el editor) /
.editor-styles-wrapper {
  --wp--style--block-gap: 1rem
}

Cómo añadirlo:

Añádelo a tu archivo style.css del tema o a un archivo CSS que se cargue tanto en front-end como en el editor.
Si tu tema carga estilos del editor por separado, añade la variable también en el archivo que se usa para el editor.

Solución 3 — Reglas CSS específicas que normalizan márgenes entre bloques

Si los espacios provienen de márgenes en etiquetas internas (p, h2, ul…) y no tanto de la variable global, aplica reglas que normalicen márgenes y eviten duplicidades.

Ejemplo completo y robusto (front-end y editor):

/ 1) Normalizar separación entre bloques hermanos /
.wp-block   .wp-block {
  margin-top: 1rem / valor que quieras /
}

/ 2) Si quieres evitar afectar bloques anidados dentro de columnas/grupo,
   puedes usar selectores más contextuales:
   .wp-site-blocks .wp-block   .wp-block   (FSE / full site editing)
/
.wp-site-blocks .wp-block   .wp-block {
  margin-top: 1rem
}

/ 3) Corregir márgenes por defecto de elementos internos comunes /
.wp-block-paragraph p,
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-list ul,
.wp-block-list ol {
  margin-top: 0
  margin-bottom: 0.75rem / controla el espaciado interno del bloque /
}

/ 4) Evitar doble separación en bloques que ya aplican gap (por ejemplo,
   si hay .wp-block   .wp-block y además elementos internos con margen) /
.wp-block   .wp-block >  {
  margin-top: 0 / fuerza a que el gap entre bloques venga solo de .wp-block   .wp-block /
}

/ 5) Editor: asegurar apariencia igual en el editor /
.editor-styles-wrapper .wp-block   .wp-block {
  margin-top: 1rem
}

Explicación:

La regla .wp-block .wp-block aplica la separación entre bloques hermanos y es la forma más directa de controlar el espacio general.
Al resetear márgenes internos de etiquetas (p, h2…), evitas que ambas fuentes de separación (gap margin interno) se sumen y provoquen un espacio mayor al deseado.
El selector .wp-site-blocks es relevante en temas FSE si no existe, usa body o tu contenedor principal del tema.

Solución 4 — Casos especiales: columnas, listas y grupos

Algunos bloques compuestos (columns, group) gestionan su propio espaciado. Para columnas, a veces el gap entre columnas o la separación entre bloques dentro de una columna se nota mayor. Ejemplos específicos:

/ Columnas: reducir gap entre columnas /
.wp-block-columns {
  gap: 1rem / controla espacio entre columnas en navegadores modernos /
}

/ Columnas: reducir espacio interno entre bloques dentro de cada columna /
.wp-block-column .wp-block   .wp-block {
  margin-top: 0.75rem
}

/ Lista: si  lleva margin, normalízalo /
.wp-block-list ul,
.wp-block-list ol {
  margin-top: 0
  margin-bottom: 0.75rem
  padding-left: 1.2rem / ajusta el indent si es necesario /
}

Solución 5 — Añadir CSS solo al editor o solo al front-end

Si quieres que el editor muestre un espaciado diferente (por preferencia de contenido) pero el front-end sea otro, carga estilos específicos.

Ejemplo PHP para encolar un CSS en el editor:

/ Añadir en functions.php: encolar editor-style.css /
function tema_mio_enqueue_editor_styles() {
  wp_enqueue_style(
    tema-mio-editor-styles,
    get_theme_file_uri( /assets/css/editor-style.css ),
    array(),
    filemtime( get_theme_file_path( /assets/css/editor-style.css ) )
  )
}
add_action( enqueue_block_editor_assets, tema_mio_enqueue_editor_styles )

Ejemplo PHP para inyectar una variable CSS en el front-end (inline):

function tema_mio_inline_block_gap() {
  css = :root{ --wp--style--block-gap: 1rem }
  wp_add_inline_style( tema-mio-style-handle, css )
}
add_action( wp_enqueue_scripts, tema_mio_inline_block_gap, 20 )

Asegúrate de reemplazar tema-mio-style-handle con el handle real de tu hoja de estilos principal.

Consejos y buenas prácticas

Prioriza theme.json cuando sea posible: es el método nativo y evita hacks CSS conflictivos.
Evita el uso generalizado de !important solo úsalo como último recurso y puntualmente.
Prueba en móvil: ajusta blockGap con media queries si necesitas menos espacio en pantallas pequeñas.
Ten cuidado con bloques anidados: aplicar .wp-block .wp-block sin contextualizar puede producir dobles espacios en estructuras anidadas (columns → column → bloques). Usa selectores como .wp-block-column .wp-block .wp-block para controlar específicamente adentro de columnas.
Haz backups antes de editar archivos del tema y trabaja preferentemente en un child theme.

Ejemplo de ajuste responsive

/ Valor por defecto para desktop /
:root { --wp--style--block-gap: 1.25rem }

/ Menos espacio en pantallas pequeñas /
@media (max-width: 768px) {
  :root { --wp--style--block-gap: 0.75rem }
}

Cómo depurar si nada cambia

Verifica en el inspector si tu CSS se está cargando. Busca el archivo y las reglas.
Comprueba el orden de carga: si tu regla es sobrescrita por otra regla con más especificidad o por estilos inline, tendrás que aumentar especificidad o usar !important (con precaución).
Confirma que no haya plugins que inyecten estilos que interfieran (por ejemplo, constructores, optimizadores CSS, etc.).
Revisa si el tema usa una clase contenedora distinta a .wp-site-blocks o .editor-styles-wrapper y ajusta selectores.

Resumen rápido — qué aplicar según el caso

Si controlas el tema: usa theme.json → settings.spacing.blockGap.
Si necesitas una corrección rápida global: sobrescribe la variable –wp–style–block-gap.
Si la causa son márgenes internos (p, h1…): normaliza esos márgenes dentro de los bloques.
Si el problema solo aparece en el editor: encola un editor stylesheet y ajusta la variable / reglas allí.
Si el problema solo ocurre en front-end: aplica CSS al front-end o añade inline style desde functions.php.

Conclusión

Corregir espacios excesivos entre bloques Gutenberg suele ser un trabajo de diagnóstico: identificar si provienen de la variable global blockGap, de márgenes internos de elementos (p, h2, ul…) o de reglas específicas del tema. La solución ideal es usar theme.json cuando sea posible como alternativa hay soluciones CSS (sobrescribir –wp–style–block-gap, normalizar márgenes internos o emplear selectores .wp-block .wp-block). Aplica los cambios primero en un entorno de pruebas, revisa editor y front-end, y ajusta para móviles. Con las pautas y ejemplos de este artículo podrás corregir y afinar el espaciado entre bloques de manera segura y mantenible.

SushiHost