Cómo usar un campo de ACF dentro de un bloque Query Loop

Recientemente me he encontrado con el siguiente escenario: inserto un bloque Query Loop para seleccionar los 3 últimos posts de una cierta categoría. Hasta aquí todo fácil. Se inserta el bloque en cuestión y se configura en sus opciones para que escoja los 3 últimos de la categoría deseada.

Pero claro, en esos posts, tenía definido un campo personalizado con ACF y me gustaría sacarlo para mostrar su valor según esté relleno y según el post mostrado. ¿Cómo se hace entonces?

ACF dispone de un shortcode para mostrar el valor de un campo, pero claro, necesitas indicarle el ID del post cuyo campo quieres extraer.

Yo estaba buscando que dentro del bloque Query Loop, dicho shortcode cogiera el valor del POST ID en cuestión y mostrara el valor del campo, pero no funciona así.

La solución: crear un bloque personalizado con ACF

La solución es sencilla: se crea un bloque personalizado con ACF y el contenido que se renderiza de este bloque, al poder hacerlo con PHP, podemos incluir funciones como get_the_ID(). Después, al incluir nuestro bloque dentro del bloque Query Loop, nos cogerá automáticamente dicho POST ID para el fin que nos ocupa, que es mostrar el valor de un campo.

Paso 1: creamos los campos personalizados

Al no ser el propósito de este artículo, lo pasaremos muy por encima. En ACF, he creado un grupo de campos personalizados que están asociados a los posts de esta web, tal como indica la imagen siguiente:

Paso 2: creamos el bloque personalizado con ACF

Haciendo uso de la función de ACF acf_register_block_type() podemos crear nuestro bloque personalizado. Este código que ves a continuación se puede añadir en el functions.php de nuestro theme o bien a través de un plugin personalizado. Yo, particularmente, lo he creado en un fichero aparte, dentro de mi theme, y luego lo he incluido en el functions.php, por motivos de organización personal.

En mi theme, he creado una carpeta llamada “acf-custom-blocks” y dentro he creado un archivo index.php, que es el archivo al que he llamado con un require_once desde mi functions.php. El contenido de dicho archivo es tan simple como esto:

/**
 * Definimos los bloques personalizados en este archivo
 */
define( 'MY_THEME_PATH', get_stylesheet_directory() );
add_action( 'acf/init', 'my_acf_init_blocks' );
function my_acf_init_blocks() {
    if ( function_exists( 'acf_register_block_type' ) ) {
        acf_register_block_type(
            array(
                'name'            => 'video-on-demand',
                'title'           => 'Video On Demand',
                'description'     => 'Muestra plataformas disponibles de VOD',
                'render_template' => MY_THEME_PATH . '/acf-custom-blocks/vod/render.php',
                'category'        => 'text',
                'icon'            => 'admin-comments',
                'api_version'     => 2,
                'keywords'        => array( 'vod', 'streaming', 'video on demand' ),
                'mode'            => 'preview',
                'supports'        => array(
                    'jsx'        => true,
                    'color'      => array(
                        'text'       => false,
                        'background' => false,
                    ),
                    'align_text' => true,
                ),
            )
        );
    }
}

Lo más destacable de este código es la propiedad “render_template”, en la cual indicaremos la ruta del archivo PHP que se encargará de renderizar el contenido de nuestro bloque personalizado.

En mi caso, dentro de mi carpeta “acf-custom-blocks” he definido una nueva carpeta para mi bloque, llamada “vod” y dentro de ésta, mi archivo render.php. Esa es la ruta completa que aparece en la propiedad “render_template”

Paso 3: crear el archivo render.php

El nombre del archivo puede ser cualquier otro nombre, simplemente he querido seguir el mismo patrón que otras veces cuando creo bloques personalizados con ACF

El contenido del archivo es el que sigue:

<?php
$vod = get_field( 'vod_platform', get_the_ID() );
if ( ! empty( $vod ) ) {
	?>
	<div class="vod-wrapper">
	<?php
	foreach ( $vod as $platform ) {
		?>
		<span><img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/img/icon-' . $platform . '.svg' ); ?>" /></span>
		<?php
	}
	?>
	</div> <!-- .vod-wrapper -->
	<?php
}

El archivo prácticamente se explica solo. En la variable $vod guardamos el valor del campo personalizado que queremos mostrar a través de la función de ACF get_field(), pasándole como parámetros el nombre del campo definido en el Paso 1 así como el POST ID del post donde está asociado.

Después, en este caso concreto, simplemente recorro el array de resultados que me devuelve y pinto un icono de la plataforma VOD que quiero mostrar, según se haya almacenado en el post.

Paso 4: incluir mi bloque personalizado en el bloque Query Loop

Ya sólo queda incluir el bloque nuevo que hemos creado dentro del Query Loop y ver si funciona.

Siento que salga cortada la imagen, pero el propio WordPress no me deja hacer scroll horizontal. Pero bueno, en el recuadro rojo se aprecia el Query Loop y en la flecha roja se indica el bloque nuevo recién añadido, llamado “Video On Demand” (se puede consultar fácilmente en el paso 2 que así es como lo hemos nombrado)

Lo que muestra después por el frontend, se puede modificar con CSS a tu antojo, jugando con las clases que ofrece el editor de bloques y añadiendo las tuyas propias. En mi caso, ha quedado así:

Conclusiones

Añadir un campo personalizado de ACF dentro de un bloque Query Loop es posible, pero tenemos que crear nuestro propio bloque personalizado también con ACF y jugar con el archivo de renderizado de nuestro bloque para incluir las funciones correspondientes que nos permite coger el POST ID del artículo que queramos.

Espero que te haya servido de ayuda este artículo si has llegado hasta aquí.