Actualmente, además de los bloques nativos de WordPress, la biblioteca de bloques que más utilizo en mis proyectos es la de Genesis Blocks (antes Atomic Blocks) para aquellos elementos adicionales que puedo necesitar, especialmente contenedores, columnas avanzadas o los acordeones, muy prácticos para las maquetaciones típicas de preguntas frecuentes o en aquellas páginas que tienen mucho contenido y queda más ordenado y práctico agruparlo en pequeñas secciones.
Sin embargo, los estilos que vienen por defecto para el bloque Accordion son bastante limitados y no siempre encajan bien con el diseño de la web.
Aunque te permite modificar tipografía, colores y tamaños, no podemos cambiar el estilo de la flecha que aparece para desplegar el elemento ni su ubicación, y eso limita mucho y hace muy similar este bloque en todas las páginas.
Para evitarlo, podemos utilizar algunas clases de CSS, unas muy intuitivas y otras no tanto, para personalizarlo.
La estructura de html del bloque es bastante sencilla
- gb-block-accordion es todo el bloque
- details: incluye título y contenido
- gb-accordion-title es la parte del título
- gb-accordion-text es el contenido que aparece al desplegarlo.
Añadir o modificar estilos para estos elementos es sencillo, pero como puedes ver, en ningún sitio del código o del inspector aparece el icono de la flecha que aparece a la izquierda del título, y modificarla no parece tan sencillo.
GB Accordion añade la flecha con código utilizando un elemento nativo (-webkit-details-marker) del navegador que estemos utilizando, y para poder acceder debemos utilizar .gb-block-accordion .gb-accordion-title::-webkit-details-marker
Lo más sencillo, es ocultarlo directamente y luego añadir, con :after o :before, según queramos que aparezca a la derecha o izquierda del título, nuestro propio icono.
.gb-block-accordion .gb-accordion-title::-webkit-details-marker {
display: none;
}Añadimos un icono de flecha personalizado a la derecha:
.gb-block-accordion details .gb-accordion-title:after{
content: url("images/chevron-down.svg");
position: absolute;
right: 2.4rem;
top: 50%;
line-height: 1;
}Para modificar el icono al desplegar el elemento, o cualquier otro estilo que queramos que se muestre diferente si está abierto o cerrado, podemos utilizar el atributo open que GB añade a details cuando el elemento está abierto:
Por ejemplo: podemos poner el título en negrita cuando se desplega:
.gb-block-accordion details[open] .gb-accordion-title {
font-weight: 600;
}O modificar el icono:
.gb-block-accordion details[open] .gb-accordion-title:after{
content: url("images/close-circle-outline.svg");
}También podríamos, en lugar de cambia la imagen, hacer una transformación de CSS si es por ejemplo una flecha, simplemente girarla hacia abajo transform: translateY(-50%) rotate(-45deg); o cambiar tamaño, color, etc… cualquier propiedad que se pueda acceder desde CSS.
De esta forma con unas cuantas líneas de CSS podemos sustituir el acordeon estándar que veíamos al principio, por este:
O cualquier variación que se te ocurra.
Como ves, sabiendo esto podemos sacarle mucho más partido a este bloque de Genesis Blocks y evitar tener que utilizar bibliotecas de bloques diferentes sólo por un elemento que no nos acaba de gustar.
