El editor deja de funcionar en WordPress cuando activo un CDN como Cloudfront

Algo que nos ha ocurrido varias veces. Activar un CDN en una web es algo que incluso Google recomienda en su PageSpeed. Lo que hace es “cachear” (guardar una copia) el contenido de tu web, sobre todo el estático, y servirlo más rápido que tú. Porque lo da ya montado (tu web dinámica lo construye en cada petición), porque tiene más velocidad, porque está optimizado…etc.

El problema es que guardar copias que no cambian de ciertas partes de tu web, puede romper funcionalidades. Y entonces hay que excluirlas de este “caché”. Hoy vamos a tratar uno de estos fallos, como en su día hablamos de otro.

El editor visual deja de funcionar en WordPress tras activar un CDN como Cloudfront.

Los síntomas son claros:

• El texto para editar lo ves en blanco.
• No ves las pestañas y botones de tu editor.
• Lo ves todo como si fuera html.
• No puedes añadir o guardar ningún bloque en el editor.

La razón es que WordPress manda en un header (cabecera) llamado user-agent, desde la carpeta wp-admin, el campo que indica si el usuario en cuestión puede usar el editor visual o no (TinyMCE o el que sea). Es un campo del tipo user_can_richedit con valores true o false.

El problema es que los CDNs como Cloudfront eliminan las cabeceras de estas partes de la web, para hacerla más rápida. Y entonces el usuario se encuentra con que deja de funcionar el editor. Puedes ver que es la causa fácilmente o desactivando el CDN o apuntando tu web directamente al servidor fuente (o balanceador en caso de Amazon) en vez de al CDN.

¿Cómo lo soluciono?

Sencillo, tienes dos opciones:

• Tienes dos maneras de activarlo en Cloudfront y vienen explicadas aquí.
  En las políticas de caché del directorio de /wp-admin/* puedes añadir la cabecera “user-agent” al whiteliste, a la lista de exclusiones. Y verás que funciona. De hecho esto debe ser tan frecuente, que Amazon en el 2020 ya incluyó una política que excluye esta cabecera y puedes usar :
  https://aws.amazon.com/es/blogs/networking-and-content-delivery/amazon-cloudfront-announces-cache-and-origin-request-policies/
  
• Si no sabes cómo resolverlo, no puedes, o mientras lo resuelves, puedes añadir un código en functions.php o en tu plugin de Snippets. Es el siguiente (recordad que es un parche, arregla un problema que debería resolverse en origen):

function richedit_wp_cloudfront () {
   add_filter('user_can_richedit','__return_true');
}

add_action( 'init', 'richedit_wp_cloudfront', 9 );

Nosotros, añadiendo la política de exclusión en Cloudfront y dejando pasar ese header pudimos arreglar el problema en un cliente.