Introducción

En este tutorial detallado veremos cómo estilizar el bloque de citas de WordPress (Gutenberg) añadiendo comillas grandes mediante la pseudo-clase ::before. Cubriremos los selectores correctos para el editor y el frontend, opciones de posición y tamaño, variantes responsivas, accesibilidad y cómo añadir el CSS o integrarlo en tu tema mediante functions.php.

Concepto básico

La idea es usar la pseudo-elemento ::before para insertar una comilla decorativa (por ejemplo “ o «») que esté ubicada y escalada para crear un efecto tipográfico atractivo sin alterar el contenido real de la cita. Trabajaremos sobre el selector que Gutenberg usa por defecto para las citas: .wp-block-quote (y su blockquote interno).

Selectors importantes

• .wp-block-quote blockquote — selector principal para las citas en el front y en el editor.
• .wp-block-quote p — si quieres apuntar específicamente al párrafo de la cita.
• Si tu tema añade estilos o clases personalizadas a la cita, combina esas clases para mayor especificidad.

Ejemplo 1 — Comilla grande a la izquierda (básico)

Este ejemplo coloca una comilla grande, semitransparente, a la izquierda de la cita. El blockquote se posiciona relative y el pseudo-elemento es absolute para poder colocarlo fuera del flujo.

.wp-block-quote blockquote {
  position: relative
  padding-left: 3.2rem      / deja espacio para la comilla /
  margin-left: 0
}

.wp-block-quote blockquote::before {
  content: “               / comilla de apertura Unicode (U 201C) /
  position: absolute
  left: 0.35rem
  top: -0.15rem
  font-size: 4.6rem          / tamaño grande para efecto tipográfico /
  line-height: 1
  color: rgba(0,0,0,0.08)    / color tenue, ajusta según tema /
  font-family: serif         / usar una familia serif para la comilla /
  pointer-events: none       / no interfiere con la selección o clicks /
  z-index: 0
}
  
.wp-block-quote blockquote p {
  position: relative
  z-index: 1                 / sitúa el texto por encima de la comilla /
}

Notas:

• El padding-left del blockquote crea el espacio para la comilla.
• El pseudo-elemento tiene z-index menor y el párrafo z-index mayor para que el texto siempre sea legible encima de la marca decorativa.

Explicación de propiedades clave

• content: la comilla en forma de carácter Unicode. Puedes reemplazarla por otra forma como « o ” según tu estilo.
• position: relative en el contenedor y absolute en ::before permiten posicionar con precisión.
• font-size: controla la escala de la comilla usa unidades rem para mantener consistencia con la tipografía base.
• pointer-events: none: evita que la comilla interfiera con selecciones o enlaces.

Ejemplo 2 — Comilla que sobresale y efecto responsivo

En pantallas pequeñas reducimos el tamaño de la comilla y ajustamos el padding.

/ Reutilizamos lo anterior y añadimos media queries /
.wp-block-quote blockquote::before {
  content: “
  position: absolute
  left: 0.5rem
  top: -0.1rem
  font-size: 6rem
  color: rgba(0,0,0,0.06)
  transform: translateY(-8%)
}

@media (max-width: 768px) {
  .wp-block-quote blockquote {
    padding-left: 2rem
  }
  .wp-block-quote blockquote::before {
    font-size: 3.2rem
    left: 0.35rem
    transform: none
  }
}

Ejemplo 3 — Comillas de apertura y cierre

Si quieres un par de comillas (apertura y cierre), puedes usar ::before para la apertura y ::after para la de cierre. Normalmente la de cierre suele colocarse en la esquina inferior derecha.

.wp-block-quote blockquote {
  position: relative
  padding: 1.2rem 1.2rem 1.6rem 4rem
}

.wp-block-quote blockquote::before {
  content: “
  position: absolute
  left: 0.6rem
  top: 0.4rem
  font-size: 5.6rem
  color: rgba(0,0,0,0.06)
  z-index: 0
}

.wp-block-quote blockquote::after {
  content: ”
  position: absolute
  right: 0.6rem
  bottom: 0.1rem
  font-size: 3rem
  color: rgba(0,0,0,0.06)
  z-index: 0
}

Variantes de estilo

• Usar una imagen SVG como comilla: en content puedes usar url(…) apuntando a un SVG optimizado para mantener nitidez.
• Usar una fuente de iconos (ej. Font Awesome) y poner el caracter correspondiente (requiere que la fuente esté disponible).
• Usar variables CSS para color y tamaño para facilitar personalización: –quote-color, –quote-size.

Accesibilidad

Las pseudo-elementos son puramente decorativos la mayoría de lectores de pantalla no las anuncian. Sin embargo, si quieres asegurar que sea puramente decorativo y no afecte a la lectura:

• No incluyas texto esencial dentro de la pseudo-elemento.
• Evita establecer propiedades que modifiquen la lectura del flujo del documento (no ocultes texto real con z-index negativo).
• Si necesitas agregar texto accesible adicional (por ejemplo, para aclarar al lector que es una cita), añade una etiqueta visualmente oculta dentro del blockquote con CSS para esconderla visualmente pero mantenerla accesible. Ejemplo de clase:

.screen-reader-text {
  position: absolute !important
  height: 1px width: 1px
  overflow: hidden
  clip: rect(1px, 1px, 1px, 1px)
  white-space: nowrap
}

Cómo añadir el CSS en WordPress

Tienes varias opciones:

1. Personalizar → CSS adicional: pega tu CSS allí para pruebas rápidas.
2. Añadir el CSS en la hoja de estilos del tema (style.css) o en un archivo separado que tu tema cargue.
3. Encolar un archivo CSS desde functions.php (recomendado para producción). Ejemplo a continuación.

Ejemplo: encolar un archivo CSS desde functions.php

Registrar un estilo de bloque (opcional)

Si quieres que el editor muestre una opción de estilo predefinido (por ejemplo Comillas grandes), puedes registrar un estilo de bloque con register_block_style. Esto no añade el CSS por sí solo debes incluir también el CSS para la clase registrada.

 large-quotes,
        label => __( Comillas grandes, tu-textdomain )
      )
    )
  }
}
add_action( init, tema_registrar_estilo_cita )
?>

Luego en tu CSS debes apuntar a la clase generada por el registro: .is-style-large-quotes o al nombre que definas.

Consejos finales y buenas prácticas

• Usa unidades relativas (rem, em) para que el diseño respete el tamaño de fuente base.
• Prueba contraste y legibilidad: la comilla debe ser decorativa el texto principal debe mantener buen contraste.
• Comprueba en móviles y distintos tamaños de texto (zoom) para que la comilla no cubra el texto.
• Evita insertar comillas decorativas en el contenido real de la cita — mantenerlas en CSS permite cambios globales sin editar el contenido.
• Si tu tema ya tiene reglas fuertes para .wp-block-quote, usa mayor especificidad o !important con moderación para sobreescribirlas.

Resumen

Usar ::before en el bloque de citas de WordPress es una técnica sencilla y potente para añadir comillas grandes y estilizadas. Asegúrate de posicionar correctamente el pseudo-elemento, mantener la accesibilidad del contenido y aplicar reglas responsivas. Integra el CSS mediante el personalizador, el stylesheet del tema o encolando un archivo con functions.php para una solución preparada para producción.