¿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.
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 */
Para ver este vídeo del tutorial, primero debes suscribirte.
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:

Para ver este vídeo del tutorial, primero debes suscribirte.
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.
Para ver este vídeo del tutorial, primero debes suscribirte.
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.
Para ver este vídeo del tutorial, primero debes suscribirte.
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.
Para ver este vídeo del tutorial, primero debes suscribirte.
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;
}
}
Para ver este vídeo del tutorial, primero debes suscribirte.
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;
Para ver este vídeo del tutorial, primero debes suscribirte.
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:

Para ver este vídeo del tutorial, primero debes suscribirte.
Espero que te haya parecido útil el tutorial y que a partir de ahora te atrevas a crear bloques con Advanced Custom Fields.