Desde la aparición de Gutenberg, han habido muchos cambios. Ahora que la cosa está más estable, vamos a aprender como crear una paleta de colores personalizada en Gutenberg para Genesis Framework.
Ajustes de color
Gutenberg, o lo que será en unos días, el editor de WordPress, trae para la mayoría de bloques una paleta de colores por defecto.
Esta paleta la podemos usar para dar un estilo o apariencia distinta a un bloque determinado. Con ella podemos cambiar tanto el color de fondo del bloque seleccionado, como el color de texto.
Personalizando la paleta de colores
Estos ajustes de color traen por defecto una selección de 11 colores. Pues bien, con un snippet de código podemos personalizar esta selección de colores y limitarla. De esta manera, limitamos así mismo a los usuarios y nos mantenemos dentro de la coherencia de diseño de la que siempre hablo.
Lo normal sería colocar aquí los colores corporativos con los que se ha construido la web.
El código
Aquí os dejo el snippet de código para ello. Deberás colocarlo al final del archivo functions.php de tu Genesis Child Theme activo.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Esto claro está es un ejemplo. De hecho es de un trabajo de desarrollo de hace unos días. Deberás editarlo y añadir tus propios colores.
Una clase por cada color
Con este snippet conseguimos la paleta de colores personalizada que buscábamos. Nada más. ¿Que quiero decir con «nada más»? Pues que si hacemos la prueba y editamos en Gutenberg un bloque y le aplicamos los colores que hemos definido en esta paleta personalizada, veremos que en la web no ha pasado nada. Al menos aparentemente.
Esto es, porque Gutenberg lo único que hará será aplicar unas clases específicas a ese bloque editado con la paleta personalizada. Por eso, tendremos que añadir algo de código CSS para que se apliquen esos colores en base a las clases añadidas por Gutenberg.
El CSS que necesitamos
Basándonos en la paleta personalizada que hemos creado antes, este sería el código necesario para conseguir esos estilos. Puedes pegar el código al final del archivo styles.css de tu genesis child theme activo.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Conclusiones
Como habrás podido observar, el crear la paleta consiste en dos pasos bien marcados. Los códigos de color del primer snippet no son más que para que el usuario pueda ver las muestras de color en forma de círculos en la paleta personalizada.
Con respecto a las paletas de colores de Gutenberg, no sólo existen estas modificaciones. Pero las iremos viendo en futuros tutoriales. El siguiente mañana mismo.
Ya sabes, para cualquier duda con el código o para proponer futuros tutoriales puedes dejar un comentario abajo. Feliz día! 🙂