Una guía para principiantes sobre la API de interactividad de WordPress.

Por:


La API de Interactividad de WordPress está diseñada para cerrar la brecha entre el backend y el frontend, proporcionando una forma estándar de crear contenido interactivo en tu sitio de WordPress. Con esta API, los desarrolladores pueden agregar fácilmente funciones dinámicas a sus bloques sin depender de múltiples bibliotecas externas o configuraciones complejas.

En esta guía, cubriré la API de Interactividad, sus beneficios y cómo usarla. También proporcionaré algunos ejemplos de código. Al final de esta guía, tendrás un sólido entendimiento de cómo aprovechar la API de Interactividad para hacer que tu sitio de WordPress sea más dinámico y amigable para el usuario.

¿Qué es la API de Interactividad de WordPress?

La API de Interactividad permite a los desarrolladores crear comportamientos interactivos dentro de sus bloques o incluso entre diferentes conjuntos de bloques sin depender de bibliotecas de terceros o usar frameworks como React o Vue en el frontend. Esto significa que incluso con Temas de Bloques, los usuarios pueden lograr una experiencia de usuario interactiva sin sacrificar la representación del lado del servidor PHP por la que WordPress es conocido. En lugar de necesitar un tiempo de ejecución de JavaScript, los desarrolladores pueden mantener el rendimiento y la confiabilidad de sus sitios mientras agregan funciones dinámicas y atractivas.

La API de Interactividad utiliza directivas, que son atributos especiales de HTML, para agregar interactividad frontend a los bloques. Estas directivas le dicen a la API que agregue comportamientos específicos a los elementos del DOM o los transforme, similar a Alpine.js pero específicamente diseñado para WordPress. Este enfoque se integra perfectamente con los ganchos de WordPress y la representación del lado del servidor PHP, asegurando que las funciones interactivas sean consistentes y eficientes sin duplicar la lógica o introducir errores relacionados con discrepancias entre el servidor y el cliente. Esto hace que la API de Interactividad sea una herramienta poderosa para crear bloques de WordPress dinámicos e interactivos.

Por supuesto, puedes crear experiencias interactivas sin la API de Interactividad, pero la API tiene como objetivo proporcionar una forma estándar de admitir esas interacciones. Al usar JavaScript o un framework de tu elección, la gestión de interacciones puede volverse cada vez más difícil a medida que crecen en complejidad. La API de Interactividad simplifica este proceso, ofreciendo un enfoque consistente y sencillo para construir funciones dinámicas, lo que facilita manejar interacciones complejas sin problemas.

¿Necesitas aprender otro lenguaje?

No, no necesitas aprender otro lenguaje para usar la API de Interactividad. La API está diseñada para ser fácil de usar e integrarse perfectamente con el entorno de desarrollo de WordPress existente. Utiliza tecnologías web familiares como HTML y JavaScript, lo que la hace accesible para desarrolladores que ya estén cómodos con estos lenguajes.

¿Qué hay de la experiencia del editor de bloques?

Esta API es solo para el frontend, pero eso realmente no es una limitación, ya que tus bloques en el editor ya tienen acceso a React a través del Editor de Bloques.

¿Funciona con la representación del lado del servidor?

Sí, funciona con bloques de representación del lado del servidor y bloques estáticos, todo gracias al uso genial de directivas.

¿Qué son las directivas?

Las directivas son atributos especiales de HTML que agregan comportamientos o transformaciones específicas a los elementos de una página web. Por ejemplo:

div
  data-wp-interactive='{ "namespace": "wpmovies" }'
  data-wp-context='{ "isOpen": false }'
  data-wp-watch="callbacks.logIsOpen"
>
  button
    data-wp-on--click="actions.toggle"
    data-wp-bind--aria-expanded="context.isOpen"
    aria-controls="p-1"
  >
    Toggle
  button>
 
  p id="p-1" data-wp-show="context.isOpen">
    Este elemento ahora es visible!
  p>
div>Code language: HTML, XML (xml)

En este ejemplo, las directivas como data-wp-interactive, data-wp-context, data-wp-on--click, y data-wp-show administran datos y comportamientos, haciendo el contenido interactivo sin necesidad de escribir JavaScript extenso.

¿Hay un ejemplo de cómo se ve un sitio web construido con Interactivity API?

Sí, y uno muy elegante. Para mostrar la API, el Equipo Principal de WordPress creó el sitio web wpmovies.dev. Si no estabas emocionado hasta ahora, estarás emocionado después de ver la demostración de wpmovies. Desarrollar algo como esto con un Tema de Bloques habría sido muy complicado con bibliotecas de JS tradicionales.

Creando un Bloque Interactivo

Crear un Bloque Interactivo no es diferente a hacer cualquier otro bloque para el Editor de Bloques. Puedes añadir soporte para la API de Interactividad a cualquier bloque.

Una cosa a tener en cuenta es que la API de Interactividad solo está disponible si usas WordPress 6.5 o superior. Si no, debes usar la última versión del plugin de Gutenberg.

Configurando el proceso de compilación

En este artículo, asumo que usas wp-scripts para el desarrollo de bloques (si no lo haces, ¿por qué no?). Puedes declarar que tu bloque admite la API de Interactividad modificando el parámetro de soporte de tu archivo block.json:

"supports": {
    "interactivity": true
},Code language: JavaScript (javascript)

Si tu bloque también usa JavaScript para la interactividad, entonces debes definir el módulo viewScriptModule en tu archivo block.json:

{
   ...
   "viewScriptModule": "file:./view.js"
}Code language: JavaScript (javascript)

Por último, también debes usar el flag experimental-module en tu script de compilación para aprovechar las últimas características:

{
    "scripts": {
        ...
        "build": "wp-scripts build --experimental-modules",
        "start": "wp-scripts start --experimental-modules"
    }Code language: JavaScript (javascript)

Eso es todo para configurar tu proceso de compilación. Pero si estás creando un nuevo bloque, puedes usar el método de andamiaje para crear un punto de partida para un desarrollo adicional de manera rápida.

Andamiaje utilizando create-block

Otra forma rápida de crear un bloque interactivo es usar el script create-block para generar uno. Puedes usar el siguiente comando en tu terminal para hacerlo:

npx @wordpress/create-block@latest block-name --template @wordpress/create-block-interactive-templateCode language: CSS (css)

Es una excelente manera de crear un nuevo bloque o experimentar.

Directivas y almacenamiento

Los bloques interactivos en WordPress tienen dos partes principales. La primera parte implica definir directivas en el archivo save.js (o render.php si se usa la representación del lado del servidor). Estas directivas hacen que el código sea declarativo al especificar comportamientos directamente en HTML.

La segunda parte es el archivo view.js, donde se define el almacén. Este almacén gestiona el estado, las acciones y las devoluciones de llamada, asegurando que los comportamientos interactivos funcionen como se espera.

Para un ejemplo sencillo, aquí está nuestro archivo render.php:

Code language: PHP 

Fuente

Compartir:

Entradas relacionadas