Saltar al contenido

Etiqueta: i18n

JS Archive List 6.2.0: actualización de seguridad, limpieza de i18n y más pruebas automatizadas

Publicado por Miguel Useche el 23 de febrero de 2026

Hay actualizaciones “cosméticas” y otras de urgencia, con un enfoque en la calidad, porque resuelven problemas que surgen en producción. La versión 6.2.0 de JS Archive List se clasifica en la segunda categoría.

En la sección de changelog de WordPress, el foco está clarísimo: es una actualización de seguridad y viene acompañada de mejoras que, aunque no se vean en el frontend, hacen que el plugin sea más sólido a largo plazo.

JS Archive List de nuevo con una vulnerabilidad

El cambio importante: fix de seguridad en filtros por shortcode

El punto más relevante de esta versión de JS Archive List es que se corrigió una deserialización insegura relacionada con los filtros de categorías del shortcode, pasando a un enfoque de parsing seguro de IDs serializados y rechazando cualquier otro valor, como, por ejemplo, un objeto.

Es decir, si tu sitio usa shortcodes y filtros de categorías, ahora el plugin es mucho más estricto con lo que acepta como entrada. Esto reduce superficies de ataque clásicas en las que “datos con forma rara” terminan ejecutando acciones que nunca debieron ejecutarse.

No es el tipo de cambio que “se nota”, pero es exactamente el tipo de cambio que vale oro.

i18n sin sorpresas: text domain alineado con el slug

Otro detalle que descubrí sin querer es que WordPress espera que el dominio del texto coincida con el slug del plugin. En esta versión se arregló mediante cambios en los archivos de PHP, JS y de traducción.

Esto suele arreglar los típicos “¿por qué esto no se traduce si tengo el .mo?” o las inconsistencias que surgen cuando WordPress intenta cargar el dominio correcto.

Readme de JS Archive List mas claro

También se actualizaron los headers del plugin/readme (requisitos, licencia y license URI), pues ahora son requeridos y durante esta década no los había incluido. Así, el plugin tiene una mejor calidad y cumple con los lineamientos de los plugins que exige WordPress.

Más fácil brindar calidad: docs y setup de PHPUnit

Este es mi lado de profesor universitario hablando: si quieres que un proyecto sea sostenible, haz que sea fácil de probar. La nueva versión 6.2.0 incluye: documentación y script instalador para configurar la suite de pruebas con WordPress y PHPUnit

Esto reduce muchísimo la fricción al añadir pruebas, correrlas en CI y detectar regresiones antes de que algo llegue a producción. Probablemente agregue más pruebas en futuras versiones de JS Archive List.

Codex me ahorró horas

Aquí va mi confesión nerd: parte de esta actualización se benefició mucho de Codex para acelerar el trabajo “invisible”: revisar cambios repetitivos, mantener la consistencia con los estándares de WordPress y, sobre todo, acelerar la incorporación de chequeos de calidad (tests, estructura, convenciones) sin convertirlo en una semana entera de trabajo.

Eso sí, no reemplaza el criterio (eso no se delega), pero sí recorta brutalmente el tiempo entre “tengo que hacerlo” y “listo, quedó fino y revisado”.

Prueba JS Archive List y dime qué tal

Si todavía no lo has probado, este plugin existe para lo mismo que yo quería hace años: un archivo colapsable, limpio y configurable, y hoy, además, con soporte moderno vía el block de Gutenberg.

Pásate por la página del plugin, instálalo, juega con las opciones y, si te sirve, deja una reseña, reporta bugs o sugiere mejoras.

Eso es lo que mantiene vivo el software libre.

Deja un comentario

Cómo crear un menú de navegación multi idioma en Shopify

Publicado por Miguel Useche el 30 de mayo de 2022

Si creas un aplicación embebida en Shopify, tienes la posibilidad de crear un menú de navegación multi idioma para acceder a las distintas partes de tu aplicación, en el idioma establecido para la cuenta del administrador.

El menú de navegación de una aplicación embebida

Normalmente éste menú lo puedes definir en la configuración de la aplicación. Y se creará automáticamente al momento de cargar la página. Pero posee la limitación de solo ser compatible con un solo idioma, entonces, si tienes mas ese menú va a estar siempre en el mismo idioma.

Crear el menú desde React con App-Bridge

Para solventar esto podemos usar el componente NavigationMenu de App-Bridge. Que no es para crear menús adicionales, sino acceder a el mismo que mostré en el párrafo anterior y se crea antes de renderizar el resto de la aplicación. Con App-Bridge le decimos a Shopify que vamos a crear un menú y le pasamos la etiqueta y dirección de cada sección.

Crear un componente para definir las rutas

Para la creación del menú de navegación multi idioma, necesitamos definir el texto y el enlace de cada entrada del menú con Applink, pues éste es el tipo de dato que acepta NavigationMenu.

Entoces simplemente podemos hacer un arreglo con la traducción del texto (en este caso uso react-i18n de Shopify) y el enlace. Posteriormente recorremos cada posición del arreglo y generamos el AppLink para enviarlo a la aplicación.

import { AppLink } from '@shopify/app-bridge/actions';

const menuEntries = (i18n) => ([
  {
    label: i18n.translate('Menu.dashboard'),
    destination: '/dashboard',
  },
  {
    label: i18n.translate('Menu.settings'),
    destination: '/settings',
  },
]);

const menuItems = (app, i18n) => {
  const items = [];
  const entries = menuEntries(i18n);

  let active;

  entries.forEach((entry) => {
    const menuLink = AppLink.create(app, entry);
    items.push(menuLink);

    if (window.location.pathname.includes(entry.destination)) {
      active = menuLink;
    }
  });

  return { items, active };
};

export { menuItems };

Cargar el componente en la aplicación

Una vez que tengamos un componente que devuelva las entradas del menú traducidas y en formato AppLink. Podemos pasarlas al componente NavigationMenu utilizando la función create().

Primero importamos el componente realizado en el paso anterior:

import { menuItems } from './NavMenu';

Luego simplemente usamos el hook useAppBridge() para obtener la instacia de la aplicación embebida. Guardamos los enlaces en una variable y posteriormente se lo pasamos como argumentos a NavigationMenu para que cree el menú.

const app = useAppBridge();
const menuOptions = menuItems(app, i18n);

NavigationMenu.create(app, menuOptions);

¡Y listo! Ya tendrás tu menú de navegación multi idioma.

Espero que te haya sido de ayuda y ahora puedas tener un menú principal que funcione en los idiomas soportados por tú aplicación.

Deja un comentario