Introducción

Este tutorial muestra, con todo lujo de detalles, cómo aplicar bordes y sombras sutiles y profesionales a las cajas de contenido en Gutenberg (WordPress). Explicaré las decisiones de diseño, dónde colocar las reglas CSS (theme.json, estilos de bloque o CSS adicional), cómo añadir clases en el editor, consideraciones de accesibilidad, comportamiento en modo oscuro y ejemplos listos para copiar e insertar.

Conceptos básicos y principios de diseño

Antes de tocar código, es importante comprender por qué usar bordes y sombras sutiles:

• Jerarquía visual: sombras y bordes leves separan el contenido sin llamar excesivamente la atención.
• Legibilidad: los efectos muy intensos pueden distraer lo ideal es enfatizar, no competir con el contenido.
• Accesibilidad: contraste suficiente, estados de foco visibles y respeto de preferencias del usuario (por ejemplo, prefers-reduced-motion).
• Rendimiento: evitar sombras muy grandes que agreguen repintado costoso preferir sombras pequeñas y bien diseñadas.

Valores recomendados

Valores guía para sombras y bordes sutiles:

Border	1px solid con color semitransparente (por ejemplo rgba(0,0,0,0.06))
Box-shadow	Sombras pequeñas y difusas, p. ej. 0 1px 3px rgba(0,0,0,0.06) y opcional 0 1px 0 rgba(255,255,255,0.5) para realce
Radio	4px a 8px según el estilo del tema
Transición	transitions suaves en box-shadow y transform (150-220ms, cubic-bezier)

Dónde colocar estos estilos en Gutenberg

Opciones principales:

1. Additional CSS (Apariencia → Personalizar → CSS adicional): rápido para cambios globales.
2. style.css del tema: para estilos públicos persistentes del frontend.
3. editor-style / enqueue_block_editor_assets: para que Gutenberg muestre el mismo estilo en el editor.
4. theme.json: para definir variables de color y estilos globales de bloques (recomendado si el tema usa block.json y soporte de full-site editing).
5. Registrar estilos de bloque o variaciones mediante PHP o block.json para ofrecer estilos predefinidos en el panel de bloques.

Cómo aplicar una clase en Gutenberg

En el editor de bloques, selecciona el bloque (por ejemplo Group o Columns) y en la barra lateral > Avanzado > Clase CSS adicional escribe: subtle-card. El CSS que veremos a continuación estilizará esa clase.

Variables CSS y tokens de color (recomendado)

Definir variables hace que sea fácil adaptar sombras y bordes a modos claro/oscuro o a la paleta del tema. Ejemplo de variables base:

:root {
  --card-border: rgba(15, 23, 42, 0.06) / color para borde en modo claro /
  --card-shadow-1: rgba(2, 6, 23, 0.04)  / sombra base /
  --card-shadow-2: rgba(2, 6, 23, 0.02)  / sombra suave capa extra /
  --card-bg: #ffffff
  --card-radius: 8px
  --card-transition: box-shadow 180ms cubic-bezier(.2,.9,.3,1), transform 180ms ease
}

/ Modo oscuro (si el tema no lo gestiona con theme.json) /
@media (prefers-color-scheme: dark) {
  :root {
    --card-border: rgba(255,255,255,0.06)
    --card-shadow-1: rgba(0,0,0,0.6)
    --card-shadow-2: rgba(0,0,0,0.4)
    --card-bg: #0b1220
  }
}

Estilo base para cajas sutiles

Implementación CSS lista para usar. Esta regla cubre bordes, sombra, radio, transición, foco accesible y comportamiento al pasar el ratón.

/ Clase aplicable a grupos/columnas/cover u otros bloques /
.subtle-card {
  background: var(--card-bg)
  border: 1px solid var(--card-border)
  border-radius: var(--card-radius)
  box-shadow:
    0 1px 2px var(--card-shadow-1),
    0 6px 12px var(--card-shadow-2)
  padding: 1rem / ajustar según diseño /
  transition: var(--card-transition)
  will-change: box-shadow, transform
}

/ Hover: elevación sutil /
.subtle-card:hover,
.subtle-card.is-hovered {
  transform: translateY(-2px)
  box-shadow:
    0 4px 10px rgba(2,6,23,0.08),
    0 10px 30px rgba(2,6,23,0.04)
}

/ Estado de foco: imprescindible para teclado /
.subtle-card:focus-within,
.subtle-card:focus {
  outline: 3px solid rgba(59,130,246,0.18) / azul suave /
  outline-offset: 2px
}

/ Cuando el usuario prefiere reducir animaciones /
@media (prefers-reduced-motion: reduce) {
  .subtle-card,
  .subtle-card:hover {
    transition: none
    transform: none
  }
}

Optimización y variantes

Para diferentes contextos puedes crear variantes que cambien intensidad, radio o color:

/ Variante más plana /
.subtle-card.flat {
  border: 1px solid rgba(0,0,0,0.04)
  box-shadow: none
}

/ Variante más profunda (para elementos destacados) /
.subtle-card.deep {
  box-shadow:
    0 8px 20px rgba(2,6,23,0.12),
    0 18px 50px rgba(2,6,23,0.06)
  transform: none
}

/ Para tarjetas con imagen de fondo (cover dentro de la tarjeta) /
.subtle-card .wp-block-cover {
  border-radius: calc(var(--card-radius) - 2px)
  overflow: hidden
}

Incluir estilos en el editor de bloques (PHP)

Para que las cajas se vean igual en el editor y en el frontend, registra un archivo CSS y encola para el editor. Ejemplo de snippet para functions.php:

function mytheme_enqueue_block_editor_assets() {
  wp_enqueue_style(
    mytheme-block-editor-styles,
    get_theme_file_uri( /assets/css/editor-blocks.css ),
    array(),
    1.0.0
  )
}
add_action( enqueue_block_editor_assets, mytheme_enqueue_block_editor_assets )

Registro de un estilo de bloque disponible en el inspector

Puedes registrar un estilo para que el usuario lo elija desde Estilos del bloque (por ejemplo para group):

function mytheme_register_block_styles() {
  register_block_style(
    core/group,
    array(
      name  => subtle-card,
      label => Subtle Card
    )
  )
}
add_action( init, mytheme_register_block_styles )

Uso con theme.json (FSE y editor moderno)

Si tu tema usa theme.json, define variables globales y estilos de bloque. Ejemplo minimal:

{
  version: 2,
  settings: {
    color: {
      custom: true
    },
    spacing: {}
  },
  styles: {
    elements: {},
    blocks: {
      core/group: {
        spacing: {
          padding: 1rem
        }
      }
    }
  },
  custom: {
    variables: {
      card-border: rgba(15, 23, 42, 0.06)
    }
  }
}

Nota: theme.json permite centralizar tokens los estilos CSS concretos de la clase siguen en archivos CSS que el tema encola.

Consideraciones adicionales

• Contraste: comprueba que el contenido dentro de la caja mantiene contraste suficiente frente al fondo. Si el fondo de la caja cambia, adapta el color del texto.
• Compatibilidad móvil: reduce la intensidad de las sombras en móviles si detectas repintados costosos.
• Modo oscuro: no olvides definir variables alternativas para prefers-color-scheme o integrarte con la paleta del tema.
• Testing: revisa cómo se ve en navegadores principales y en distintas condiciones de brillo/zoom.
• SEO y rendimiento: las sombras y bordes son puramente presentacionales no afectan SEO, pero sí el renderizado mantenlas ligeras.

Ejemplos prácticos de uso

1) Caja simple para un bloque Group: aplica la clase subtle-card.

2) Variantes para llamadas a la acción o tarjetas de producto: añade .subtle-card.deep.

3) Mezcla con gradientes suaves en el fondo para secciones hero, pero mantén la sombra sutil.

Checklist antes de publicar

• ¿Has aplicado variables CSS para colores y radios? (sí/no)
• ¿Están encolados los estilos también en el editor? (sí/no)
• ¿Los estados de foco son visibles y cumplen accesibilidad? (sí/no)
• ¿Prefieres reducir movimiento está contemplado? (sí/no)
• ¿Probado en móvil y modo oscuro? (sí/no)

Conclusión

Con bordes y sombras sutiles puedes aportar una sensación de profundidad y orden sin sobrecargar el diseño. Usa variables, ofrece coherencia entre editor y frontend y respeta las preferencias de los usuarios. Los fragmentos incluidos proporcionan una base sólida: aplícalos tal cual o adáptalos a las necesidades de tu tema y paleta.