Cómo crear una paleta de colores personalizada para el editor Gutenberg

Publicado por Fernando Tellado el 27 Abr, 2018

Ya sabrás que no soy especialmente un gran fan del editor Gutenberg. No de su filosofía de introducir edición visual a WordPress, que sabes que sí, que creo que es necesario, sino del modo de implantarlo por narices, y de sus primeras versiones, como sustituto del editor por defecto en las entradas, un error garrafal.

Ahora bien, una cosa no quita la otra, y nos va a tocar, sí o sí, adaptarnos, así que mejor aprender cosillas, trucos, del editor Gutenberg, como este que te propongo hoy, no se si por convicción o porque me ha abducido José Ángel Vidania.

Pues bien, una de las curiosidades que incorpora el editor Gutenberg son las paletas de colores, que por defecto es así:

Lo que igual no sabes es que estas paletas de colores las puedes personalizar, ya sea porque usas una combinación especial en tu web, porque eres desarrollador de temas, o simplemente porque te gusta enredar.

En cualquiera de los casos, es muy fácil añadir tu propia paleta de colores. Solo tienes que editar el archivo functions.php del tema y añadir algo así:

/* Paleta de colores personalizada para Gutenberg */
add_theme_support( 'editor-color-palette',
	'#a156b4',
	'#d0a5db',
	'#eee',
	'#444'
);

/* Paleta de colores personalizada para Gutenberg */

add_theme_support( 'editor-color-palette',

'#a156b4',

'#d0a5db',

'#eee',

'#444'

);

Al guardar tus cambios lo que obtendrás es lo siguiente:

Lógicamente, en el código pon los colores (en hexadecimal) que quieras en tu paleta de colores. Aquí he optado por dos tonos de magenta, un gris claro y un gris oscuro (básicos).

Como ves, personalizar Gutenberg es muy fácil, y hay que agradecer al equipo de desarrollo la enorme documentación que está generando para este nuevo y flamante editor de WordPress, te guste o no.