Crear experiencias de sitios web ricas, atractivas e interactivas es una manera fácil de sorprender, deleitar y captar la atención de los lectores y usuarios del sitio web. La interactividad dinámica, como la búsqueda instantánea, el manejo de formularios y la navegación del lado del cliente “similar a una aplicación”, donde los elementos pueden existir a través de rutas, todo sin recargar toda la página, pueden hacer de la web un lugar más eficiente y atractivo para todos.
Pero crear esas experiencias en WordPress no siempre fue lo más fácil ni lo más sencillo, y a menudo requirió marcos de JavaScript complejos para su configuración y mantenimiento.
Ahora, con la API de interactividad, los desarrolladores de WordPress tienen una forma estandarizada de hacer esto, todo integrado en el núcleo.
La API de interactividad comenzó como adición experimental a principios de 2022convertirse propuesta oficial en marzo de 2023y finalmente estaba fusionado con el núcleo de WordPress con el lanzamiento de WordPress 6.5 el 2 de abril de 2024. Proporciona una forma más sencilla y estandarizada para que los desarrolladores de WordPress creen experiencias de usuario ricas e interactivas con sus bloques de interfaz.
ELI5: API de interactividad e imagen de bloque
Varios bloques clave de WordPress, incluidos los bloques Query Loop, Image y Search, ya han adoptado la API de interactividad. El Imagen de bloqueen particular, es una excelente manera de mostrar la API de interactividad en acción.
En esencia, los bloques de imágenes le permiten agregar una imagen a una publicación o página. Cuando un usuario hace clic en una imagen en una publicación o página, API de interactividad impulsada por lightbox muestra una versión de alta resolución de la imagen.
La representación de bloques de imágenes se maneja en el lado del servidor. La interactividad del lado del cliente, el manejo del cambio de tamaño y la apertura de cajas de luz, ahora se realiza con una nueva API que viene incluida con WordPress. Puede conectar la interactividad del lado del cliente simplemente agregando wp-on--click directive al elemento de imagen, refiriéndose a showLightbox acción en view.js.
Podrías decir: “¡Pero podría hacer esto fácilmente con un poco de JavaScript!”. Con la API de interactividad, el código es compacto y declarativo, y obtienes un contexto (estado local) para manejar el lightboxing, el cambio de tamaño, los efectos secundarios y todo el resto del trabajo que necesitas. aquí en el edificio de la tienda.
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 nivel inferior, como mantener sincronizados el lado del servidor y el lado del cliente, simplemente funcionan; los desarrolladores ya no tienen que rendir cuentas de ellos.
Esta funcionalidad es posible utilizando JavaScript básico, seleccionando un elemento mediante un selector de consultas, leyendo atributos de datos y manipulando el DOM. Pero es mucho menos elegante y hasta ahora no ha habido una forma estandarizada de manejar eventos interactivos como estos en WordPress.
Con la API de interactividad, los desarrolladores tienen una forma predecible de proporcionar interactividad a los usuarios en el front-end. No necesita preocuparse por el código de bajo nivel para agregar interactividad; existe en WordPress para que empieces a usarlo hoy. Baterías son en.
¿En qué se diferencia la API de interactividad de Alpine, React o Vue?
Antes de integrar la API de interactividad con el núcleo de WordPress, los desarrolladores normalmente recurrían al marco de JavaScript para agregar funciones dinámicas a las partes de sus sitios web orientadas al usuario. Este enfoque funcionó bien, entonces ¿por qué era necesario estandarizarlo?
En esencia, Interactivity API es una biblioteca JavaScript liviana que estandariza cómo los desarrolladores pueden crear elementos HTML interactivos en páginas de WordPress.
Mario Santos, desarrollador del equipo central de WordPress, escribió en la propuesta de API de interactividad sí, “Con el estándar, WordPress puede absorber la máxima complejidad de los desarrolladores porque manejará la mayor parte de lo que se necesita para crear un bloque interactivo”.
El equipo vio que la brecha entre lo posible y lo práctico crecía a medida que los sitios se volvían más complejos. Cuanto más compleja era la experiencia de usuario que querían crear los desarrolladores, más bloques necesitaban para interactuar entre sí y más difícil resultaba crear y mantener sitios web. Los desarrolladores dedicarían mucho tiempo a asegurarse de que el código del lado del cliente y del lado del servidor funcionen bien juntos.
Para un gran proyecto de código abierto con varios contribuyentes, tener un estándar acordado y una forma nativa de proporcionar interactividad del lado del cliente acelera el desarrollo y mejora enormemente la experiencia del desarrollador.
Cinco objetivos dieron forma a las decisiones del equipo central de desarrollo cómo construyeron la API:
- Bloque primero y PHP primero: Priorizar los bloques de creación de sitios web y la representación del lado del servidor para mejorar el SEO y el rendimiento. Una combinación de la mejor experiencia de usuario y desarrollador.
- Compatible con versiones anteriores: Garantizar la compatibilidad con temas clásicos y de bloques y, opcionalmente, con otros marcos de JavaScript, aunque se recomienda utilizar la API como método principal. También trabaja con ganchos e internacionalización.
- Declarativo y reactivo: Usar código declarativo para definir interacciones, escuchar cambios en los datos y actualizar solo las partes relevantes del DOM en consecuencia.
- Ejecutante: Optimizar el rendimiento del tiempo de ejecución para proporcionar una experiencia de usuario rápida y ligera.
- Enviar menos JavaScript: Reduzca la cantidad total de JavaScript enviado a la página proporcionando un marco común que los bloques puedan reutilizar. Entonces, cuantos más bloques aprovechen la API de interactividad, menos JavaScript se enviará en total.
Otros objetivos están a la vista, incluidas mejoras en la navegación del lado del cliente, como puede ver en este PR.
API de interactividad frente a Alpine
La API de interactividad tiene varias similitudes con alpino– una biblioteca JavaScript liviana que permite a los desarrolladores incorporar interacciones en sus proyectos web, a menudo utilizada en WordPress y Laravel proyectos.
Al igual que Alpine, la API de interactividad utiliza directivas directamente en HTML y ambas funcionan muy bien con PHP. A diferencia de La API de interactividad de Alpine está diseñada para integrarse perfectamente con WordPress y admite la representación de sus directivas en el lado del servidor.
Usando la API de interactividad, puede generar fácilmente una vista desde el servidor en PHP y entonces agregue interactividad del lado del cliente. Esto da como resultado una menor duplicación y su soporte en el núcleo de WordPress conducirá a menos decisiones arquitectónicas que los desarrolladores deben tomar actualmente.
Entonces, si bien Alpine y Interactivity API comparten un objetivo muy similar (facilitar a los desarrolladores web agregar elementos interactivos a un sitio web), Interactivity API es aún más plug-and-play para los desarrolladores de WordPress.
API de interactividad frente a React y Vue
Muchos desarrolladores han optado por Reaccionar al agregar interactividad a las páginas de WordPress porque, en el proceso de desarrollo web moderno, React es la solución principal para manejar de forma declarativa la interactividad DOM. Este es un territorio familiar y estamos acostumbrados a usar React y JSX al agregar bloques personalizados para Gutenberg.
Se puede cargar React del lado del cliente, pero te deja con muchas decisiones: “¿Cómo debo manejar el enrutamiento? ¿Cómo puedo trabajar con contexto entre PHP y React? ¿Qué pasa con el trazado del lado del servidor?”
Parte del objetivo al desarrollar la API de interactividad era la necesidad de escribir la menor cantidad de JavaScript posibledejando el trabajo pesado a PHP y entregando JavaScript solo cuando sea necesario.
El equipo central también notó problemas con la forma en que estos marcos funcionan junto con WordPress. Los desarrolladores pueden utilizar marcos de JavaScript como React y vista para representar un bloque en el front-end que el servidor representó en PHP, por ejemplo, pero eso requiere duplicar la lógica y corre el riesgo de exponerlo a problemas con los enlaces de WordPress.
Por estas razones, entre otrosel equipo principal prefiere preact— un marco de interfaz de usuario más pequeño que requiere menos JavaScript para descargar y ejecutar sin sacrificar el rendimiento. Piense en ello como reaccionar con menos calorías.
Luis Herranz, colaborador principal de WordPress en Automattic, detalla el uso que hace Alpine de Preact y la API de interactividad con una fina capa de directivas en la parte superior. en este comentario sobre la propuesta original.
Preact solo se carga si la fuente de la página contiene un bloque interactivolo que significa que no se carga hasta que se necesita, de acuerdo con la idea de enviar la menor cantidad de JavaScript posible (y enviar No JavaScript por defecto).
En la propuesta original de API de interactividad puedes ver revisión y comparación de varios marcos y por qué se eligió Preact sobre otros.
¿Qué ofrece la nueva API de interactividad a los desarrolladores de WordPress?
Además de proporcionar una forma estandarizada de representar elementos interactivos del lado del cliente, la API Interactivity también proporciona a los desarrolladores directivas y una forma más sencilla de crear un objeto de tienda para manejar estados, efectos secundarios y acciones.
directivas
Las directivas, un conjunto especial de atributos de datos, le permiten ampliar las etiquetas HTML. Puede compartir datos entre bloques renderizados del lado del servidor y del lado del cliente, vincular valores, agregar eventos de clic y más. Referencia de API de interactividad enumera todas las directivas disponibles.
Estas directivas generalmente se agregan en bloques. render.php archivar y admitir todas las API de WordPress, incluidas comportamiento, filtrosy el núcleo de la traducción Apis.
Aquí hay un archivo de renderizado de bloques de muestra. Observe el evento de clic (data-wp-on--click="actions.toggle"), y cómo vinculamos el valor de los atributos extendidos de aria mediante 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>
¿Necesita actualizar dinámicamente el texto interno de un elemento? La API de interactividad le permite utilizar data-wp-text en el elemento, al igual que puedes usar v-text en Vue.
Puede vincular un valor a un valor booleano o una cadena usando wp-bind– o vincular el evento de clic usando data-wp-on–click sobre el elemento. Esto significa que puede escribir PHP y HTML y agregar directivas para agregar interactividad de forma declarativa.
Manejo de condiciones, efectos secundarios y acciones.
La segunda etapa para agregar interactividad es crear una tienda, lo que generalmente se hace en su view.js archivo. En la tienda tendrás acceso al mismo contexto que en la tuya render.php archivo.
En el objeto de la tienda, usted define acciones que responden a las interacciones del usuario. Estas acciones pueden actualizar el contexto local o el estado global, que luego vuelve a representar y actualiza el elemento HTML asociado. También puede definir efectos secundarios/devoluciones de llamada, que son similares a las acciones, pero reaccionan a los cambios de estado en lugar de a las 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 }` );
},
},
} );
Inténtalo tú mismo
¡La API de Interactividad está lista para producción y ya se está ejecutando en WordPress.com! Con cualquier plan de WordPress.com, tendrás acceso a los componentes básicos creados sobre la API de Interactividad.
Si desea crear sus propios bloques interactivos, puede configurar un bloque interactivo ejecutando el siguiente código en su terminal:
npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template
Esto le dará un bloque interactivo de ejemplo, con directivas establecidas y manejo de estados.
Luego puedes jugar con esto localmente, usando wp-envutilizando un sitio de prueba o cargando el complemento directamente en su sitio Plan elegible para el complemento de WordPress.com.
Si desea una experiencia perfecta entre su configuración de desarrollo local y su sitio WordPress.com, intente usarlo con nuestras nuevas implementaciones de GitHub ¡característica! El desarrollo de bloques personalizados es un caso de uso perfecto para esta nueva herramienta.
La mejor manera de aprender algo nuevo es empezar a construir. Para comenzar, puede que los siguientes recursos le resulten un buen punto de partida:
Únase a otros 107 millones de suscriptores
