Cómo sincronizar la paleta de colores de los bloques creados con ACF

Uno de los inconvenientes de crear un bloque con las distintas herramientas que han surgido es que, en algunos casos, el color picker o selector de color que ha usado el desarrollador no es el mismo que usa el editor de WordPress, AKA Gutenberg. Este es el caso de los bloques creados con Advanced Custom Fields. Pero existe una manera de acercar al look & feel del selector de colores al modo, y funcionalidad del nativo de WordPress.

Antes de comenzar, os recomiendo que paseis por el completo artículo que publicó hace ya tiempo José Ángel Vidania en su Blog sobre Cómo adaptar tu Tema de WordPress a Gutenberg en el que podréis ver cómo agregar una paleta de colores personalizada con los colores corporativos de tu empresa,

Situación inicial

Si habéis seguido los pasos del artículo de Vidania os encontraréis con un selector de colores similar al que veis a vuestra izquierda para los bloques nativos.

Pero si agregais un bloque construido con ACF, el selector de bloques tendrá el aspecto que veis en la imágen de la derecha, lo cual. además de romper con la parte visual, rompe también con la parte operativa, ya que no vamos a poder aplicar de forma sencilla los colores corporativos que hemos definido anteriormente.

Sincronizando la paleta de colores de ACF

Lo primero que vamos a hacer es limitar los colores disponibles en el selector de ACF para tener únicamente los mismos que hemos definido para el resto de bloques. Para ello nos aprovecharemos de los selectores que se muestran en la parte inferior mediante el siguiente código que, en este caso, añadiremos al final del archivo functions.php

<?php
/**
 * Paletas de Color en bloques de ACF
 *
 * Agrega la paleta de colores personalizada al selector de colores ACF
* Haz coincidir estos colores con los colores en /functions.php y /assets/scss/partials/base/variables.scss *
*/
add_action( 'acf/input/admin_footer', 'wd_acf_color_palette' );
function wd_acf_color_palette() { ?>
<script type="text/javascript">
(function($) {
     acf.add_filter('color_picker_args', function( args, $field ){
          // Define a continuación los códigos hexadecimales para los colores que deseas que aparezcan en la paleta
          args.palettes = ['#FFF', '#240045', '#cf009c', '#d9d9d9', '#666666']
          // Devuelve los colores
          return args;
     });
})(jQuery);
</script>
<?php  }
// Obtiene los valores ACF del selector de color
$wd_acf_color_picker_values = get_field( 'your_custom_field' );
// Establecer una matriz de clases de color (para el editor de bloques) y códigos hexadecimales (de ACF)
$wd_block_colors = [
	 // Define los colores para que coincidan con su clase de color (Gutenberg) y códigos hexadecimales (acf)
     "Blanco"			=> "#FFF",
     "Morado"			=> "#240045",
     "Rosa"				=> "#cf009c",
     "Gris"				=> "#d9d9d9",
     "Negro"			=> "#666666"
];
// Recorre la matriz de colores y establece la clase adecuada si la selección del color de fondo coincide con el valor
foreach( $wd_block_colors as $key => $value ) {
     if( $wd_acf_color_picker_values == $value ) {
          $wd_color_class = $key;
     }
}
?>

En la línea 14 y a partir de la 27 es donde definiremos nuestros colores, yo lo he hecho en hexadecimal, pero, evidentemente, podéis usar RGB.

Una vez hecho esto y guardado el resultado será el que os muestro a continuación en la columna de la derecha:

Como podéis ver, hemos reducido los selectores de color que se muestran en la parte inferior de ocho a cinco y además, los hemos personalizado con los cinco colores que ya habíamos definido para el selector de Gutenberg. Ahora nos queda dar el look & feel final, eliminando elementos que no necesitamos.

Adaptando el look & feel a Gutenberg

El planteamiento es sencillo, tenemos que eliminar el campo en el que ponemos el código de color, el iris y la barra de la derecha, además de convertir los selectores que ahora son cuadrados en redondos. ¿Cómo hacer esto?, sencillo, mediante css.

Para ello, lo primero que haremos antes de nada es encolar un archivo css añadiendo el siguiente snippet en nuestro plugin de funcionalidades.

<?php
// Encolar el fichero admin.css que permite cambiar elementos del admin de WordPress (Revisar para poner aquí TODOS los estilos del CSS del admin)
function admin_style() {
  wp_enqueue_style('admin-styles', WPMU_PLUGIN_URL .'/personalizacion-carlosmdh/assets/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');
?>

Y el fichero css es el siguiente, en mi caso, lo he localizado una carpeta llamada assets que está situada en la misma carpeta del plugin de funcionalidades:

/* Mostrar el selector de color de los bloques de ACF con el mismo estilo que en los bloques de Gutenberg */
.wp-picker-open+.wp-picker-input-wrap,
.iris-square,
.iris-strip {
	display: none !important;
}
.iris-picker {
	height: 20px !important;
	border: 0px !important;
}
.iris-palette {
	border-radius: 50px !important;
}

Con eso tendremos los selectores de color en los bloques creados con ACF de la siguiente forma:

Conclusión

Como puedes ver, con unos sencillos snippets puedes tunear el selector de bloques de ACF para que tenga el mismo estilo y funcionalidad que el selector e bloques de Gutenberg. Esto es útil tanto para los bloques que crees tu mismo con ACF como para bloques hechos por terceros que usen esta herramienta.

Te invito a que dejes tus impresiones y / o dudas en el formulario de contacto y que me propongas nuevos temas que te gustaría que tratara en estos tutoriales. Estaré encantado de contestarte por email y escribir en este blog.