Tutorial WordPress: Hacer que el bloque Cover de Gutenberg se vea igual en todos los tamaños

Introducción

El bloque Cover de Gutenberg es uno de los más útiles para crear secciones hero, cabeceras con imágenes o bloques llamativos. Sin embargo, por su naturaleza flexible y las distintas maneras en que se puede insertar una imagen (como background CSS, como elemento img dentro del bloque, o incluso vídeo), su aspecto puede variar mucho entre tamaños de pantalla. Este tutorial explica, paso a paso y con ejemplos prácticos, cómo hacer que el bloque Cover se vea igual en todos los tamaños —es decir, mantener la misma composición visual, recorte y proporción en móvil, tablet y escritorio— sin afectar la accesibilidad ni el rendimiento.

Resumen del problema

Una imagen usada como fondo con background-size: cover recorta distinto según la relación de aspecto del contenedor.
Si el bloque cambia su altura (por ejemplo, min-height en píxeles vs. unidades viewport) la porción visible de la imagen varía entre dispositivos.
El bloque Cover puede insertar la imagen como background o como img dentro del DOM cada caso requiere un tratamiento CSS distinto.
El comportamiento por defecto en el editor (editor de WordPress) puede diferir del front-end conviene sincronizarlos para no llevarse sorpresas.

Estrategia general

Crear una clase CSS específica para los covers que queremos uniformes (por ejemplo: uniform-cover).
Definir una proporción / relación de aspecto única para ese cover (p. ej. 16:9 o 4:3). Usaremos aspect-ratio cuando sea posible y una técnica fallback con padding-top para navegadores antiguos.
Asegurar que la imagen o el vídeo se escalan con object-fit: cover o background-size: cover y que el punto focal quede centrado (object-position/ background-position).
Controlar la superposición (overlay) para que la lectura del texto sea constante: usar pseudo-elementos o las capas del propio bloque garantizando el mismo color/alpha en todos los tamaños.
Agregar esas reglas al theme (front-end) y al editor para que lo que se ve en el editor sea representativo del front-end.

Preparación: añadir una clase al bloque

En el editor, selecciona el bloque Cover y en la sección Avanzado > Clase(s) CSS adicional(es) añade: uniform-cover. Ese será el selector que usaremos en CSS para aplicar las reglas específicas sin tocar otros covers del sitio.

CSS base (requisitos)

Estos son los principios a aplicar en CSS:

Forzar una relación de aspecto fija para el contenedor.
Hacer que la imagen / vídeo llenen el contenedor y se recorten de forma consistente.
Asegurar que el contenido interno (texto/centrado) esté correctamente posicionado y sea legible.

A continuación tres ejemplos concretos: (A) moderna con aspect-ratio, (B) fallback con padding-top, y (C) manejo cuando la imagen está dentro como ltimggt o como background.

Ejemplo A — Uso de aspect-ratio (navegadores modernos)

Este método es la forma más sencilla y madura: define una proporción y deja que el contenedor escale manteniendo esa proporción en todos los tamaños.

/ Define el cover uniforme /
.wp-block-cover.uniform-cover {
  position: relative
  overflow: hidden
  / Proporción deseada: 16:9 => 16 / 9 = 1.777... /
  aspect-ratio: 16 / 9
  width: 100%
  / Si quieres un máximo en altura lo puedes limitar /
  max-height: 70vh
}

/ Asegura que la imagen de fondo funcione igual /
.wp-block-cover.uniform-cover .wp-block-cover__background,
.wp-block-cover.uniform-cover .wp-block-cover__video-background {
  position: absolute
  inset: 0
  width: 100%
  height: 100%
  background-position: center center !important
  background-size: cover !important
  object-fit: cover
  object-position: center center
}

/ Si el cover tiene una imagen  dentro /
.wp-block-cover.uniform-cover img {
  width: 100%
  height: 100%
  -o-object-fit: cover
  object-fit: cover
  object-position: center center
  display: block
}

/ Mantener el contenido (texto) centrado y visible /
.wp-block-cover.uniform-cover .wp-block-cover__inner-container {
  position: relative
  z-index: 2
  display: flex
  align-items: center
  justify-content: center
  height: 100%
  padding: 2rem
  box-sizing: border-box
}

Ejemplo B — Fallback con padding-top (compatibilidad amplia)

Si necesitas compatibilidad con navegadores que no soportan aspect-ratio, usa la técnica padding-top para crear un contenedor con la relación de aspecto deseada.

/ Contenedor que mantiene proporción con padding-top /
.wp-block-cover.uniform-cover {
  position: relative
  width: 100%
  overflow: hidden
}

/ Wrapper que crea el ratio (16:9 => 56.25%) /
.wp-block-cover.uniform-cover::before {
  content: 
  display: block
  padding-top: 56.25% / 9/16 = 0.5625 -> 56.25% /
}

/ Forzar que el contenido ocupe el espacio absoluto dentro del bloque /
.wp-block-cover.uniform-cover .wp-block-cover__inner-container,
.wp-block-cover.uniform-cover .wp-block-cover__background {
  position: absolute
  inset: 0
  width: 100%
  height: 100%
}

/ Ajustes de imagen/video como en el ejemplo A /
.wp-block-cover.uniform-cover .wp-block-cover__background {
  background-position: center center !important
  background-size: cover !important
}
.wp-block-cover.uniform-cover img {
  width: 100%
  height: 100%
  object-fit: cover
  object-position: center center
  display: block
}

Ejemplo C — Forzar punto focal y evitar recortes indeseados

Si la composición de la imagen requiere que el punto focal no esté centrado, puedes usar object-position o background-position para ajustar. Además, si necesitas distintos focos según pantalla, usa media queries.

/ Foco centrado por defecto /
.wp-block-cover.uniform-cover .wp-block-cover__background {
  background-position: center center !important
}

/ Para una imagen cuyo foco está en la parte superior en móvil /
@media (max-width: 768px) {
  .wp-block-cover.uniform-cover .wp-block-cover__background {
    background-position: center top !important
  }
  .wp-block-cover.uniform-cover img {
    object-position: center top
  }
}

Overlay / Superposición consistente

El bloque Cover tiene su propia capa de overlay, pero puede variar según la clase que el editor añada. Para uniformidad, sobrescribe o añade tu propia pseudo-capa que siempre cubra toda el área con el mismo color y transparencia.

/ Capa de overlay consistente /
.wp-block-cover.uniform-cover::after {
  content: 
  position: absolute
  inset: 0
  z-index: 1 / debajo del contenido (inner-container) que es z-index:2 /
  background: rgba(0, 0, 0, 0.35) / color y opacidad que desees /
  pointer-events: none
}

Añadir estilos también al editor (Gutenberg)

Para que lo que ves en el editor coincida con el front-end, añade un archivo de estilos para el editor o incluye las reglas anteriores en tu editor-style. Aquí un ejemplo de cómo hacerlo desde functions.php en tu tema.

/ functions.php: añadir estilos al editor de bloques /
function tema_mio_añadir_estilos_editor() {
    add_theme_support( editor-styles )
    // Asegúrate de que assets/css/editor-blocks.css exista y contenga las reglas anteriores
    add_editor_style( assets/css/editor-blocks.css )
}
add_action( after_setup_theme, tema_mio_añadir_estilos_editor )

Qué controlar y probar

Punto focal: Comprueba dónde se recorta la imagen en móvil y escritorio. Ajusta object-position / background-position con media queries si hace falta.
Texto y legibilidad: Asegúrate de que la superposición (overlay) mantenga contraste suficiente para WCAG. Ajusta color y alfa con media queries si la imagen cambia el contraste.
Vídeos: Para vídeos de fondo, aplica object-fit: cover en el vídeo y controla la reproducción/pausa para no afectar rendimiento en móvil.
Alt y accesibilidad: Si la imagen es meramente decorativa y se usa como background, añade contenido alternativo o asegúrate de que el bloque incluya texto accesible.
Compatibilidad: Añade el fallback con padding-top si necesitas soportar navegadores sin aspect-ratio.

Ejemplo completo (un CSS listo para pegar)

Este bloque CSS combina las técnicas anteriores, incluye fallback, overlay y soporte para imágenes internas o background. Aplicar solo a covers con la clase uniform-cover.

/ Hacer uniforme el cover agregando la clase uniform-cover /
.wp-block-cover.uniform-cover {
  position: relative
  width: 100%
  overflow: hidden
  / modern /
  aspect-ratio: 16 / 9
  max-height: 80vh
}

/ Fallback para browsers sin aspect-ratio /
.wp-block-cover.uniform-cover::before {
  content: 
  display: block
  padding-top: 56.25% / 16:9 /
}

/ Asegurar que el fondo/video ocupen todo el contenedor /
.wp-block-cover.uniform-cover .wp-block-cover__background,
.wp-block-cover.uniform-cover .wp-block-cover__video-background,
.wp-block-cover.uniform-cover img {
  position: absolute
  inset: 0
  width: 100%
  height: 100%
  background-size: cover !important
  background-position: center center !important
  object-fit: cover
  object-position: center center
}

/ Overlay consistente /
.wp-block-cover.uniform-cover::after {
  content: 
  position: absolute
  inset: 0
  z-index: 1
  background: rgba(0,0,0,0.35)
  pointer-events: none
}

/ Contenido centrado y por encima de la overlay /
.wp-block-cover.uniform-cover .wp-block-cover__inner-container {
  position: relative
  z-index: 2
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  padding: 2rem
  box-sizing: border-box
}

/ Ajustes para móvil: conservar foco en la parte superior si la foto lo requiere /
@media (max-width: 768px) {
  .wp-block-cover.uniform-cover .wp-block-cover__background {
    background-position: center top !important
  }
  .wp-block-cover.uniform-cover img {
    object-position: center top
  }
}

Notas avanzadas y recomendaciones

Agregar clases por bloque: usar la opción avanzada del bloque Cover para añadir la clase uniform-cover, así no rompes covers existentes.
Lazy-loading: si el cover usa ltimggt activa lazy-loading con criterio (no siempre desirable en hero, porque podría retrasar la carga visible). Para héroes, cargar la imagen inmediatamente para evitar un FOUP (flash of unstyled/placeholder).
Optimiza las imágenes: genera tamaños adecuados con srcset/imagen responsive o usalos como background pero con imágenes optimizadas (WebP, tamaños adaptativos).
Videos: evita auto-play con sonido sumariza y evita cargas pesadas en móvil o prueba a servir poster images para pantallas pequeñas.
Prueba en dispositivos reales: DevTools es útil, pero prueba en móviles reales para comprobar que la altura viewport y la barra de navegación del navegador móvil no cambien visibilidad de forma indeseada.

Conclusión práctica

Con una clase dedicada, una regla de relación de aspecto (aspect-ratio o padding-top), y forzando que la imagen o el vídeo usen object-fit/background-size: cover y object-position/background-position, lograrás que tu bloque Cover tenga la misma composición visual en todos los tamaños. No olvides añadir las mismas reglas al editor para que lo que diseñas en Gutenberg sea fiel a la vista pública.

Recuerda

Agrega la clase uniform-cover al bloque para aplicar solo a los covers que deseas homogeneizar.
Testea punto focal y legibilidad con diferentes imágenes y en distintos dispositivos.
Añade las reglas al editor para evitar sorpresas.

Este conjunto de técnicas cubre la mayoría de los casos prácticos. Implementándolo paso a paso obtendrás covers coherentes, bonitos y accesibles en todo tipo de pantallas.

SushiHost