Aprende en este tutorial cómo añadir una paleta de gradientes de color personalizada al editor de bloques en tu tema de WordPress mediante código.
WordPress 5.4 introdujo bastantes funcionalidades nuevas y, entre ellas, la opción de usar gradientes de color en algunos bloques.
Por ahora solo se puede utilizar en el bloque de botón y el de fondo, pero lo más probable es que se vaya extendiendo a más bloques con el tiempo.
En dichos bloques, el editor de WordPress ofrece una paleta de gradientes por defecto.
¿El problema?
Que seguramente no estará en consonancia con la paleta del tema.
Por suerte, esta funcionalidad viene acompañada de una API que te permite definir una paleta de gradientes de color personalizada de forma sencilla.
En su momento te expliqué cómo limitar la paleta de colores del editor en un tema, porque te ayuda a mantener una coherencia estética y le facilita el uso a tu cliente.
Y esta vez no va a ser menos, porque los gradientes «molan mucho» si los sabes usar bien, pero son muy «peligrosos» si no (¡hola, clientes flipados!). 😜
Por eso creo que cualquier child theme moderno que se precie debería implementarlo.
Además, es muy sencillo. Ya verás. 😉
Snippet para añadir una paleta de gradientes de color personalizada al editor de WordPress
Añade el siguiente fragmento en functions.php:
Para ver este código y los otros 1837 snippets de esta web,
identifícate o suscríbete aquí.
Usando este snippet, introduces 5 paletas de gradientes de color en el editor.
Que conste que son más de las que yo añadiría, pero quería que vieras un ejemplo generoso. 😉
Por supuesto, te invito a modificarlas por las que tú desees. Para ello solo tendrías que cambiar el CSS de 'gradient'.
En este caso he utilizado el text-domain de Genesis Sample ('genesis-sample') pero puedes usar este snippet en cualquier tema de WordPress.
Y recuerda, la idea es que crees gradientes que respeten la paleta de colores del tema. Esta herramienta te puede venir muy bien para crearlos y copiar el CSS.
Si te fijas en las capturas de pantalla, este fragmento no impide que el usuario pueda modificar los colores, por lo que el usuario seguirá teniendo la opción de escoger cualquier otro.
Sin embargo, si te interesa, también puedes asegurarte de que solo usen los que tú hayas creado.
Conclusiones
La llegada de los gradientes de color al editor de WordPress abre muchas posibilidades. Quizás demasiadas…
Por eso, definir una paleta de gradientes de color personalizada en un tema ayuda a mantener la coherencia visual de la web y le facilita su uso a tu cliente.
Además, como acabas de ver, puedes introducirla en cualquier plantilla de WordPress siguiendo unos pasos muy sencillos.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
