Cómo utilizar ACF para crear un nuevo bloque de WordPress

Share to social media
Cómo utilizar ACF para crear un nuevo bloque de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.
Cómo utilizar ACF para crear un nuevo bloque de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

Como se puede observar en la imagen anterior, debajo del título de un post, se muestra el enlace a la publicación en inglés. Este mensaje solo aparece si existe la versión del post en nuestro blog en inglés. Para implementar esta funcionalidad se puede emplear el plugin PHP Code Snippet. Esto significa que podemos crear un snippet PHP, asociado a un shortcode, con el fin de programar la salida del metadato que contiene el valor de la URL del post en inglés. Ese metadato del post en español se creó con ACF y este plugin incluye la función get_field() que se puede usar para cargar el valor de cualquier campo desde cualquier ubicación. Hay que tener en cuenta que cada tipo de campo devuelve diferentes formas de datos (cadena, int, matriz, etc.). Finalmente, solo hay que añadir un bloque de shortcode en aquél lugar donde se desee mostrar el valor del campo.

El snippet PHP bien podría ser algo parecido a lo siguiente:

<?php
    $url = get_field( 'in_english' );
    if( !empty( $url ) )
	  echo '<div style="text-align: center; background-color: #EBECED;">You can also read this post <a href="' . $url . '">In English</a></div>';
?>

Sin embargo, existe otra manera de implementarlo sin hacer uso del plugin PHP Code Snippet. Y es lo que vamos a ver en este post a continuación.

Cómo registrar un nuevo bloque

Lo primero que vamos a hacer es registrar un nuevo bloque. El propósito es utilizarlo en lugar del bloque de shortcode para mostrar directamente el valor del campo con la URL del post en inglés. La ventaja es aprovecharnos de que ACF PRO permite ligar tipos de contenido a bloques, con el fin de poder mostrar sus campos mediante la función get_field().

Otra ventaja es que podemos crear nuevos bloques de WordPress sin acudir a React, solamente codificando en PHP, HTML y CSS, tal y como se explica en Creación de bloques Gutenberg de WordPress personalizados con el complemento ACF PRO. Tal y como se describe en ese artículo, para registrar un bloque podemos hacerlo utilizando el archivo functions.php, asociar sus campos con ACF y luego codificar con PHP, HTML y CSS la salida de los mismos empleando get_field().

Sin embargo, los bloques también se pueden registrar a través de un archivo block.json, una nueva forma de definir bloques en el editor del sitio y una mejora con respecto al registro del lado del servidor. Registrarse a través de block.json facilita el uso de bloques en complementos y temas, lo que garantiza metadatos coherentes, lo que también puede mejorar el rendimiento del front-end. Más info aquí.

En ACF PRO 6.0, el archivo block.json se convirtió en la forma recomendada de registrar bloques, coincidiendo con los métodos de registro nativos de WordPress. Esto requiere WordPress 5.8+. Si tienes una versión anterior de ACF o WordPress, puedes continuar usando la función anterior: acf_register_block_type(), tal y como se explica aquí.

Así que un block.json para crear el bloque «English» podría ser parecido a lo siguiente:

{
    "name": "acf/english",
    "title": "URL in english",
    "description": "Show URL in english",
    "category": "theme",
    "icon": "sticky",
    "apiVersion": 2,
    "supports": {
        "jsx": true, 
        "alignText": false, 
        "color": false
    },
    "acf": {
        "mode": "edit",
        "renderTemplate": "english.php"
    }
}

Los bloques ACF PRO pueden usar la mayoría de las opciones «supports» que proporciona WordPress en el Editor de bloques. Pero para pasar esos valores a la plantilla hay que usar la variable $block. Aquí hay un ejemplo. Más info del registro de bloques usando block.json.

Aparte del nombre, el título, la descripción, la categoría y el icono del bloque, es importante la definición de «supports» y el renderTemplate o archivo que mostrará el bloque en el editor de WordPress. En el ejemplo, el archivo english.php. Ambos archivos block.json y english.php se tienen que ubicar dentro de la carpeta del tema en /blocks/english.

Para completar el registro, es preciso añadir lo siguiente al archivo functions.php:

add_action( 'init', 'frost_register_block_styles' );

add_action( 'init', 'register_acf_blocks' );
function register_acf_blocks() {
    register_block_type( __DIR__ . '/blocks/english' );
}

Cómo crear los campos del bloque

Para crear los campos del bloque, usaremos ACF. En el ejemplo que estamos siguiendo, se puede crear un grupo de campos personalizados denominado «English» con un campo que se puede llamar «In English» (ver imagen siguiente).

Cómo utilizar ACF para crear un nuevo bloque de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

La etiqueta a efectos de codificación es «in_english».

En este punto, conviene aclarar algo importante. Y es la manera de interactuar con el bloque dentro del editor. Hay dos posibles:

  1. Insertar el bloque para rellenar los campos del mismo. En este caso, el valor del campo no se rellenará a la hora de editar el post en español, sino en otro lugar. En ACF, habrá que configurar las «reglas de ubicación», dentro del apartado «Ajustes», seleccionando «Bloque» en el desplegable «Mostrar este grupo de campos si», «es igual a», y escogiendo el nombre del bloque dentro del otro desplegable.
  2. Insertar el bloque para visualizar los valores de los campos en una plantilla de archivo o individual. Esto está más de acuerdo al ejemplo que estamos siguiendo. El valor del metadato se rellena en el momento de editar el post en español y lo que se pretende es usar el bloque dentro de la plantilla del post individual. Para ello, en ACF, la regla de ubicacion que habrá que configurar en «Ajustes» es «Tipo de contenido» igual a «Entrada» o el tipo de dato que sea.

En nuestro caso como queremos visualizar el valor de la URL del post en inglés, elegiremos la opción 2.

Cómo mostrar los valores de los campos

Una vez registrado el nuevo bloque, los campos del mismo y la manera en que queremos que funcione el bloque (para rellenar datos o para mostrarlos), es hora de codificar el archivo renderTemplate. Es decir, en nuestro caso de ejemplo el archivo english.php.

Para mostrar el mensaje tal y como lo tenemos en Blogpocket, podríamos codificar lo siguiente:

<?php
/**
 * English Block Template.
 */
$url = get_field( 'in_english', get_the_ID() );
if( !empty( $url ) )
   echo '<div style="text-align: center; background-color: #EBECED;">You can also read this post <a href="' . $url . '">In English</a></div>';
?>

Obsérvese la diferencia entre este código y el del snippet PHP, correspondiente al plugin PHP Code Snippet. Simplemente, es necesario obtener el ID de la publicación a través de la función get_the_ID().

Ver un ejemplo más completo de visualización de campos aquí.

Vídeo explicativo

En este vídeo Delicious Brains, puedes ver los pasos que hemos visto.

Documentación oficial

Accede a la documentación oficial para más información.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de acambronero

Copia y pega esta URL (https://www.blogpocket.com/2023/05/16/como-utilizar-acf-para-crear-un-nuevo-bloque-de-wordpress/) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido