Mostrar datos personalizados en el editor de bloques de WordPress no siempre ha sido un proceso sencillo. Era necesario crear un bloque personalizado para obtener datos de campos personalizados o de otras fuentes.

Eso es mucho trabajo y a menudo está fuera del alcance de algunos desarrolladores. En algunos casos, también significa crear una funcionalidad duplicada. Por ejemplo, considera la posibilidad de mostrar los datos de un campo personalizado en un encabezado de texto. ¿No debería ser esto posible sin construir un bloque completamente nuevo?

Por fin es posible. La llegada de la API Block Bindings en WordPress 6.5 proporciona una solución nativa. Te permite vincular una fuente de datos a una selección de bloques básicos de WordPress, permitiéndote crear sitios web dinámicos en menos tiempo. También aporta un nuevo nivel de funcionalidad a los temas de bloques.

Este artículo te presenta la API Block Bindings, te muestra cómo funciona con una sencilla demostración y explora lo que te depara el futuro a medida que evoluciona la API.

Por qué la API Block Bindings es una herramienta que cambia las reglas del juego

Los campos personalizados forman parte del core de WordPress desde hace años. Aportan datos dinámicos a las entradas estáticas y ofrecen a los desarrolladores más opciones de personalización. Sin embargo, el proceso para utilizarlos es engorroso.

Tienes que utilizar la función register_meta() o instalar un plugin para registrar y configurar nuevos campos. Ese es sólo el primer paso. Mostrar estos datos en tu sitio web es otro reto.

Todos los datos de los campos personalizados de una entrada se guardan como meta de la entrada. Sin embargo, no había una forma directa de mostrar los resultados. Hacerlo requería un plugin y/o añadir código a tu tema. Esto no sólo es más difícil para los desarrolladores, sino que también supone otra carga técnica que gestionar.

La introducción del Editor de Bloques y de los temas de bloques no ayudó. Los datos de los campos personalizados no podían mostrarse en ninguno de los bloques principales incluidos en WordPress, y las mismas limitaciones se aplicaban a los temas de bloques. Esta puede ser una razón importante por la que algunos desarrolladores se han quedado con el Editor clásico y/o los temas clásicos.

La API Block Bindings aporta esta funcionalidad a WordPress. Por fin no necesitas plugins que te ayuden a mostrar datos. Vincula una fuente de datos a bloques específicos como Botón, Encabezado, Imagen y Párrafo, abriendo un nuevo mundo de opciones de personalización para los temas de bloques y el Editor de Bloques.

No duplica completamente las capacidades de escribir PHP o utilizar un plugin de campo personalizado. Sin embargo, es un paso en la dirección correcta. Y en algunos casos puede ser lo único que necesites.

Un caso sencillo de uso de la API Block Bindings

¿Cómo funciona la API Block Bindings en el mundo real? Hemos preparado un ejemplo sencillo de cómo puede ser útil.

Antes de entrar en materia, aquí tienes un esquema de nuestro proyecto:

  • Instala la última versión de WordPress y utiliza el tema predeterminado Twenty Twenty-Four.
  • Registra algunos campos personalizados:
    • Cita: Una cita célebre que queremos destacar en cada página, vinculada a un bloque Párrafo.
    • Foto: La URL de una foto diferente para cada página, vinculada a un bloque Imagen.
  • Por último, edita la plantilla de página del tema y añade bloques que obtengan los valores de estos campos personalizados.

Ahora que tenemos nuestro plan, pongamos en acción la API Block Bindings de WordPress.

Habilitar los campos personalizados en el editor de bloques

WordPress oculta los campos personalizados por defecto, así que el primer paso es habilitarlos en el Editor de Bloques.

Para activar los campos personalizados, abre el menú Opciones (icono ⋮) en el Editor de Bloques. A continuación, haz clic en Preferencias.

A continuación, haz clic en el conmutador Campos personalizados para mostrarlos en el editor. Haz clic en el botón Mostrar y volver a cargar la página para guardar los cambios.

Activando los campos personalizados en el Editor de Bloques
Activando los campos personalizados en el Editor de Bloques

Registrar los campos personalizados

Para registrar nuestros campos personalizados, abre el archivo functions.php del tema. A continuación, añade el siguiente código:

// Register custom fields for pages in WordPress using register_meta()
function kinsta_register_custom_meta_fields_for_pages() {
     // Register the text field "kinsta_famous_quote" for pages
     register_meta('post', 'kinsta_famous_quote', array(
          'type' => 'string',  // Text field
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'wp_strip_all_tags',  // Sanitize the input
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     )); 

// Register the image field "kinsta_photo" for pages
    register_meta('post', 'kinsta_photo', array(
          'type' => 'string',  // Can store the URL or attachment ID as a string
          'single' => true,    // Single value for the field
          'sanitize_callback' => 'esc_url_raw',  // Sanitize the input as a URL
          'show_in_rest' => true,  // Expose this field in the REST API for Gutenberg
     ));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');

Fíjate en el slug de cada campo, ya que los necesitaremos en el siguiente paso:

  • kinsta_famous_quote
  • kinsta_photo

Puedes personalizar más estos campos siguiendo la documentación register_meta() de WordPress

También debemos tener en cuenta que puedes registrar estos campos mediante un plugin personalizado. La ventaja es que los campos seguirán funcionando — aunque cambies de tema.

Añadir valores de campo personalizados a una página

A continuación, añade valores de campo personalizados a una página siguiendo estos pasos:

  1. Ve a Páginas > Todas las Páginas y selecciona la página que desees.
  2. Desplázate hasta la parte inferior de la página y encuentra el panel Campos Personalizados. Haz clic en el botón Introducir nuevo situado debajo del primer campo. Añade kinsta_famous_quote en la columna de la izquierda. A continuación, añade el contenido de nuestra cita a la derecha: El futuro pertenece a quienes creen en la belleza de sus sueños. – Eleanor Roosevelt
  3. A continuación, haz clic en el botón Añadir Campo Personalizado para añadir el campo kinsta_photo. Añade a la derecha la URL de la imagen que queremos utilizar.
Valores de campo personalizados en el Editor de Bloques de WordPress
Añadir campos personalizados al Editor de Bloques de WordPress

Ahora podemos guardar la página y repetir este proceso para las demás páginas de nuestro sitio.

Vincular los datos de los campos personalizados a los bloques

Queremos mostrar nuestros datos en las páginas, así que tenemos que editar la plantilla de página de nuestro tema en el Editor de Sitios. Para ello

Ve a Apariencia > Editor y haz clic en el enlace Plantillas de la columna izquierda. Busca la plantilla Páginas y haz clic para abrirla en el editor.

Las plantillas disponibles en el Editor de Sitios de WordPress
Encuentra la plantilla Páginas en el Editor de Sitios de WordPress

En primer lugar, tenemos que elegir un lugar para mostrar los datos de nuestro campo personalizado. Vamos a añadir un área en la parte inferior de cada página.

Añadiremos un bloque Grupo e insertaremos un bloque Columnas dentro de él. La columna izquierda contiene un bloque Imagen (para mostrar nuestra foto), mientras que la derecha presenta un bloque Párrafo (para mostrar nuestra cita).

Renombramos nuestro bloque Grupo a Datos de Campo Personalizados para futuras referencias. Así será más fácil encontrarlo si queremos volver a editarlo más adelante.

Editar la plantilla Páginas en el Editor de Sitios de WordPress
Añadiendo bloques que mostrarán nuestros datos de campo personalizados

La API Block Bindings aún no dispone de una interfaz visual para mostrar valores (más información al respecto más adelante). Así que tenemos que editar el código de nuestros bloques Imagen y Párrafo. Esto nos permite vincularles datos personalizados.

Haz clic en el menú Opciones (icono ⋮) de la parte superior derecha del Editor de Sitios. Selecciona el enlace Editor de código. Se abrirá el editor de código.

Busca el bloque Grupo que acabamos de añadir. El código empieza por:

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

También hemos resaltado el código correspondiente en la imagen de abajo:

Viendo nuestro bloque Grupo en el Editor de Código
Viendo nuestro bloque Grupo en el Editor de Código

A continuación, localiza los bloques Imagen y Párrafo dentro de este grupo. Su código por defecto es el siguiente:

Imagen:

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

Párrafo:

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

Podemos editar estos bloques para vincularlos a nuestros campos personalizados:

Imagen:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"kinsta_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

Observa que el valor key está fijado a nuestro campo personalizado kinsta_photo.

Párrafo:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"kinsta_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

En este caso, el valor key se establece en nuestro campo personalizado kinsta_famous_quote.

Guarda los cambios y sal del Editor de Código.

Haz clic en los bloques Imagen y Párrafo. WordPress contornea cada bloque en morado para indicar que está vinculado a una fuente de datos. Además, el panel derecho mostrará un área de Atributos con más detalles.

Un bloque Imagen está vinculado a una fuente de datos
WordPress indica que el bloque Imagen está vinculado a una fuente de datos
Un bloque Párrafo está vinculado a una fuente de datos
Nuestro bloque Párrafo también está vinculado a una fuente de datos

Nota: No verás estos bloques al editar las páginas. Sin embargo, se muestran en la interfaz de tu sitio web.

El último paso es visitar el front-end del sitio web. Deberíamos ver nuestra imagen y nuestra cita en todas las páginas que tengan valores de campo personalizados.

Datos de campos personalizados de WordPress mostrados en una página
Los datos de nuestro campo personalizado se muestran en la parte inferior de la página

Otras posibilidades para binding blocks

Hemos creado un ejemplo básico de vinculación de bloques a una fuente de datos. Sin embargo, hay algunas formas adicionales en las que podríamos mejorar nuestro proyecto, como por ejemplo

  • Añadir Atributos ALT: Podríamos registrar otro campo personalizado que defina atributos ALT en nuestras fotos. Eso haría que la función fuera más accesible. Por ejemplo, podríamos vincular un nuevo campo, kinsta_photo_alt, al atributo alt de la siguiente manera: 
    <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->
  • Utiliza una fuente de datos personalizada: Los campos personalizados funcionan bien para nuestros fines. Sin embargo, podríamos haber optado por obtener los datos de una fuente personalizada. Las posibilidades incluyen APIs, tablas de bases de datos personalizadas, opciones de plugins/temas, datos del sitio y taxonomías.

La idea es pensar cómo quieres incluir datos personalizados en tu sitio. A partir de ahí, crea un plan para implementarlo de forma que sea fácil de mantener. La API Block Bindings ofrece muchas opciones para hacerlo.

Ir más allá con la API Block Bindings

La API Block Bindings no es un producto acabado. Sigue evolucionando con cada nueva versión de WordPress.

Por ejemplo, está previsto incluir varias mejoras en WordPress 6.7:

  • Una interfaz de usuario predeterminada para vincular bloques a las fuentes de datos disponibles.
  • Metaetiquetas de post para facilitar la identificación.
  • Compatibilidad con plantillas de temas de tipo post personalizadas.
  • Permisos predeterminados para determinar quién puede editar las vinculaciones de bloques.
  • Varias mejoras técnicas internas.

Sigue atento a las nuevas funciones que harán que la API sea más fácil de usar y más potente.

También puedes instalar el plugin Gutenberg para obtener acceso anticipado a las funciones antes de que se incorporen al core de WordPress. Te recomendamos que lo utilices en un entorno local o staging.

Todos los clientes de Kinsta tienen acceso a un entorno staging para realizar pruebas y también pueden añadir funcionalidades premium.

Y todos pueden utilizar nuestra suite de desarrollo local gratuita DevKinsta para WordPress. Crea nuevos sitios con un solo clic y desarrolla desde tu máquina local.

Resumen

La API Block Bindings representa un cambio en la forma de trabajar con datos personalizados en WordPress. En muchos casos sustituye la necesidad de plugins o bloques personalizados. Y aporta más flexibilidad a los bloques de WordPress y a los temas de bloques.

Añadirla a tu flujo de trabajo puede reducir tu tiempo de desarrollo. Como función nativa, también puede mejorar el rendimiento en comparación con depender de plugins.

Ésas son algunas de las grandes razones para empezar a utilizarlo hoy mismo. ¡Y el futuro se presenta aún más brillante!

Sólo hemos empezado a explorar las posibilidades abordadas en este artículo. Sumérgete más en la API Block Bindings explorando más sobre la conexión de campos personalizados, trabajar con fuentes de vinculación personalizadas y aprender a obtener y establecer valores de Block Bindings en el editor.

Eric Karkovack

Eric Karkovack is a freelance web developer and writer with over 25 years of experience. He loves helping others learn about WordPress, freelancing, and technology.