Cómo depurar errores del editor de bloques en WordPress con DDEV

27 de septiembre de 2025

Cuando trabajamos con WordPress y Gutenberg en local usando DDEV, es bastante común toparse con trazas enormes llenas de llamadas a react-dom.min.js o compose.min.js. Lo malo: están minificadas y no nos dicen mucho. Lo bueno: con un par de ajustes podemos sacar la información útil y encontrar al culpable.

Habilita el modo desarrollo en WordPress

Edita tu wp-config.php y añade estas líneas antes del texto /* That’s all, stop editing! */ para forzar a WordPress a cargar los .js no minificados.( de esta forma podremos ver que esta fallando exactamente).

 /* That's all, stop editing! */:
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('SCRIPT_DEBUG', true);
define('CONCATENATE_SCRIPTS', false);
define('WP_ENVIRONMENT_TYPE', 'development');

En el navegador activa source maps en las opciones de DevTools.
Vuelve a abrir el editor de bloques y revisa la primera línea del error en la consola (no solo la traza). Normalmente verás algo como:

  • Invalid hook call
  • Cannot read properties of undefined
  • TypeError …

A través de ddev podemos aislar si el problema es de plugin o theme

ddev wp plugin deactivate --all
ddev wp theme activate twentytwentyfive

Algunas veces el editor se «atasca» por configuraciones guardadas en el navegador o en la base de datos prueba a limpiar cachés y almacenamiento local

ddev wp transient delete --all
ddev wp cache flush

Y en DevTools ejecuta:

// Esto resetea preferencias del editor (te cerrará sesión)
localStorage.clear();
sessionStorage.clear();

Para activar de nuevo los plugins

 # (ejemplo de tanda pequeña)
ddev wp plugin activate gutenberg classic-editor

Pistas según el mensaje (cuando lo veas desminificado)

Invalid hook call → hay dos React cargados (algún plugin empaqueta su propia react/react-dom). Solución: ese plugin debe marcar react y react-dom como externals con @wordpress/scripts (no bundlearlas).

Cannot read properties of undefined en compose/block-editor → un HOC/Hook de un plugin está llamando a useSelect/useDispatch fuera de un componente o con dependencias rotas.

Errores de Deprecation de @wordpress/compose → plugin/tema usando APIs antiguas (actualizar ese código o el plugin).

Por mi experiencia los culpables habituales suelen ser:

  • Plugins de bloques antiguos que incluyen su propio React o versiones viejas de paquetes @wordpress/*.
  • Temas que inyectan scripts en el editor con dependencias mal declaradas (wp_enqueue_script sin wp-element, wp-components, etc.).
  • El plugin Gutenberg desalineado con la versión de WP Core.
  • Un bloque roto en el contenido: abre el editor → “Editor de código” → elimina el bloque sospechoso y prueba.

Recupera logs útiles

Mira wp-content/debug.log:

# ajusta la ruta si no es Bedrock
ddev exec 'tail -n 200 -f web/wp-content/debug.log' 

«¿Te ha pasado algo parecido en tus proyectos con WordPress? Cuéntamelo en comentarios y vemos cómo lo resolviste.»

«¿Te ha pasado algo parecido en tus proyectos con WordPress?

Cuéntamelo en comentarios y vemos cómo lo resolviste.»
Tags:
Escribe tu comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.