Crear bloques personalizados con ACF vs. Block Lab

Ahora que ya ha pasado un tiempo desde el lanzamiento de la versión 5 de WordPress y el polémico editor de bloques (antes llamado Gutenberg) y nos hemos podido ir acostumbrando a él, es hora de empezar a sacarle partido en nuestros proyectos.

Si eres de los que acostumbra a utilizar Custom Post Type y Custom Fields para personalizar las páginas web de tus clientes y dejarlas lo más preparadas posible para que puedan mantener y actualizar su contenido con la más comodidad posible, poder crear bloques personalizados te va a ser muy útil.

Cierto que crear desde cero nuevos bloques puede ser algo complejo o te puede llevar más tiempo de aprender, sin embargo ya existen opciones para hacerlo a través de plugins que nos van a facilitar mucho la vida y con las que ya podemos ir practicando.

En este tutorial vamos a ver cómo crear un bloque personalizado para añadir una tabla de precios en una web, pero lo vamos a ver comparando dos opciones: Advanced Custom Fields y Block Lab.

Paso 1: el objetivo

Lo primero que vamos a hacer, y que es independiente del plugin que utilicemos luego para prepararlo, es diseñar y estructurar el bloque que vamos a querer construir, que campos necesitará y el diseño que vamos a darle.

En este caso queremos una tabla de precios sencilla para una web corporativa, y nos va a quedar así:

Y para ello definiremos los siguientes campos:

• Título
• Subtítulo o descripción del plan
• Precio
• Características
• Enlace del botón

Y unos estilos CSS que serán comunes en ambos casos:

/* TABLA PRECIOS */
.pricing-box {
    display: inline-block;
    border: solid 1px #4e5b7c;
    padding: 30px;
    border-radius: 10px;
	vertical-align: top;
    margin: 5px;
    max-width: 32%;
}
.pricing-box:hover { box-shadow: 0px 1px 10px rgba(0,0,0,0.5);     margin-top: -10px; }
.pricing-box h3 {
    float: right;
    font-size: 5rem;
    color: #4e5b7c;
    margin-top: -20px;
}
.pricing-box h3 span {
    display: block;
    color: #666;
    font-size: 1.4rem;
    text-align: center;
}
.pricing-box p {
    font-style: italic;
}
.pricing-box h2 {
    margin-top: 60px;
}
.pricing-box a.button {
	margin: 20px auto;
    display: block;
    text-align: center;
    background: #4e5b7c;
    border-radius: 6px;
}
.pricing-box ul {
    list-style: none;
    margin-left: 0rem;
}
.pricing-box li::before {
    content: "\f00c";
    font-family: FontAwesome;
	color: #12bd12;
    width: 50px;
    margin-right: 10px; 
    
}
.pricing-box li {
    font-size: 1.4rem;
    list-style-type: none !important;
    line-height: 3rem;
}

Opción A: Block Lab

Block Lab es un plugin gratuito que nos permite crear bloques personalizados de una forma realmente fácil.

De momento el único inconveniente es que tiene pocos tipos de campo disponibles, pero están desarrollando muchos más.

Una vez instalado el plugin tendremos la opción de crear un nuevo bloque escogiendo el tipo de bloque, el icono para identificarlo, palabras clave para clasificarlo, así como los campos y el tipo de cada uno que formarán el bloque en sí. (Si has utilizado ACF para crear campos personalizados, la interfaz te será conocida porque es muy similar)

Una vez guardado, el plugin te indicará que debes crear un archivo con el código necesario para mostrar el bloque. Ese archivo deberás crearlo en la carpeta de tu theme:

wp-content/theme/blocks/block-tabla-precios.php

Es en este archivo donde deberemos indicar el HTLM de salida que mostrará el bloque una vez renderizado y para mostrar el contenido de cada campo, utilizaremos block_field( ‘nombre-campo’, false ).

Siguiendo con el ejemplo, en este caso podríamos mostrar los diferentes campos añadiendo los estilos necesarios.

<div class="pricing-box personal">
	<h3><?=block_field( 'precio', false )?><span> / mes</span></h3>
	<h2><?=block_field( 'titulo', false )?></h2>
	<p><?=block_field( 'descripcion', false )?></p>
	<p><?=block_field( 'caracteristicas', false )?></p>
	$url = block_field( 'mas_info', false );
	if ( ! empty( $url ) ) { ?>
	<a class="button" rel="nofollow" href="<?=$url?>"><i class="fa fa-info"></i>&nbsp; Más información</a>
	<?php } ?>
</div>

Ahora si ya podemos crear una página o editar una para añadir el nuevo bloque:

Y al añadirlo, nos muestra una interfaz visible muy sencilla donde añadir el contenido para el bloque:

Como ves, Block Lab es una opción realmente sencilla para crear bloques personalizados en la web. Como decía antes, el único inconveniente que tiene por ahora, es que el tipo de campos es realmente limitado, y en el caso de la tabla de precios, por ejemplo, para el listado de características tenemos que utilizar un textarea y añadir html para mostrar una lista, ya que no existe un tipo repeater que si tenemos en ACF como veremos a continuación.

Opción B: Advanced Custom Fields

ACF ya es un clásico y si te dedicas a desarrollo web en WordPress seguramente ya lo conocerás de sobras. La versión 5.8 del plugin trae ya la opción de crear un bloque personalizado para nuestra web. (Necesitarás la versión PRO del plugin para poder descargarla)

Vamos a ver en este caso cuál sería el proceso.

Para empezar, lo primero que haremos es crear la función necesaria para crear el tipo de bloque (esta parte Block Lab la hace directamente), añadiendo en nuestro archivo functions.php el código siguiente:

add_action('acf/init', 'my_acf_init');
function my_acf_init() {
	
	if( function_exists('acf_register_block') ) {
		
		acf_register_block(array(
			'name'				=> 'Tabla-Precios-ACF',
			'title'				=> __('Tabla de precios'),
			'description'		=> __('A custom price table block.'),
			'render_callback'	=> 'my_acf_block_render_callback',
			'category'			=> 'formatting',
			'icon'				=> 'admin-comments',
			'keywords'			=> array( 'price', 'table' ),
		));
	}
}
function my_acf_block_render_callback( $block ) {
	
	$slug = str_replace('acf/', '', $block['name']);
	
	// include a template part from within the "template-parts/block" folder
	if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
		include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
	}
}

Como ves, además del nombre y slug del bloque, podremos añadir la descripción, icono, keywords y categoría del bloque (todo esto con Block Lab podíamos hacerlo directamente desde la interfaz del plugin)

El segundo paso será crear los campos en sí que necesitemos para nuestro bloque, aunque en este caso tenemos muchas más opciones, incluyendo un campo repeater que nos irá perfecto para las características del plan de precios:

La ventaja del campo repeater en este caso, es que permite que el usuario añada el número de características que quiera, y poder recuperarlas por ejemplo en formato de lista.

Lo siguiente será crear el archivo php con el output de HTML para mostrar el bloque, al igual que habíamos hecho antes, aunque en este caso el fichero estará en

wp-content/theme/template-parts/block/content-{$slug}.php

Es decir, en el ejemplo sería: /template-parts/block/content-Tabla-Precios-ACF.php

En el caso de ACF, como ya hacíamos para los campos personalizados de un post normal, utilizaremos get_field(‘nombre’) para recuperar el valor de cada campo.

<div class="pricing-box personal">
	<h3><?=get_field('precio' )?><span> / mes</span></h3>
	<h2><?=get_field( 'titulo' )?></h2>
	<p><?=get_field('descripcion' )?></p>
	<?php if( have_rows('caracteristicas') ): ?>
	<ul>
		<?php while ( have_rows('caracteristicas') ) : the_row(); ?>
		<li><?=the_sub_field('caracteristica');?></li>
		<?php     endwhile;
		endif;
		?>
	</ul>
	<?php 
	$url = get_field( 'mas_info' );
	if ( ! empty( $url ) ) { ?>
	<a class="button" rel="nofollow" href="<?=$url?>"><i class="fa fa-info"></i>&nbsp; Más información</a>
	<?php } ?>
</div>

Para el campo repetidor, utilizaremos un bucle while y obtendremos los valores mediante the_sub_field(‘nombre’);

Si te fijas en este caso hemos utilizado la misma estructura HTML y clases que en el otro ejemplo, por lo que el resultado final sería el mismo.

Conclusiones: ACF vs Block Lab.

Como novata todavía en el proceso de crear bloques, mi primera impresión es que Block Lab nos facilita algo más las cosas pudiendo registrar el bloque directamente a través del plugin. También la visualización del mismo dentro de la página es muy amigable.

Sin embargo, como comentaba antes, todavía el listado de tipos de campos es muy limitado y se echa de menos alguno más, por lo que para según que bloques más complejos ACF nos dará muchas más opciones.

Ambos plugins son una muy buena opción para empezar a trastear y probar cómo crear bloques personalizados y aprovecharlos en páginas web para clientes, aunque Block Lab te permitirá hacerlo con la versión gratuita del plugin.

ACF lleva años de experiencia trabajando con campos personalizados y habrá que esperar cómo evoluciona uno y otro para ver si uno de los dos se convierte en el referente y toma ventaja.