Cómo crear tu propia colección de bloques personalizados con Advanced Custom Fields Pro 6.x

¿Te imaginas tener un plugin que contenga todos los bloques que vayas creando con Advanced Custom Fields? De ese modo podrías reusarlos en varios proyectos.

Recientemente el plugin Advanced Custom Fields ha sido actualizado a su versión 6.x y con ello se han introducido toda una serie de mejoras, dentro de las cuales ha cambiado la forma de cómo crear bloques personalizados.

En este tutorial te explicaré paso a paso cómo crear un ACF Block con el nuevo sistema.

¡Empezamos!

1- Creamos el plugin

Lo primero que haremos es crear un nuevo plugin donde poder meter los distintos bloques.

Yo lo he llamado scv-acf-blocks, por lo que el archivo principal scv-acf-blocks.php quedaría:

<?php

/* Plugin Name: ACF Blocks */

2- Definimos el grupo de campos

Para cada bloque que crees necesitarás definir y asignarle un grupo de campos con ACF.

En este tutorial nos vamos a centrar en crear un bloque encargado de mostrar avisos (notificaciones) allí donde lo usemos.

Y para este bloque los campos que crearemos son:

• Fecha y hora del evento
• Mensaje a mostrar (obligatorio)
• Texto del botón
• Enlace del botón

A continuación puedes ver las etiquetas, nombres y tipos de los campos:

3- Creamos la estructura de archivos

Para cada bloque que metamos en el plugin crearemos su propio directorio. En este caso lo llamaremos notification.

Y dentro meteremos 3 archivos: block.json, notification.php y notification.css, obteniendo la siguiente estructura de archivos:

Y la función de cada uno es:

• block.json: contiene la configuración del bloque.
• notification.php: contiene la estructura HTML y datos dinámicos del bloque.
• notification.css: contiene los estilos del bloque.

4- Configuramos el bloque con el archivo block.json, registramos el bloque y le asignamos el grupo de campos

Lo siguiente que haremos es definir la configuración del bloque en el archivo block.json:

{
	"name": "notification",
	"title": "Notificación",
	"description": "Para mostrar notificaciones.",
	"style": [ "file:./notification.css" ],
	"category": "text",
	"icon": "bell",
	"keywords": ["aviso", "novedad", "comunicado"],
	"acf": {
		"mode": "preview",
		"renderTemplate": "notification.php"
	}
}

Donde indicamos el nombre (slug), título y descripción del bloque, la ruta de su hoja de estilos, la categoría, el icono y las palabras clave para encontrarlo más fácilmente.

Y por otro lado le indicamos a ACF que queremos el modo previsualización y dónde se encuentra la plantilla del bloque.

Por último, registraremos el bloque en el archivo principal del plugin scv-acf-blocks.php mediante el uso de la función register_block_type, a la cual le pasamos la ruta del directorio de nuestro bloque:

<?php

/* Plugin Name: ACF Blocks */

add_action( 'init', 'scv_register_acf_blocks', 5 );

function scv_register_acf_blocks() {

	// Register Notification block
	register_block_type( __DIR__ . '/notification' );

}

Además, fíjate que la prioridad del action hook ha sido de 5, esto es importante para el correcto funcionamiento del plugin ACF.

5- Creamos la plantilla

Lo siguiente que haremos es crear la plantilla de nuestro bloque para así poder renderizar su contenido dinámico que a partir de sus campos personalizados.

Recuerda que el archivo es notification.php y nos quedaría:

<?php
/**
 * Notification Block Template.
 */

$anchor = '';
if ( !empty( $block['anchor'] ) ):
	$anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
endif;

$class_name = 'scv-notification';
if ( !empty( $block['className'] ) ):
	$class_name .= ' ' . esc_attr( $block['className'] );
endif;

// ACF Fields
$date = get_field( 'scv_notification_date' );
$message = get_field( 'scv_notification_message' );
$button = get_field( 'scv_notification_button' );
$url = get_field( 'scv_notification_url' );

?>
<div <?php echo $anchor; ?>class="<?php echo $class_name; ?>" >
	<div class="col-left">
		
		<?php if( !empty( $date ) ): ?>
		<p class="date"><?php echo $date; ?></p>
		<?php endif; ?>

		<h3 class="title"><?php echo $message; ?></h3>
	
	</div>

	<?php if( !empty( $button ) && !empty( $url ) ): ?>
	<div class="col-right">
		<a href="<?php echo $url; ?>" class="btn"><?php echo $button; ?></a>
	</div>
	<?php endif; ?>

</div>

Ten en cuenta que de la línea 6 a la 9 obtenemos si tiene definido algún anclaje y de la 11 a la 14 le asignamos una clase y miramos si tiene alguna personalizada.

Después obtenemos los valores de los campos personalizados y definimos la estructura HTML del bloque, que estará formado por dos columnas.

6- Le damos estilos

Ahora definimos los estilos del bloque en el archivo notification.css y usaremos Flexbox para gestionar sus dos columnas, dependiendo de si estamos en la versión móvil o escritorio:

/* Notification Styles  */

.scv-notification {
	background-color: #32373a;
	border-radius: 8px;
	padding: 30px;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.scv-notification .date {
	color: #f3f5f6;
	margin-bottom: 5px;
	font-size: 12px;
}

.scv-notification .title {
	color: #fff;
	margin-bottom: 20px;
	font-size: 24px;
}

.scv-notification .btn {
	color: #fff;
	background-color: #20c789;
	display: inline-block;
	padding: 10px 30px;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
}

.scv-notification .btn:hover {
	color: #fff;
	background-color: #1a9567;
}

@media (min-width: 1024px) {
	.scv-notification {
		display: flex;
		flex-flow: row no-wrap;
		justify-content: space-between;
		align-items: center;
	}
	.scv-notification .col-left {
		flex-basis: calc( 75% - 20px );
	}
	.scv-notification .col-right {
		flex-basis: 25%;
	}
	.scv-notification .title {
		margin-bottom: 0;
	}
}

7- Activamos la alineación (opcional)

En el caso de que queramos que nuestro bloque tenga alineación (ancho amplio o completo) se lo indicaremos en su plantilla notification.php, justo después de cuando definimos la variable $class_name.

if ( !empty( $block['align'] ) ):
	$class_name .= ' align' . esc_attr( $block['align'] );
endif;

8- Testeamos el bloque

Y eso sería todo, lo único que nos falta es testear nuestro bloque y yo lo haré en una página existente. De manera que en el editor de bloques deberías ver:

Y en la parte pública:

Espero que te haya parecido útil el tutorial y que a partir de ahora te atrevas a crear bloques con Advanced Custom Fields.

Enlaces útiles

• Código del tutorial
• Cómo migrar los bloques de ACF Pro 5.x a 6.x