Una web más dinámica con la API de interactividad de WordPress
La nueva API de interactividad de WordPress ofrece una forma estandarizada para que los desarrolladores puedan crear elementos dinámicos e interactivos en sus webs.
Una experiencia web atractiva e interactiva es una forma sencilla de sorprender y enamorar a lectores y usuarios. Algunos aspectos interactivos dinámicos como la búsqueda instantánea, la gestión de los formularios y la navegación de tipo «aplicación» (en la que hay elementos que persisten sin tener que volver a cargar la página) pueden hacer que una web sea más eficiente y más interesante para todos.
Pero crear este tipo de experiencias en WordPress no siempre ha sido fácil, ya que muchas veces se requiere la configuración y el mantenimiento de un complejo framework de JavaScript.
Pero ahora, con la API de interactividad, los desarrolladores de WordPress tienen a su disposición una forma estandarizada para hacerlo directamente desde el núcleo de WordPress.
La API de interactividad empezó como un plugin experimental a principios de 2022, fue propuesto oficialmente en marzo de 2023 y se incluyó en el núcleo de WordPress en la versión 6.5 el 2 de abril de 2024. Ofrece un método estandarizado y sencillo para que los desarrolladores de WordPress puedan crear experiencias de usuario complejas e interactivas en el front-end con bloques.
La API de interactividad y el bloque Imagen para principiantes
Varios bloques de núcleo de WordPress, como Lista de contenidos, Imagen o Búsqueda, ya han adoptado la API de interactividad. De hecho, el bloque Imagen es una buena forma de mostrar cómo funciona.
En esencia, el bloque Imagen te permite añadir una imagen a una página o entrada. Cuando un usuario hace clic en la imagen, la API de interactividad genera una versión en alta resolución de la imagen.
El servidor es el que se encarga de procesar el bloque Imagen. La interactividad de la parte del cliente, como el cambio de tamaño y la caja de luz, se hace con la nueva API incluida en WordPress. Puedes vincular la interactividad de la parte del cliente añadiendo la directiva wp-on--click al elemento de la imagen, haciendo referencia a la acción showLightbox en view.js.
Puede que te estés pensando «¡Esto se puede hacer fácilmente con JavaScript!». Con la API de interactividad, el código es compacto y declarativo, y tienes el contexto (local state) para gestionar la caja de luz, el cambio de tamaño, los efectos y todo lo demás en el objeto store.
actions: {
showLightbox() {
const ctx = getContext();
// Bails out if the image has not loaded yet.
if ( ! ctx.imageRef?.complete ) {
return;
}
// Stores the positons of the scroll to fix it until the overlay is
// closed.
state.scrollTopReset = document.documentElement.scrollTop;
state.scrollLeftReset = document.documentElement.scrollLeft;
// Moves the information of the expaned image to the state.
ctx.currentSrc = ctx.imageRef.currentSrc;
imageRef = ctx.imageRef;
buttonRef = ctx.buttonRef;
state.currentImage = ctx;
state.overlayEnabled = true;
// Computes the styles of the overlay for the animation.
callbacks.setOverlayStyles();
},
...
Los detalles de implementación de bajo nivel, como mantener la sincronización entre el servidor y el cliente, funcionan: los desarrolladores ya no tendrán que pensar en ellos.
Esta funcionalidad es posible en JavaScript básico seleccionando el elemento con el selector de query, leyendo los atributos de datos y manipulando el DOM. Pero es mucho menos elegante, y, hasta ahora, no había una forma estándar de gestionar eventos interactivos como estos en WordPress.
Con la API de interactividad, los desarrolladores tienen a su disposición una forma predecible de proporcionar interactividad a los usuarios en el front-end. Deja de preocuparte por el código de bajo nivel para añadir interactivdad: desde hoy lo tienes disponible en WordPress. Pilas incluidas.
¿En qué se diferencia la API de interactividad de Alpine, React o Vue?
Antes de integrar la API de interactividad en el núcleo de WordPress, los desarrolladores solían utilizar un framework de JavaScript para añadir funciones dinámicas en sus webs en las secciones dirigidas a los usuarios. Este método funcionaba bien, así que, ¿de dónde viene la necesidad de estandarizarlo?
En esencia, la API de interactividad es una biblioteca ligera de JavaScript que estandariza la manera en que los desarrolladores pueden crear elementos HTML interactivos en los sitios de WordPress.
Mario Santos, un desarrollador del equipo del núcleo de WordPress, comentaba en la propuesta de la API de interactividad: «Con una forma estandarizada, WordPress puede encargarse de la máxima cantidad de complejidad en lugar del desarrollador, porque puede gestionar la mayor parte de lo necesario para crear un bloque interactivo».
El equipo notó que el vacío entre lo posible y lo práctico crecía a medida que las webs son más complejas. A más compleja sea la experiencia de usuario que quiera crear un desarrollador, más bloques deben interactuar entre sí, y se hace más complicado crear y mantener los sitios. Los desarrolladores deben dedicar mucho tiempo a comprobar que el código del lado del cliente y del servidor funcionan bien juntos.
En un proyecto de código abierto grande y con muchos colaboradores, tener un estándar aceptado por todos y una forma nativa de proporcionar interactividad para el usuario acelera el desarrollo y mejora en gran medida la experiencia del desarrollador.
Las decisiones del equipo de desarrollo que creó la API tomaron forma en cinco objetivos:
- Preferencia a los bloques y al PHP: Priorizar los bloques para crear los sitios y el renderizado del servidor para mejorar el SEO y el rendimiento. Combinar las mejores opciones tanto para la experiencia de usuario como para la del desarrollador.
- Compatibilidad con versiones anteriores: Garantizar la compatibilidad tanto en los temas clásicos como en los de bloques, y, a poder ser, en otros frameworks de JavaScript, aunque es preferible utilizar la API como método principal. También funciona con hooks e internacionalización.
- Declarativo y reactivo: Utilizar código declarativo para definir la interacciones, estar pendientes de cambios en los datos y actualizar solamente las partes necesarias del DOM.
- Con buen rendimiento: Optimizar el rendimiento del tiempo de actividad para ofrecer una experiencia de usuario rápida y ligera.
- Usar menos JavaScript: Reducir la cantidad de JavaScript que se utiliza en la página proporcionando un framework común que los bloques puedan reutilizar. De forma que a más puedan acudir los bloques a la API de interactividad, menos JavaScript habrá que enviar, por lo general.
Hay más objetivos en el horizonte, como añadir mejoras a la navegación del lado del cliente (puedes verlo aquí).
La API de interactividad vs. Alpine
La API de interactividad tiene algunas similitudes con Alpine, una biblioteca de JavaScript que permite a los desarrolladores crear interacciones en sus proyectos web, y que a veces se utiliza en proyectos de WordPress y Laravel.
De forma parecida a Alpine, la API de interactividad utiliza directivas directamente en HTML y los dos funcionan bien con PHP. Pero a diferencia de Alpine, la API de interactividad está diseñada para integrarse a la perfección con WordPress y ayudar al servidor a renderizar sus directivas.
Con la API de interactividad puedes generar fácilmente una visualización desde el servidor en PHP y añadir la interactividad del usuario. Esto genera menos duplicidad, y, al estar integrado en el núcleo de WordPress, los desarrolladores tendrán que tomar menos decisiones sobre la arquitectura.
Así que, aunque Alpine y la API de interactividad comparten un objetivo similar (que los desarrolladores web puedan incluir elementos interactivos en una página web de forma sencilla), la API de interactividad es incluso más fácil de utilizar.
La API de interactividad vs. React y Vue
Muchos desarrolladores prefieren React para añadir interactividad en sitios de WordPress, ya que, en el desarrollo web moderno, React es la opción favorita para gestionar la interactividad DOM de forma declarativa. Es un terreno conocido, y estamos acostumbrados a utilizar React y JSX para añadir bloques personalizados en Gutenberg.
Es posible utilizar React en el cliente, pero hay que tomar muchas decisiones: «¿Cómo establezco las rutas?». «¿Qué hago con el contexto entre PHP y React?». «¿Y el renderizado del servidor?».
Parte del objetivo de desarrollar la API de interactividad fue la necesidad de escribir la menor cantidad posible de JavaScript: dejando que PHP se ocupe del trabajo duro y solo utilizando JavaScript cuando fuera estrictamente necesario.
El equipo también vio algunos errores en la manera en que esos frameworks funcionaban con WordPress. Los desarrolladores utilizan frameworks de JavaScript como React y Vue para renderizar bloques en el front-end que han sido renderizados en el servidor en PHP, por ejemplo. Pero esto genera muchas duplicidades y existe el riesgo de exponerse a otros problemas con hooks de WordPress.
Por todas estas razones, y algunas más, el equipo prefirió Preact, un framework de interfaz de usuario más pequeño que requiere menos JavaScript al descargarse y se ejecuta sin sacrificar el rendimiento. Sería como un React bajo en calorías.
Luis Herranz, un colaborador del núcleo de WordPress de Automattic, señala más detalles interesantes sobre Alpine vs. el uso de Preact en la API de interactividad con algunas directivas en este comentario de la propuesta original.
Preact solo se carga si la página fuente contiene un bloque interactivo, de forma que solo carga cuando es necesario, lo que se alinea a la perfección con la idea de utilizar la menor cantidad de JavaScript posible (o, por defecto, nada).
En la propuesta original de la API de interactividad puedes ver un resumen y una comparativa de diferentes frameworks y las razones por las que se eligió Preact.
¿Qué aporta la nueva API de interactividad a los desarrolladores de WordPress?
Además de proporcionar una forma estándar de renderizar elementos interactivos en el cliente, la API de interactividad también ofrece a los desarrolladores directivas y una manera más sencilla de crear un objeto store para gestionar el estado, los efectos y las acciones.
Directivas
Las directivas son un conjunto especial de atributos de datos y te permite ampliar el marcado de HTML. Puedes compartir datos entre los bloques que renderiza el servidor y los del cliente, combinar valores, añadir eventos de clic y mucho más. La lista de referencias de la API de interactividad enumera todas las directivas disponibles.
Estas directivas normalmente se añaden en el archivo render.php del bloque, y son compatibles con todas las API de WordPress, incluyendo las API de acciones, filtros y traducciones.
Este es el archivo de renderizado de un bloque de ejemplo. Fíjate en el evento de clic (data-wp-on--click="actions.toggle") y la manera en que hemos combinado los valores de los atributos de aria expandido a través de las directivas.
<div
<?php echo get_block_wrapper_attributes(); ?>
data-wp-interactive="create-block"
<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false ) ); ?>
data-wp-watch="callbacks.logIsOpen"
>
<button
data-wp-on--click="actions.toggle"
data-wp-bind--aria-expanded="context.isOpen"
aria-controls="<?php echo esc_attr( $unique_id ); ?>"
>
<?php esc_html_e( 'Toggle', 'my-interactive-block' ); ?>
</button>
<p
id="<?php echo esc_attr( $unique_id ); ?>"
data-wp-bind--hidden="!context.isOpen"
>
<?php
esc_html_e( 'My Interactive Block - hello from an interactive block!', 'my-interactive-block' );
?>
</p>
</div>
¿Es necesario actualizar dinámicamente el texto interno de un elemento? La API de interactividad te permite utilizar data-wp-text en un elemento de la misma forma que utilizas v-text en Vue.
Puedes combinar un valor a un booleano lógico o cadena utilizando wp-bind– o añadir un evento de clic con data-wp-on–click en el elemento. Esto significa que puedes escribir PHP y HTML y decorarlo con algunas directivas para añadir interactividad de forma declarativa.
Gestionar el estado, los efectos y las acciones
La segunda parte de a la hora de añadir interactividad es crear un store, que se suele ubicar en el archivo view.js. En el store tienes acceso al mismo contexto que en el archivo render.php.
En el objeto store, defines las acciones que responden a las interacciones del usuario. Estas acciones pueden actualizar el contexto local o el estado global, por lo que vuelve a renderizar y actualizar el elemento HTML conectado. También puedes definir efectos o callbacks, que son similares a las acciones, pero responden a cambios de estado en lugar de a acciones directas del usuario.
import { store, getContext } from '@wordpress/interactivity';
store( 'create-block', {
actions: {
toggle: () => {
const context = getContext();
context.isOpen = ! context.isOpen;
},
},
callbacks: {
logIsOpen: () => {
const { isOpen } = getContext();
// Log the value of `isOpen` each time it changes.
console.log( `Is open: ${ isOpen }` );
},
},
} );
Pruébalo tú mismo
¡La API de interactividad está lista para producción y ya funciona en WordPress.com! Tendrás acceso a los bloques sobre los que se funda la API de interactividad con cualquier plan de WordPress.com.
Si quieres crear tus propios bloques interactivos, puedes utilizar el siguiente código como esqueleto de un bloque interactivo en tu terminal:
npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template
Te servirá de ejemplo de un bloque interactivo, con las directivas y la gestión de estados ya configurados.
Después, puedes experimentar con él de forma local con wp-env, un sitio de pruebas o subiendo el plugin directamente a tu sitio con un plan de WordPress.com compatible con plugins.
Si buscas una experiencia fluida entre tu entorno local y tu sitio de WordPress.com, ¡prueba la nueva funcionalidad de despliegues de GitHub! Desarrollar bloques personalizados es el ejemplo perfecto para utilizar esta nueva herramienta.
La mejor forma de aprender algo nuevo es empezar a crear. Estos recursos pueden servirte de ayuda para despegar (en inglés):
- Un primer vistazo a la API de interactividad
- Demostración de la API de interactividad en WP Movies y vídeo de demostración
- Lista de mejoras para el futuro de la API de interactividad
- Lista de referencias del editor de bloques
- Propuesta: API de interactividad
- Issue de GitHub de la presentación
- 25/04/2024
- Herramientas para desarrolladores, WordPress
WordPress.com en Español 
Muy interesante