Bloques ACF: Guía de uso

Con ACF Blocks, la potente función del plugin Advanced Custom Fields, puede ampliar la funcionalidad de su sitio web añadiendo bloques de contenido únicos adaptados a sus necesidades específicas.

Es importante mencionar que la función de bloques forma parte de la versión ACF Pro, por lo que sólo está disponible para usuarios de ACF Pro.

El enfoque del bloque en WordPress ofrece varias ventajas importantes sobre los métodos tradicionales como los meta campos y los constructores de páginas. Exploremos los principales beneficios del uso de bloques:

• Reutilizables y flexibles
  Una de las ventajas más destacadas es su reutilización. Los bloques pueden utilizarse fácilmente en distintas páginas o incluso en la misma página. Esta flexibilidad le permite crear elementos de contenido coherentes que mantienen el mismo diseño y funcionalidad en todo su sitio web. Ahorra tiempo y garantiza una experiencia de usuario fluida a sus visitantes.
• Rendimiento mejorado
  Los bloques ofrecen una forma más eficaz de gestionar los activos y recursos. A diferencia de los enfoques tradicionales, en los que todos los recursos se cargan globalmente, los activos de los bloques sólo se cargan donde se utiliza el bloque. Este mecanismo de carga optimizado acelera los tiempos de carga de la página y reduce la sobrecarga innecesaria de recursos. Como resultado, su sitio web es más receptivo, especialmente para usuarios móviles, y obtiene mejores resultados en las clasificaciones de los motores de búsqueda.
• Ausencia de conflictos de estilo
  En el pasado, los conflictos de estilo eran un problema habitual cuando se trabajaba con metacampos personalizados y plantillas temáticas. La naturaleza modular del bloque reduce significativamente las posibilidades de que se produzcan conflictos de estilo. Cada bloque tiene su propio conjunto de estilos y scripts, lo que minimiza la posibilidad de conflictos con otros elementos de la página. Este aislamiento garantiza un diseño más estable y predecible y mejora la experiencia general de desarrollo.

Así pues, el enfoque del bloque en WordPress presenta una forma moderna y potente de diseñar y gestionar contenidos. Gracias a su reutilización, mejor rendimiento y eliminación de conflictos, los bloques se han convertido en el método preferido de muchos usuarios y desarrolladores de WordPress.

Antes de sumergirnos en los bloques ACF, vamos a hablar brevemente de los bloques nativos de Gutenberg.

Gutenberg es el editor de bloques por defecto de WordPress que proporciona un conjunto básico de bloques como párrafos, encabezados, imágenes y más. Si bien estos bloques incorporados son útiles, tienen algunas limitaciones cuando se trata de personalizar el diseño y agregar funcionalidad avanzada.

Inconvenientes de los bloques nativos:

• Opciones de personalización limitadas
• Imposibilidad de crear diseños de bloques complejos
• No hay forma intuitiva de incluir campos personalizados para contenidos más avanzados

Es esencial tener en cuenta que es posible crear bloques Gutenberg personalizados sin plugins adicionales. Sin embargo, este proceso exige un buen conocimiento de React, la biblioteca JavaScript que potencia Gutenberg. También requiere una considerable inversión de tiempo y esfuerzo para desarrollar bloques personalizados.

Desafíos de la creación de bloques personalizados de Gutenberg:

• Se requieren conocimientos de React
  El desarrollo de bloques personalizados de Gutenberg implica trabajar con componentes de React, lo que exige un cierto nivel de conocimientos de JavaScript y desarrollo de React.
• Lleva mucho tiempo
  Crear bloques personalizados desde cero puede llevar mucho tiempo, especialmente para aquellos que son nuevos en el desarrollo de React o WordPress.
• Complejidad
  El desarrollo de bloques personalizados a menudo implica la gestión de estados, y el manejo de contenido dinámico.
• Mantenimiento
  A medida que evoluciona el núcleo de WordPress, los bloques personalizados pueden requerir actualizaciones y ajustes para seguir siendo compatibles, lo que aumenta la carga de mantenimiento.

En cambio, los bloques ACF ofrecen una forma más accesible y fácil de usar de crear bloques personalizados sin necesidad de adentrarse en el complejo desarrollo de React. ACF proporciona una interfaz intuitiva para añadir campos y definir diseños, permitiendo a los usuarios de todos los niveles de habilidad construir bloques avanzados de forma rápida y eficiente.

La función de bloques de ACF nos permite crear bloques y adjuntarles cualquier grupo de campos. ACF se encarga de todo, muestra los campos en la interfaz de administración y los guarda. Así, podemos tener varios campos de distintos tipos en nuestro bloque, incluidos campos complejos, como galería y repetidor, sin necesidad de codificar mucho.

Pero para los desarrolladores, es importante saber no sólo cómo crear los bloques ACF, sino también cómo funciona esta función entre bastidores. Echemos un vistazo detrás de la cortina para entender la magia que impulsa estos bloques versátiles y cómo se integran perfectamente con el editor nativo de Gutenberg.

La gran noticia es que, por dentro, los bloques ACF funcionan y actúan igual que otros bloques nativos de Gutenberg, por ejemplo, los párrafos. Si alguna vez has visto el código de los bloques de Gutenberg, te darás cuenta de que se convierten en HTML plano y se guardan en el campo post_content. Por ejemplo, el campo de párrafo central tiene este aspecto:

<!-- wp:paragraph -->
<p>Your text</p>
<!-- /wp:paragraph -->

Y el bloque de encabezamiento tiene este aspecto:

<!-- wp:heading -->
<h2 class="wp-block-heading">Your heading</h2>
<!-- /wp:heading -->

Como ves, estos son HTML plano y están extendidos por los comentarios de WP. Lo que permite a los desarrolladores analizar los bloques más tarde.

Así pues, ACF sigue este planteamiento y crea bloques similares. La principal diferencia es que los campos se guardan como JSON en el comentario HTML, y el bloque no contiene el código HTML propiamente dicho.

<!-- wp:acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic 
{"name":"acf/org-wplake-website-blocks-codesnippet-theme-classic-codesnippetthemeclassic",
"data":{"local_code-snippet__code-snippet":"\u003c?php\r\necho 'hello world';",
"local_code-snippet__language":"php"},"mode":"edit"} /-->

Es importante entender este principio, pero no debe preocuparse por la implementación. ACF se encarga de todo por sí mismo.

Consejo: Almacenar los campos de bloque como json en el post_content es mucho mejor para el rendimiento, en comparación con el enfoque de meta fields. Lo que significa que las páginas construidas utilizando bloques ACF a veces se cargan más rápido que la página, que utiliza plantillas simples y meta campos.

En el capítulo "Entre bastidores" hemos mostrado cómo funciona la función de bloques del ACF. Pero, ¿qué ocurre con los estilos y los scripts? ¿Debería añadirlos globalmente, como haría normalmente? Puede hacerlo, pero afortunadamente existe una solución mejor.

ACF Block gestiona estilos y scripts de forma modular y eficiente. Cada bloque tiene su propio CSS y JavaScript, que se cargan sólo cuando ese bloque específico aparece en una página. Este enfoque mejora el rendimiento al evitar la carga innecesaria de recursos, lo que se traduce en tiempos de carga de página más rápidos y una experiencia de usuario más fluida.

Consejo: Si está familiarizado con la metodología BEM, es posible que tenga la idea de que ACF Blocks es un lugar ideal para utilizar el método y estaría cien por cien en lo cierto. Utilizar el método BEM con ACF Blocks organizará su CSS y marcado, garantizando una mejor reutilización y mantenimiento del código.

ACF nos facilita la vida, ya que se encarga de renderizar y guardar los campos. Pero esta característica aún requiere algo de programación. Es por eso que a continuación ofrecemos 2 maneras de añadir los bloques ACF en su biblioteca Gutenberg: el uso de un plugin (de pago, pero sin codificación) o manualmente, con la codificación.

Sea cual sea tu elección, inicialmente debemos crear un grupo de campos para el bloque. Hagámoslo ahora mismo. En nuestro ejemplo, crearemos un bloque 'Banner', así que daremos el mismo nombre al grupo.

ACF es famoso por sus complementos. En este caso, vamos a utilizar uno de ellos. ACF Views es el complemento que le permite mostrar campos ACF seleccionados o Entradas en cualquier lugar usando shortcodes, el marcado HTML es creado automáticamente por el complemento. Puede leer más sobre las ventajas del enfoque del plugin en comparación con la codificación aquí.

El plugin tiene muchas funciones en la versión Básica, pero la función que permite crear Bloques ACF sin codificación forma parte de la versión Pro.

Para seguir, necesitarías comprar e instalar la versión Pro del plugin.

Antes de empezar con la creación de Bloques ACF, es necesario conocer el término Vistas ACF que utilizaremos.
El término "Vista" es el nombre que recibe el Post Type especial que proporciona el plugin. Cada Vistaes una lista de campos ACF a mostrar, por lo que puede tener muchas Vistasdiferentes para mostrar diferentes campos (o conjuntos de campos) para diferentes entradas/páginas.

Ya estamos listos para crear nuestro primer bloque. A continuación le adjuntamos un tutorial en vídeo que le servirá de guía. No olvides entrar en el modo de pantalla completa para verlo todo con detalle.

En resumen, tienes que repetir los siguientes pasos:

1. Crear un grupo ACF y añadir campos de destino
2. Cree una Vista, seleccione los campos de destino del primer paso y publique la Vista.
3. En los ajustes de la Vista, active la casilla 'Con bloque Gutenberg'.
4. Haga clic en "Actualizar" para guardar su Vista.
5. Edita tu Post, Página o elemento CPT utilizando el editor de Gutenberg.
   Nota: Es importante utilizar el editor de Gutenberg y no el editor Clásico o el elemento constructor de páginas, ya que el bloque generado sólo está disponible en la librería de bloques de Gutenberg.
6. Inserta un nuevo bloque, seleccionando tu Vistabloque de la lista. El nombre del bloque será el de tu Vista.
7. Rellena los campos del bloque que acabas de insertar.
8. Haga clic en "Publicar" para guardar su entrada, página o elemento CPT.
9. Visita la página para ver el resultado.

ACF Views genera automáticamente el marcado, por lo que no tiene que preocuparse por los tipos de campo y sus formatos de retorno. Ahora, puede dar estilo a la salida añadiendo algunas reglas CSS. Puede añadirlas fácilmente, utilizando la pestaña 'Avanzado' de su Vista.

Este enfoque le da más flexibilidad en comparación con el plugin, pero requiere más esfuerzo.

Nota: a continuación se muestra la guía real para ACF v6+. Mostraremos la nueva y recomendada forma de añadir bloques (usando JSON). La forma antigua, con una función php quedó obsoleta con el lanzamiento de la v6.

Debes crear una declaración JSON para cada bloque. La declaración es un archivo .json plano que contiene la información necesaria sobre el bloque. Puede colocar este archivo donde quiera, dentro de su tema o plugin.

{
    "name": "acf/banner",
    "title": "Banner",
    "description": "A custom banner block.",
    "style": [ "file:./banner.css" ],
    "category": "formatting",
    "icon": "admin-comments",
    "keywords": ["banner"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "banner.php"
    }
}

Ahora tenemos que informar a WordPress sobre el bloque, utilizando el siguiente fragmento:

<?php
add_action( 'init',function (){
    // fixme your path here to the folder with the JSON file
    register_block_type( __DIR__ . '/blocks/testimonial' );
} );

En este paso, el bloque ya está registrado, y tenemos que adjuntar nuestro Grupo ACF al bloque. Abre el grupo que creamos inicialmente y elige la opción Bloque en la selección de reglas de ubicación. A continuación, elija su Bloque en el desplegable de selección y actualice el grupo.

Consejo: Si no ve el nombre de su bloque en la selección, asegúrese de haber añadido el código PHP del paso 2 y de haber cargado el archivo.

Ahora todo está listo para crear la plantilla del bloque. La plantilla PHP devolverá el marcado HTML del bloque, basado en los valores de los campos. Debe comprobar los nombres, tipos y formatos de retorno de los campos en el grupo ACF para crear el código adecuado.

A continuación se muestra el código de plantilla para nuestro bloque Banner. Necesitas añadirlo al archivo PHP, que has declarado en la sección renderTemplate en la declaración JSON en el primer paso.

<?php
/**
 * Banner Block Template.
 *
 * @param array $block The block settings and attributes.
 * @param string $content The block inner HTML (empty).
 * @param bool $is_preview True during backend preview render.
 * @param int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param array $context The context provided to the block by the post or it's parent block.
 */


$title = get_field('title') ?: '';
$description = get_field('description') ?: '';
$image = get_field('image') ?: 0;
$linkData = get_field('link');
$link = '';

$image = $image ?
    wp_get_attachment_image($image, 'full', false, [
        'class' => 'banner__image',
    ]) :
    '';

if ($linkData) {
    // if the 'target' is presented, it's a bool. We've to convert it into the HTML format
    $target = isset($linkData['target']) && $linkData['target'] ?
        '_blank' :
        '_self';
    // Each %s in the string will be replaced with the related argument
    $link = sprintf(
        "<a class='banner__link' href='%s' target='%s'>%s</a>",
        esc_url($linkData['url']),
        esc_html($target),
        esc_attr($linkData['title'])
    );
}

?>
<div class="banner">
    <p class="banner__title"><?php
        echo esc_html($title); ?></p>

    <?php
    echo $image; ?>

    <div class="banner__description"><?php
        echo esc_html($description); ?></div>
    
    <?php
    echo $link ?>
</div>

Este fue el último paso, ahora puede abrir el editor de Gutenberg, encontrar el nuevo bloque en su biblioteca y añadirlo en el lugar de destino. A continuación, rellene los campos y pulse el botón "Actualizar" para guardar la página.

Visita la página para ver el resultado.

Para obtener información adicional, vea el vídeo que figura a continuación y lea el artículo oficial de la ACF.

Los Bloques ACF, que forman parte del plugin Advanced Custom Fields, le permiten ampliar la funcionalidad de su sitio web WordPress mediante la creación de bloques de contenido personalizados adaptados a sus necesidades. Ofrecen flexibilidad y facilidad de uso, eliminando la complejidad del desarrollo en React.

Entender cómo funcionan los bloques ACF entre bastidores es crucial para los desarrolladores, ya que almacenan datos dentro del post_content, lo que se traduce en tiempos de carga de página más rápidos. Puede aprovechar el plugin ACF Views para crear Bloques ACF sin esfuerzo y sin necesidad de codificación extensa o utilizar el enfoque de código manual.

Tanto si es un desarrollador profesional como un entusiasta de WordPress, los Bloques ACF elevan su creación de contenidos y ofrecen una experiencia web atractiva. Libere todo el potencial de su sitio WordPress con los Bloques ACF hoy mismo.