Este tutorial explica paso a paso cómo personalizar el bloque de cita (core/quote) en WordPress para obtener una línea lateral a la izquierda y una tipografía serif elegante, aplicable tanto en el frontend como en el editor de bloques (Gutenberg). Incluyo código listo para copiar: CSS para estilos, PHP para registrar estilos de bloque o incluir fuentes, ejemplos con theme.json y consideraciones de accesibilidad y rendimiento.
Resumen de lo que lograremos
Aplicar un diseño de cita con:
- Una línea lateral destacada a la izquierda (accent border).
- Tipografía serif para el texto de la cita.
- Soporte en el editor (editor styles) para que el resultado se vea igual al editar.
- Opcional: registrar estilos de bloque para que el editor ofrezca variantes (p. ej. Línea lateral y Línea lateral grande).
Requisitos
- Tema hijo o tema propio (para no perder cambios en actualizaciones).
- Acceso a editar style.css y functions.php (o bien theme.json si usas bloque completo con soporte moderno).
- Conocimientos básicos de CSS y PHP para copiar/pegar las piezas que siguen.
Estrategia general
- Definir variables CSS y reglas que apliquen a .wp-block-quote y blockquote.
- Añadir fuentes serif (Google Fonts o @font-face local) y asegurarse de cargar esas fuentes en el editor.
- Registrar estilos de bloque con register_block_style para ofrecer variantes en el editor (opcional).
- Probar en frontend y editor, y afinar responsividad y contraste.
1) CSS base: cita con línea lateral y tipografía serif
Coloca este CSS en el style.css de tu tema (o en un archivo CSS específico que cargues). Ajusta variables de color y tamaños según tu identidad visual.
/ CSS para citas: línea lateral a la izquierda y tipografía serif /
:root{
--quote-accent: #c0392b / color de la línea lateral /
--quote-text: #222222 / color del texto /
--quote-bg: transparent / fondo de la cita /
--quote-border-width: 6px / grosor de la línea lateral /
--quote-padding: 1rem 1rem 1rem 1.25rem
--quote-serif: Merriweather, Georgia, Times New Roman, serif
--quote-font-size: 1.125rem
--quote-line-height: 1.6
}
/ Selector para el bloque de cita de Gutenberg /
.wp-block-quote,
.wp-block-pullquote,
.wp-block-quote blockquote {
position: relative
margin: 1.5rem 0
padding: var(--quote-padding)
border-left: var(--quote-border-width) solid var(--quote-accent)
background: var(--quote-bg)
color: var(--quote-text)
font-family: var(--quote-serif)
font-size: var(--quote-font-size)
line-height: var(--quote-line-height)
quotes: “ ” ‘ ’
}
/ Si el tema envuelve el blockquote interno, aplicamos también a blockquote /
.wp-block-quote blockquote,
blockquote.wp-block-quote {
margin: 0
padding: 0 / padding ya aplicado en el padre si existe /
}
/ Estilo para la cita en sí (p dentro del blockquote) /
.wp-block-quote p,
.wp-block-quote blockquote p {
margin: 0
padding: 0
}
/ Estilo para el cite (autor) /
.wp-block-quote cite {
display: block
margin-top: 0.75rem
font-style: normal
font-weight: 600
opacity: 0.85
font-family: var(--quote-serif)
}
/ Variante grande (por si registras un estilo de bloque llamado large) /
.wp-block-quote.is-style-large {
--quote-border-width: 8px
--quote-font-size: 1.35rem
padding-left: 1.5rem
}
/ Variante compacta /
.wp-block-quote.is-style-compact {
--quote-border-width: 4px
--quote-font-size: 1rem
margin: 1rem 0
}
/ Preferencias para modo oscuro (si aplicable) /
@media (prefers-color-scheme: dark){
:root{
--quote-text: #eaeaea
}
:root{
--quote-accent: #e67e22
}
}
Explicación de las piezas clave
- border-left: crea la línea lateral visible a la izquierda.
- font-family: fuerza el uso de una tipografía serif para la cita y autor.
- variables CSS: facilitan cambiar colores, tamaños o variantes sin tocar todo el CSS.
- selectores .is-style-: sirven para aplicar variantes registradas desde PHP o el editor.
2) Registrar estilos de bloque (opcional): añadir variantes en el editor
Si quieres que el editor ofrezca estilos predefinidos (por ejemplo Línea lateral y Línea lateral grande), añade este código a functions.php de tu tema (preferiblemente en el tema hijo):
accent-left,
label => Línea lateral,
is_default => true, // opcional: hacerlo por defecto
)
)
register_block_style(
core/quote,
array(
name => large,
label => Línea lateral grande,
)
)
register_block_style(
core/quote,
array(
name => compact,
label => Compacta,
)
)
}
})
?>
Al registrar estos estilos, el editor mostrará un selector Estilos en la barra lateral del bloque Quote, aplicando la clase .is-style-{name} que ya contemplamos en el CSS anterior.
3) Añadir la tipografía serif (Google Fonts o local)
Opción A: cargar Google Fonts desde functions.php:
Opción B: usar @font-face con archivos locales (más rendimiento si controlas caché):
/ @font-face local /
@font-face {
font-family: MiSerif
src: url(/wp-content/themes/mi-tema/fonts/MiSerif-Regular.woff2) format(woff2),
url(/wp-content/themes/mi-tema/fonts/MiSerif-Regular.woff) format(woff)
font-weight: 400
font-style: normal
font-display: swap
}
Luego en las variables CSS, cambia –quote-serif por MiSerif, Georgia, serif y asegúrate de que el editor cargue ese CSS (con add_theme_support(editor-styles) o enqueue del stylesheet para editor).
4) Integración con theme.json (WordPress 5.8 )
Si tu tema usa theme.json, puedes declarar estilos para bloques y familias de fuentes para integrarlo nativamente. Ejemplo reducido:
{
version: 2,
settings: {
typography: {
fontFamilies: [
{
fontFamily: Merriweather, Georgia, serif,
name: Serif elegante,
slug: serif-elegante
}
]
}
},
styles: {
blocks: {
core/quote: {
color: {
text: #222222
},
spacing: {
padding: 1rem
},
elements: {
link: {
color: {
text: var(--wp--preset--color--primary)
}
}
}
}
}
}
}
Nota: theme.json controla estilos globales y del editor aun así, la línea lateral puede requerir CSS adicional (p. ej. border-left) directamente en style.css o en styles del theme.json si necesitas controlar propiedades no cubiertas por presets.
5) Variantes y ejemplos rápidos
Clase adicional para una cita con bloque gris y línea blanca:
.wp-block-quote.is-style-inverse {
background: #2c3e50
color: #f7f7f7
border-left-color: #ffffff
}
Si registraste is-style-inverse con register_block_style, el editor mostrará esa opción.
6) Accesibilidad y rendimiento
- Contraste: asegúrate de cumplir WCAG mínimo 4.5:1 para texto normal en citas (especialmente si el color del fondo cambia).
- Evita tipografías externas pesadas: usa font-display: swap y subsetting (woff2) para mejorar carga.
- Soporte responsive: no uses tamaños rígidos usa rem y variables para escalado.
- Editor vs Frontend: carga las mismas fuentes y estilos en el editor para coherencia visual.
7) Comprobaciones y pruebas finales
- Probar en varias entradas con diferentes longitudes de cita.
- Verificar autor (cite) y su formato comprobar que el cite no se confunda con el cuerpo de la cita.
- Comprobar que los estilos registrados aparecen en el editor y se aplican correctamente (inspecciona la clase .is-style-… en el DOM).
- Probar en móvil y en modo oscuro (si tu sitio lo soporta).
- Medir impacto de las fuentes con Lighthouse o WebPageTest optimizar según sea necesario.
Breve checklist para publicar
- Copiar CSS en style.css o archivo de estilos del tema.
- Cargar la fuente (Google Fonts o local) tanto en frontend como en editor.
- Registrar estilos de bloque si quieres opciones en el editor (opcional).
- Probar en distintos navegadores y dispositivos.
Recuerda que las clases que hemos usado (.is-style-large, .is-style-compact, .is-style-inverse) funcionan automáticamente si registras esos estilos con register_block_style. Si trabajas con un constructor o un framework que sobreescribe markup del bloque de cita, adapta los selectores (inspecciona el HTML resultante y aplica las reglas a los selectores que el tema / plugin genera).
Recursos útiles: documentación oficial de bloques en WordPress en https://developer.wordpress.org/block-editor/ y guía de theme.json en https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/.
Leave a Reply