No funciona el bloque de navegación de WordPress en iPhone SE e iOS 16.2 e inferior

Cuando se trabaja en proyectos de WordPress y se intenta implantar al 100% el uso del Editor de sitios (Gutenberg), te das cuenta de hasta dónde llegan sus posibilidades. El constructor funciona, se pueden hacer cosas interesantes. Aunque, para personas que tienen diseños muy personalizados o con funciones especiales, aún está en pañales comparado con Elementor o Divi. Le vamos a dar tiempo para que mejore.

Pero el problema que os traigo hoy no tiene nada que ver con el uso de WordPress, sino el desarrollo como tal. Ayer, nos dimos cuenta de que el bloque de navegación de WordPress no funciona en móviles iPhone SE o con versión iOS 16.2 o inferior. Haces click, click y click y no responde el menú hamburguesa.

Cómo detectar errores de navegación en móviles

Cuando tienes problemas en móvil (tanto en Android como en iPhones), siempre es recomendable conectar el móvil al ordenador para poder leer todos los problemas del navegador. Igual que tenemos el Inspector de código/Herramientas de desarrollador, podemos ver exactamente las mismas funciones viendo qué ha fallado en nuestro dispositivo.

Para iOS, antes me enfocaba mucho en tener un dispositivo físico para mirarlo y comprobarlo. Tenía mi iPad Air a mano y un dispositivo antiguo de un compañero con la batería inflada, pero funcionaba. Pero si tienes un dispositivo Apple como un iMac o un MacBook, tiene la aplicación Simulador en Xcode.

Los simuladores te instalarán una emulación de los dispositivos que necesites para comprobar cualquier cosa. Están pensados para hacer pruebas para aplicaciones para iOS, pero a nosotros nos viene de perlas para ver qué está fallando y no tener un iPhone para cada versión/comprobación.

¿Por qué no funciona el menú hamburguesa del bloque de navegación de WordPress en algunos móviles?

Cuando una interactividad no funciona, siempre le echaremos la culpa a Javascript. A no ser que seas un as del CSS donde ponga un input invisible y que, si está marcado, se muestra el menú, no creo que no uses Javascript para ello (además de ser muy poco accesible).

En el caso de WordPress, utilizan Javascript para el cambio de menú entre abierto y cerrado. Es totalmente normal cuando usas React para estos componentes y que esté todo conectado. Ahora mismo, también han añadido la API de Interactividad para tenerlo todo globalizado en el mismo contexto.

Casualmente, la API de Interactividad es el problema del por qué no está funcionando el menú. No porque se esté metiendo en medio o porque esté rompiendo algo, no es por la API en sí. El causante real es cómo se importa el módulo de la API de Interactividad en el sitio web.

[Error] TypeError: Module specifier, '@wordpress/interactivity' does not start with "/", "./", or "../". Referenced from /themes/wp-content/plugins/gutenberg/build-module/block-library/navigation/view.min.js

¿Por qué falla la API de Interactividad? Porque utiliza un sistema de importación que no tiene soporte para navegadores «antiguos» o sistemas antiguos. Pero con ayuda de los scripts de soporte para navegadores (polyfills), permitirán añadir funcionalidades para dar soporte a navegadores antiguos.

WordPress utiliza polyfills para ayudar a navegadores antiguos pero los nuevos sistemas están buscando optimizar al máximo el rendimiento y velocidad de los sitios webs. Estos polyfills ocupan carga innecesaria para nuevos navegadores y ayuda a los antiguos, aunque ya estos son cada vez menores.

¿Por qué ha dejado de funcionar el bloque de navegación en iPhone 16.2 o inferior?

Estábamos pensando de que podía ser un bug en el núcleo y nos pusimos a investigar qué estaba pasando, por qué no funcionaba. Encontramos una issue en Github que respondía a los errores que nos daba y empezamos a buscar por qué.

El caso es que, gracias a ese hilo, llegamos a otro debug track donde estaban discutiendo por qué habían dejado de funcionar los menús. Parece ser que desde WordPress 6.5, han eliminado los polyfills de cómo se importan los importmaps. Esto ha hecho que haya dejado de funcionar el menú de navegación.

Incluso en la página web para ver el demo de Twenty Twenty-Five, ya está dando errores y no se puede probar en móvil. Aquí una imagen del error desde el simulador en iPhones SE de tercera generación:

Dirás… ¿Pero por qué han hecho eso? ¿Están locos? Sí y no.

Tienen una razón de peso: no dan soporte a versiones de navegador por debajo del 1% del uso global. Esto quiere decir que los tests y las comprobaciones que hacen para detectar qué hacer y que no hacer, les ha dicho que eliminen los polyfills para este tipo de apartado.

El caso es que las versiones de iOS que están afectadas en abril de 2024 (cuando descubrieron el «bug» por primera vez), eran los siguientes:

¿Crees que se equivoca el equipo que se encarga de este apartado en WordPress? En posición del desarrollador que soy, yo creo que no están equivocados. Es algo habitual que se hace y se comprueba. Cuando menos código anticuado, más rápido irá todo. Cuando antes se quite, antes funcionará.

¿Qué podemos hacer para que funcione de nuevo el bloque de navegación para móviles?

El caso es que puedes o buscarte otro plugin para hacer esos menús de navegación que no sean con Gutenberg o puedes volver a añadir los polyfills de nuevo en forma de plugin.

WordPress ha dejado de usar la librería ES Module Shims. Esta libería ayudar a pasar del 80% que cubre WordPress al 94% del uso global donde podrá ayudar a que la navegación móvil funcione de nuevo.

Lo único que tendríamos que hacer es crear una funcionalidad o plugin para volver a incluirlo de nuevo y darle soporte. Esto nos obligará a añadirlo en todos nuestros proyectos, pero apoyamos el tráfico móvil más que escritorio y no podemos eliminar tanto soporte. Creemos que no serán tan perjudicial añadir estos polyfills y apostaremos para darle un tiempo más a esos usuarios antiguos.

¡Atención! A partir de aquí, voy a explicaros el plugin que hemos hecho para que funcione. Esto no es perfecto, esto no es infalible. Lo hemos hecho para nuestros proyectos y lo tenemos controlado.

Si no sabes cómo añadir esto en un plugin, busca cómo hacerlo. Si no sabes, no lo hagas. Busca alguien que sepa porque puedes hacer que caiga el sitio web.

Para los que entienden el código o los que se siguen aventurando, este es el código explicado paso a paso:

<?php

/**
 * Plugin Name: Adam Martin - Import Map Polyfill
 * Description: Añade el polyfill es-module-shims para compatibilidad con import maps en navegadores antiguos.
 * Version: 1.0.0
 * Author: Adam Martin
 */

if (! defined('ABSPATH')) {
	exit; // Salir si se accede directamente. Evitamos maleantes.
}

/**
 * Encola el script del polyfill es-module-shims.
 */
function imp_enqueue_es_module_shims()
{
	// Ruta al script del polyfill dentro del plugin. Yo me lo he descargado en local y he creado una carpeta assets/js/. Dentro he añadido el fichero. Puedes ponen la URL directametne de algún CDN. Pero mejor cargarlo de local.
	$script_url = plugin_dir_url(__FILE__) . 'assets/js/es-module-shims.js';

	// Encolar el script del polyfill.
	wp_enqueue_script(
		'es-module-shims',
		$script_url,
		array(),
		'2.0.10', // Versión que me descargué en local, puedes poner la que tengas en su momento
		false // Cargar en el encabezado para asegurar que esté disponible antes de otros scripts.
	);
}
add_action('wp_enqueue_scripts', 'imp_enqueue_es_module_shims', 5);

Recuerda activar el plugin 🙂

Prueba y ya me cuentas

Hasta aquí la guía de cómo arreglar el menú de navegación de WordPress para dispositivos móviles iPhone. Dime si te funciona o si encuentras una mejora, cuéntamela.