A pesar de que aun sigue causando muchos debates dentro de la comunidad, poco a poco Gutenberg se esta convirtiendo en una parte esencial de WordPress. Y para no quedarnos atrás, y hacer de Gutenberg un espacio más cómodo y personal para realizar nuestro trabajo, y que también puedan hacerlo nuestros clientes, queremos mostraros como crear nuestra propia paleta de colores más allá de la que nos ofrece por defecto cada tema, sin tener que hacer uso de ningún tipo de plugin.
Pero si Gutenberg ya nos deja modificar el color de textos, botones, el fondo de los bloques, etc, ¿para qué queremos añadir una paleta de color?. Pues tan simple como para ganar agilidad a la hora de trabajar dentro del editor. Imaginemos que estamos creando una web con una paleta de colores definida, como suele ser habitual. Cuando vamos aplicar algunos de estos colores a cualquier elemento, tendremos que seleccionarlo desde la opción de Color personalizado dentro de cada bloque. Y esto cada vez que queramos aplicar un color. Os podéis hacer una idea del tiempo perdido. Si pensamos en nuestro cliente, al restringir la paleta de colores que puede usar, nos aseguramos que no se van a salir de la linea de diseño de la web. Por lo que reducimos al mínimo la posibilidades de errores. Y eso si que no está pagado.
Para este artículo, vamos a aplicar la paleta de color personalizada al tema Twenty Twenty-One, que viene por defecto en cualquier instalación de WordPress. Es importante conocer en que tema estamos trabajando, ya que va a ser de vital importancia para aplicar los cambios. De todas formas, os avisaremos en su momento en que punto aplicaremos esta información. También vamos a tener que escribir código
Este pequeño tutorial se va a dividir en dos partes. En la primera, veremos como deshabilitar la paleta de color por defecto y otras opciones que nos da el tema. Y en la segunda, añadiremos nuestra paleta de color personalizada, además de usar CSS para que se nos aplique de forma correcta. Muy sencillo de realizar, pero que esconde algunos trucos. No tardemos más y empecemos.
Preparativos previo y advertencias
Como hemos dicho al principio, todo este proceso lo vamos a hacer sin necesitar la ayuda de ningún plugin por lo que, como habéis sospechado, vamos a escribir código. No hay que preocuparse, ya se son pocas líneas y que podéis modificar de forma sencilla para añadir vuestro propios colores. Basicamente vamos a editar dos archivos: functions.php y style.css. Ambos los vamos a encontrar dentro de la carpeta de nuestro tema.
Podemos acceder a estos archivos mediante FTP o por el editor de WordPress. Pero tenemos un par de alternativas. Para añadir el código CSS, podemos hacer uso de la opción CSS adicional que encontramos dentro de la opción Personalizar del panel de administración de WordPress. Y para el código PHP, podemos instalar el plugin Snippets. Si, es un poco de trampa, ya que hemos dicho que no vamos a usar plugins, pero podemos pasarlo por alto ya que el archivo functions.php es bastante delicado si tocamos algo que no debemos, y no tenemos los conocimientos necesarios para arreglarlo. En vuestra mano queda usar una u otra opción.
Deshabilitando los colores por defecto de Gutenberg
Como he dicho antes, en mi caso voy a utilizar el tema Twenty Twenty-One, y por defecto, al añadir cualquier bloque de Gutenberg susceptible de modificar su color en alguna parte, me voy a encontrar con estas opciones en el panel derecho:
Resumiendo, tenemos una pequeña selección de colores que Twenty Twenty-One (que será diferente si tenéis activo otro tema), una opción llamada Color personalizado, que nos abre un color picker para añadir un color personalizado a mano, o bien añadiendo su código HEX, RGB o HSL. Y por último, un botón para borrar todo y volver a los valores de color por defecto.
Eliminando la opción de color personalizado
Lo primero que vamos a deshabilitar es la opción de Color personalizado. Este paso es opcional, pero es interesante si queremos que nuestro cliente, o la persona que va a crear entradas y/o páginas no tenga opción de usar más colores más allá de los que le definamos con nuestra paleta de colores. Si queremos que se pueda seguir usando esta opción, podéis saltar directamente al siguiente paso.
Para los que si que queráis eliminar la opción de Color personalizado, solo tenéis que añadir este código en el archivo functions.php (o mediante Snippets):
// Deshabilitar paleta colores por defecto Gutenberg
function disable_custom_color_gutenberg() {
add_theme_support( 'disable-custom-colors' );
}
add_action( 'after_setup_theme', 'disable_custom_color_gutenberg' );Si volvemos al editor, veremos que ahora las opciones de color de cualquier bloque nos aparecen así:
Ya no podemos usar ningún color aparte de los ofrecidos en la paleta por defecto. Pero a eso le va a quedar poco, porque también nos vamos a deshacer de ella.
Eliminando la paleta de colores por defecto
A continuación, vamos a eliminar de los bloques Gutenberg la paleta de color por defecto, para hacer hueco antes de añadir la nuestra. Como en el paso anterior, debemos añadir el siguiente código al archivo functions.php:
// Deshabilitar paleta colores por defecto Gutenberg
function disable_color_palette_gutenberg() {
add_theme_support( 'editor-color-palette' );
}
add_action( 'after_setup_theme', 'disable_color_palette_gutenberg' );Si nos vamos al editor de Gutenberg, nos vamos a encontrar diferentes cosas según que hayamos hecho. Si hemos eliminado tanto la opción de Color personalizado como las paletas por defecto, en muchos bloques ya no aparecerá la opción de Color en el panel derecho. De hecho, solo estará en aquellos que nos dejaban añadir gradientes. Es decir, si eliminamos estas dos opciones, WordPress directamente nos deja de mostrar directamente el desplegable Color. Eso sí, si solo hemos añadido el código PHP para eliminar la paleta de color por defecto, aún nos seguirá mostrando la opción Color personalizado dentro del desplegable Color del bloque. Sea cual sea los código que hayamos escrito, ya hemos dado el primer paso de este tutorial. Ahora, vamos a definir nuestra paleta de colores personalizada en Gutenberg.
Añadiendo nuestra paleta de colores en Gutenberg
Este último paso se divide en dos partes. En la primera, definimos nuestra paleta de color y la añadimos a Gutenberg. Pero con este primer paso solo estamos añadiendo la paleta a la interfaz de Gutenberg, no se nos aplica al diseño. Para eso, en la segunda parte veremos como hacerlo mediante CSS.
Definir nuestra paleta de colores personalizada
Antes que nada, tenemos que tener claro cual es nuestra paleta de colores, con sus códigos de color y el nombre de cada color. Lo del nombre de cada color no es algo a tomarse a la ligera, ya que lo vamos a usar después, y es mejor que usemos nombres fácilmente identificables. Esta va a ser la paleta de tres colores que voy a añadir a Gutenberg:
Antes de ver el código PHP completo que vamos a añadir a functions.php, vamos a hacer una pequeña pausa, y ver un trozo de ese código, para tener claro que estamos añadiendo, y que datos necesitamos.
[
'name' => esc_html__( 'Slick Blue', 'twentytwentyone' ),
'slug' => 'slick-blue',
'color' => '#4ECDC4',
],Aquí es donde vamos a introducir toda la info de cada uno de los colores de nuestra paleta, para que WordPress pueda interpretarlos. Veamos que significa cada linea:
- Dentro del valor name, tenemos en primer lugar entre comillas el nombre del color que queramos que se vea al hacer pasar el cursor por encima. Esto le va a dar info al usuario final. En segundo lugar, también entre comillas tenemos el Text Domain, o el nombre de nuestro tema. Si no sabéis el Text Domain de la plantilla que estéis usando, seguramente lo encontréis en las primeras líneas del archivo style.css. Es muy importante definir de forma correcta este nombre, ya que si no lo hacemos, WordPress no sabrá sobre que tema debe aplicar estos valores, y no veremos nuestra paleta.
- El slug es el nombre del color que va a usar WordPress para identificarlo dentro del CSS. Es importante darle un nombre significativo, y así no tener problemas con slugs que ya use WordPress. Por ejemplo, si nuestro color principal es naranja, es vez de usar como slug la palabra orange, podemos usar primary-orange
- Por último, en el valor color, dentro de las comillas pondremos el código de color.
El código PHP completo que voy a usar quedaría así:
// Añadir paleta colores personalizada en Gutenberg
function enable_custom_color_palette_gutenberg() {
add_theme_support(
'editor-color-palette',
[
[
'name' => esc_html__( 'Slick Blue', 'twentytwentyone' ),
'slug' => 'slick-blue',
'color' => '#4ECDC4',
],
[
'name' => esc_html__( 'Light Pear', 'twentytwentyone' ),
'slug' => 'light-pear',
'color' => '#C7F464',
],
[
'name' => esc_html__( 'Bright Pomelo', 'twentytwentyone' ),
'slug' => 'bright-pomelo',
'color' => '#FF6B6B',
],
]
);
}
add_action( 'after_setup_theme', 'enable_custom_color_palette_gutenberg' );En mi caso son solo tres, pero podemos añadir tantos colores como queramos, simplemente añadiendo otro bloque más con el código entre corchetes, y finalizado con una coma. Y así es como lo veríamos en Gutenberg:
Incorporando nuestra paleta de colores en CSS
Ya hemos añadido toda la info para que Gutenberg interprete cual queremos que sea la nueva paleta de colores que se muestre en el editor. Pero si hacemos alguna prueba, veremos que no se aplica el color en las entradas y/o páginas. Esto es porque no le hemos dicho aun a WordPress que emplee los datos que le hemos dado a cada elemento. Aquí es donde entramos con CSS y los slugs que hemos definido antes.
Como hemos visto al principio, normalmente los bloques que hacen uso del color se dividen en tres: color del texto, color de fondo y color del enlace. Y cada uno de ellos tiene su clase CSS correspondiente. Por lo que solo tendremos que introducir dentro de esa clase el slug que hemos usado, y darle el valor de nuestro color. Así lo podemos resumir:
Las clases CSS que vamos a usar son .has-slug-color (para el color de texto), .has-slug-background-color (para el color del fondo), y .has-slug-link-color (para el color del enlace). Solo tendremos que sustituir en la clase la palabra slug por el nombre del slug que le hayamos dado a nuestro color. Así WordPress hará la asociación entre lo que hemos puesto en la interfaz de Gutenberg, y el estilo que tiene que aplicar al elemento.
Como los tres colores lo vamos a usar indistintamente tanto en textos, como en fondos y enlaces, este es el código CSS que tendremos que añadir:
.has-slick-blue-color,
.has-slick-blue-background-color,
.has-slick-blue-link-color {
color: #4ECDC4;
}
.has-light-pear-color,
.has-light-pear-background-color,
.has-light-pear-link-color {
color: #C7F464;
}
.has-bright-pomelo-color,
.has-bright-pomelo-background-color,
.has-bright-pomelo-link-color {
color: #FF6B6B;
}Ahora podemos designar nuestros colores personalizados a cualquier elemento en Gutenberg, y se aplicará automáticamente a dicho elemento en la web. Como hemos dicho antes, esto solo se va a aplicar a este tema en concreto, pero si queremos aplicarlo a cualquier otro tema, podemos reutilizar todo el código, estando atentos a cambiar el nombre del tema en el código PHP correspondiente.
Aunque es un proceso largo y que implica escribir algo de código, ahorraremos mucho tiempo en el futuro, tanto nosotros al diseñar páginas en Gutenberg, como los usuarios finales al crear y editar contenido para WordPress. Además de asegurarnos de que se van a utilizar los colores designados por el diseño de la web.
Por supuesto, existen plugins para WordPress con los que podemos hacer esto mismo, pero resulta interesante que sepamos hacer este proceso por dos motivos. El más evidente es intentar no sobrecargar nuestra instalación de WordPress con complementos, ya que si empezamos a instalar uno cada vez que tengamos una necesidad, por mínima que sea, acabaremos con un listado infinito de plugins, con lo que eso conlleva. Y también por la simple curiosidad de como funciona nuestra web de forma interna, y como con pequeños líneas de códigos podemos adaptar WordPress a nuestro gusto.
Como siempre, tenéis disponibles los comentarios para hacernos llegar a todos vuestras dudas y experiencias con Gutenberg en general, y con las paletas de colores en particular.
