How to synchronize the color palette of the blocks created with ACF

One of the drawbacks of creating a block with the different tools that have emerged is that, in some cases, the color picker that the developer has used is not the same as the one used by the WordPress editor, AKA Gutenberg. This is the case with blocks created with Advanced Custom Fields. But there is a way to bring the look & feel of the color picker closer to the mode, and functionality of the WordPress native.

Before starting, I recommend you to go through the complete article that José Ángel Vidania published some time ago in his Blog about How to adapt your WordPress Theme to Gutenberg where you can see how to add a custom colour palette with your company's corporate colours,

Initial situation

If you followed the steps in the Vidania you will find a color selector similar to the one you see on your left for the native blocks.

But if you add a block built with ACFThe block selector will look like the one you see in the image on the right, which not only breaks with the visual part, but also with the operational part, since we will not be able to easily apply the corporate colours that we have defined previously.

Synchronizing the ACF color palette

The first thing we are going to do is tolimit the colors available in the ACF selector to have only the same ones that we have defined for the rest of the blocks. To do this we'll take advantage of the selectors shown at the bottom by using the following code that, in this case, we'll add to the end of the functions.phpfile

/**
 * 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() { ?>

 "#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;
     }
}

On line 14 and from line 27 is where we will define our colors, I have done it in hexadecimal, but obviously you can use RGB.

Once this is done and saved, the result will be the one shown below in the right column:

As you can see, we have reduced the color selectors shown at the bottom from eight to five and in addition, we have customized them with the five colors we had already defined for the Gutenberg selector. Now we have to give the final look & feel, eliminating elements that we don't need.

Adapting the look & feel to Gutenberg

The approach is simple, we have to eliminate the field in which we put the color code, the iris and the bar on the right, in addition to converting the selectors that are now squares into rounds. How to do this, simple, through css.

To do this, the first thing we'll do is to glue a css file together by adding the following snippet to our plugin.

// 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');

And the css file is the following, in my case, I have located it in a folder called assets that is located in the same folder of the functionality plugin:

/* 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;
}

With that we will have the color selectors in the blocks created with ACF in the following way:

Conclusion

As you can see, with some simple snippets you can tune the ACF block selector to have the same style and functionality as the Gutenberg block selector. This is useful both for blocks you create yourself with ACF and for blocks made by others using this tool.

I invite you to leave your impressions and / or questions in the Contact Form And that I propose new topics that you would like to try in these tutorials. I Will Be happy to answer by email and write on this blog.