Tutorial WordPress: Estilizar el bloque de galería de Gutenberg con gap y bordes

Introducción

En este tutorial aprenderás, paso a paso y con ejemplos concretos, a estilizar el bloque de galería de Gutenberg para añadir separación (gap) entre las imágenes y bordes personalizados. Cubriremos la inspección del HTML que genera el bloque, distintas técnicas CSS (Grid, fallback con márgenes), cómo aplicar bordes y radios, cómo mantener el recorte (cropping) con object-fit y cómo aplicar estilos tanto en el frontend como en el editor. También incluimos ejemplos de theme.json y de cómo cargar estilos en el editor.

1. Inspeccionar el HTML generado por Gutenberg

Antes de escribir CSS conviene ver la estructura que utiliza Gutenberg. Dependiendo de la versión y del tema, la galería puede renderizarse como una lista o como un grid de figuras. Un ejemplo típico:

ltdiv class=wp-block-gallery columns-3 is-croppedgt
  ltfigure class=blocks-gallery-itemgt
    ltimg src=imagen1.jpg alt=... /gt
  lt/figuregt
  ltfigure class=blocks-gallery-itemgt
    ltimg src=imagen2.jpg alt=... /gt
  lt/figuregt
  ltfigure class=blocks-gallery-itemgt
    ltimg src=imagen3.jpg alt=... /gt
  lt/figuregt
lt/divgt

En otras variantes la galería usa una lista con la clase blocks-gallery-grid y elementos li o figure. Por eso conviene usar selectores que cubran ambas posibilidades: .wp-block-gallery, .blocks-gallery-grid, .blocks-gallery-item.

2. Usar CSS Grid y la propiedad gap (recomendado)

La manera más limpia de controlar el espacio entre elementos es convertir el contenedor en Grid y usar gap. Esto respeta filas y columnas y es muy sencillo.

/ Convertir la galería a grid y controlar gap /
.wp-block-gallery .blocks-gallery-grid,
.wp-block-gallery .blocks-gallery {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) / columnas fluidas /
  gap: 16px / espacio entre imágenes /
  align-items: stretch
}

/ Ajustes para cada figura / item /
.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery .blocks-gallery-item figure {
  margin: 0 / eliminar márgenes por defecto /
}

/ Imágenes al 100% y recorte correcto /
.wp-block-gallery .blocks-gallery-item img {
  display: block
  width: 100%
  height: 100%
  object-fit: cover / mantiene cropping uniforme /
  border-radius: 6px / radio opcional /
  box-sizing: border-box
}

Explicación breve

grid-template-columns con minmax permite que las columnas sean responsivas.
gap aplica separación entre filas y columnas sin necesidad de márgenes individuales.
object-fit: cover mantiene un recorte uniforme si las imágenes tienen proporciones diferentes.

3. Añadir bordes y estilos visuales

Puedes aplicar bordes directamente sobre las imágenes o sobre el figure para obtener distintos efectos.

/ Borde simple alrededor de cada imagen /
.wp-block-gallery .blocks-gallery-item img {
  border: 3px solid #ffffff / borde blanco /
  box-shadow: 0 2px 8px rgba(0,0,0,0.12)
}

/ Borde externo más visible usando pseudo-elemento en figure /
.wp-block-gallery .blocks-gallery-item {
  position: relative
  overflow: hidden
  border-radius: 8px
}
.wp-block-gallery .blocks-gallery-item::after {
  content: 
  position: absolute
  inset: 6px / separa el borde del contenido, crea un marco interior /
  border: 2px solid rgba(0,0,0,0.06)
  pointer-events: none
  border-radius: 6px
}

/ Borde interior via box-shadow (inset) /
.wp-block-gallery .blocks-gallery-item img {
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.9)
}

4. Compatibilidad y fallback para navegadores antiguos

Si necesitas que la galería funcione en navegadores sin soporte para gap en Grid (muy raro hoy, pero puede darse), puedes usar márgenes en los items y compensar con un margen negativo en el contenedor.

/ Fallback usando márgenes /
.wp-block-gallery.fallback-gap {
  display: block / o flex según prefieras /
  margin: 0 calc(-8px) / compensa el margen lateral de los items /
}
.wp-block-gallery.fallback-gap .blocks-gallery-item {
  display: inline-block
  vertical-align: top
  margin: 8px
  width: calc(33.333% - 16px) / ejemplo para 3 columnas /
}

Usa media queries para ajustar el ancho en dispositivos pequeños.

5. Manejar columnas y clases predeterminadas

Gutenberg añade clases tipo columns-2, columns-3, etc. Puedes combinarlas para controlar el comportamiento en distintos tamaños:

/ Variantes según número de columnas /
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr) }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr) }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr) }

/ Mejor con responsive: /
@media (max-width: 900px) {
  .wp-block-gallery.columns-4 { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 600px) {
  .wp-block-gallery.columns-4,
  .wp-block-gallery.columns-3,
  .wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr) }
}

6. Aplicar estilos en el editor (Editor Styles)

Para que en el editor (Gutenberg) también se reflejen los gaps y bordes, añade un archivo de estilos para el editor o registra esos estilos desde tu tema. Ejemplo de código en functions.php para encolar editor-style:

/ Enqueue editor styles desde functions.php /
function mi_tema_editor_styles() {
  add_theme_support(editor-styles)
  add_editor_style(assets/css/editor-style.css) // archivo donde pones las mismas reglas CSS
}
add_action(after_setup_theme, mi_tema_editor_styles)

Dentro de assets/css/editor-style.css puedes incluir las reglas CSS mostradas arriba para que el editor visualice el gap y los bordes como en el frontend.

7. Usar theme.json para definir gap y estilos de bloque

Con WordPress moderno puedes definir estilos y espacios por defecto desde theme.json. Ejemplo de cómo configurar blockGap para el bloque de galería (y valores globales):

{
  version: 2,
  settings: {
    spacing: {
      blockGap: 16px
    }
  },
  styles: {
    blocks: {
      core/gallery: {
        spacing: {
          blockGap: 18px
        }
      }
    }
  }
}

Eso define un gap por defecto en el editor y también puede afectar al frontend si tu tema respeta las variables de bloque. Además puedes definir paletas de color y bordes en theme.json para un control más profundo.

8. Interacciones: hover, enfocabilidad y accesibilidad

Añade efectos en hover y estados focus para mejorar la experiencia y accesibilidad:

.wp-block-gallery .blocks-gallery-item a,
.wp-block-gallery .blocks-gallery-item img {
  transition: transform 0.25s ease, box-shadow 0.25s ease
}

.wp-block-gallery .blocks-gallery-item:hover img {
  transform: scale(1.03)
  box-shadow: 0 8px 20px rgba(0,0,0,0.12)
}

/ Indicador visible para teclado /
.wp-block-gallery .blocks-gallery-item:focus-within {
  outline: 3px solid #3b82f6 / color visible para accesibilidad /
  outline-offset: 3px
}

9. Consejos prácticos y buenas prácticas

Evita aplicar bordes y sombras excesivas que alteren la percepción de las imágenes.
Si el tema aplica estilos por defecto a imágenes, normaliza con box-sizing y display:block.
Prueba las galerías en móviles: usa media queries para reducir columnas y gap en pantallas pequeñas.
Si necesitas un marco blanco entre imágenes (efecto polaroid), usa fondo del contenedor y bordes internos o sombras para separar.
Usa variables CSS (por ejemplo –wp–style–block-gap) si tu tema ya las declara para mantener consistencia.

10. Ejemplo completo (CSS final recomendado)

Un bloque de CSS final que combina gap, bordes, recorte y responsividad:

/ Galería base: grid, gap y responsive /
.wp-block-gallery .blocks-gallery-grid,
.wp-block-gallery .blocks-gallery {
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
  gap: 16px
  align-items: stretch
  margin: 0
  padding: 0
}

/ Normalizar items /
.wp-block-gallery .blocks-gallery-item {
  margin: 0
  overflow: hidden
  border-radius: 8px
  background: #f7f7f7 / opción de fondo si quieres separación visual /
}

/ Imagen: ocupa el contenedor y se recorta /
.wp-block-gallery .blocks-gallery-item img {
  display: block
  width: 100%
  height: 100%
  object-fit: cover
  border-radius: 6px
  border: 3px solid #ffffff / borde limpio /
  transition: transform .25s ease, box-shadow .25s ease
}

/ Hover y foco /
.wp-block-gallery .blocks-gallery-item:hover img,
.wp-block-gallery .blocks-gallery-item:focus-within img {
  transform: scale(1.02)
  box-shadow: 0 10px 30px rgba(0,0,0,0.12)
}

/ Responsive: columnas más pequeñas en móviles /
@media (max-width: 600px) {
  .wp-block-gallery .blocks-gallery-grid,
  .wp-block-gallery .blocks-gallery {
    gap: 10px
    grid-template-columns: repeat(2, 1fr)
  }
}

Conclusión

Aplicar gap y bordes al bloque de galería de Gutenberg es sencillo y flexible usando CSS Grid, object-fit y algunas reglas complementarias para el editor y la responsividad. Usar theme.json y las editor-styles te permite mantener coherencia visual entre editor y frontend. Con los ejemplos aquí incluidos puedes adaptar el aspecto a tu diseño: cambiar colores, radios, sombras y tamaños de gap de manera segura y accesible.

SushiHost