¿Cómo añadir una imagen de vista previa en bloques de ACF?

Hemos creado una colección de bloques personalizados con ACF y necesitamos ponerles una imagen de vista previa a cada bloque.

En este tutorial vamos a ver como añadir una imagen de vista previa en nuestros bloques personalizados hechos con ACF Blocks. En estos momentos no tenemos una propiedad en el archivo block.json que nos permita poner esta imagen de vista previa.

Para facilitarnos la maquetación a simple vista de las páginas necesitamos que nuestros bloques se muestren de la siguiente forma:

La imagen tiene un atributo ALT vacío; su nombre de archivo es imagen-preview-acf-blocks-1.webp

En el archivo block.json de nuestros bloques de ACF vamos a incorporar el atributo «previewImage» de la siguiente forma:

"attributes": {
    "previewImage": {
        "type": "string",
        "default": "/wp-content/uploads/2024/07/cta-bloque.webp"
    }
},

attributes: Es un objeto que contiene todos los atributos que puede tener el bloque.

previewImage: Es el nombre del atributo que se está definiendo. En este caso, se llama previewImage, lo que indica que este atributo almacenará la URL de una imagen de previsualización.

type: Especifica el tipo de datos que este atributo almacenará. En este caso, type: "string" indica que el valor de previewImage será una cadena de texto.

default: Proporciona un valor por defecto para el atributo. Si no se proporciona ningún valor para previewImage en un bloque específico, se utilizará esta URL por defecto: "/wp-content/uploads/2024/07/cta-bloque.webp".

A continuación puedes ver un ejemplo completo de un archivo block.json de uno de mis bloque a medida de ACF. Te animo que crees tus propios bloques siguiendo las indicaciones que muestro en uno de mis tutoriales.

{
    "name": "acf/cta",
    "title": "CTA",
    "description": "Bloque personalizado para mostrar un CTA con información.",
    "style": [ "file:./cta.css" ],
    "category": "formatting",
    "icon": "block-default",
    "keywords": ["Bloque CTA"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "cta.php"
    },
    "attributes": {
        "previewImage": {
            "type": "string",
            "default": "/wp-content/uploads/2024/07/cta-bloque.webp"
        }
    },
    "supports": {
        "anchor": true,
        "color": true,
        "multiple": true,
        "spacing": {
            "margin": ["bottom", "top"],
            "padding": true
        }
    }
}

¿Necesitas un desarrollo web a medida?

Me especializo en desarrollar sitios webs avanzados, programando soluciones personalizadas para proyectos web.

En este punto ya tenemos los bloques preparados con las imágenes subidas de cada uno de ellos.

Ahora tenemos que crear un archivo llamado acf_admin_custom.js que pondremos en nuestro tema hijo y le añadiremos el siguiente código. Te explico mas o menos que hace este código mas abajo.

document.addEventListener("DOMContentLoaded", function() {
	document.addEventListener("mouseenter", function(e) {
		// Selector del contenedor de previsualización donde se mostrará la imagen de fondo
		const previewContainer = document.querySelector('.block-editor-inserter__preview-content-missing');

		if (!previewContainer) {
			return;
		}

		const hoveredBlock = e.target.closest('.block-editor-block-types-list__item');

		if (hoveredBlock) {
			// Recuperar las clases del bloque sobre el cual se encuentra el mouse
			const blockClasses = hoveredBlock.className.split(' ');

			// Buscar una clase que comience con "editor-block-list-item-acf-"
			const blockClass = blockClasses.find(cls => cls.startsWith("editor-block-list-item-acf-"));

			// Si se encuentra dicha clase, extraer el nombre del bloque de ella
			if (blockClass) {
				const blockName = blockClass.replace("editor-block-list-item-acf-", "");

				// Obtener la URL de la imagen para este bloque
				const imageUrl = wp.data.select('core/blocks').getBlockType("acf/" + blockName)?.attributes?.previewImage?.default;

				// Añadir estilos si hay un enlace a la imagen
				if (imageUrl) {
					previewContainer.style.background = `url(${imageUrl}) no-repeat center`;
					previewContainer.style.backgroundSize = 'contain';
					previewContainer.style.fontSize = '0px';
				} else {
					// Eliminar estilos si no hay enlace
					previewContainer.style.background = '';
					previewContainer.style.backgroundSize = '';
					previewContainer.style.fontSize = '';
				}
			}
		}
	}, true);

	document.addEventListener("mouseleave", function(e) {
		const previewContainer = document.querySelector('.block-editor-inserter__preview-content-missing');

		if (!previewContainer) {
			return;
		}

		if (e.target.closest('.block-editor-block-types-list__item')) {
			// Limpiar estilos cuando el mouse salga del bloque
			previewContainer.style.background = '';
			previewContainer.style.backgroundSize = '';
			previewContainer.style.fontSize = '';
		}
	}, true);
});

Esta función de JavaScript se va a ejecutar cuando el contenido de la página se ha cargado completamente (DOMContentLoaded).

  1. EventListener «mouseenter»:
    • Cuando el ratón entra en un elemento que tiene la clase block-editor-block-types-list__item, la función buscará un contenedor de previsualización (.block-editor-inserter__preview-content-missing).
    • Si se encuentra este contenedor y el bloque sobre el que se está posicionando el ratón tiene una clase que empieza con editor-block-list-item-acf-, extraerá el nombre del bloque de esa clase.
    • Luego, intentará obtener la URL de la imagen de previsualización que hemos definido en los atributos del bloque.
    • Si se encuentra la URL de la imagen, se establece como fondo del contenedor de previsualización.
  2. EventListener «mouseleave»:
    • Cuando el ratón sale de un elemento que tiene la clase block-editor-block-types-list__item, limpia los estilos de fondo del contenedor de previsualización, devolviéndolo a su estado original.

Para que esta función actúe dentro del admin de WordPress tenemos que encolar el archivo que hemos creado acf_admin_custom.js utilizando el hook admin_enqueue_scripts.

Pega el siguiente snippet de WordPress en el archivo functions.php de tu tema en funcionamiento o tu plugin de personalizaciones.

function acf_enqueue_admin_scripts_and_styles() {
	wp_enqueue_script('admin-scripts', get_stylesheet_directory_uri() . '/acf_admin_custom.js', array('wp-blocks', 'wp-element', 'wp-hooks'), '', true);
}
add_action('admin_enqueue_scripts', 'acf_enqueue_admin_scripts_and_styles');

¡Ahora si! con estas tres acciones vas a tener todos tus bloques con sus imágenes de vista previa.

Espero haberte ayudado. Si tienes alguna pregunta, no dudes en utilizar la parte de comentarios.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *