WordPress の編集画面でビジュアルエディターが使えなくなった原因と対処

WordPress で Web サイトを構築して、さぁ完成したぞとリリースしたところ編集画面でビジュアルモードが使えなくなる不具合に遭遇してしまった。

環境

• AWS EC2 インスタンス
• WordPress 5.8
• プラグインは色々入れているが不具合発生の前後で追加などはしていない

現象

すべての編集画面 (Gutenberg) が強制的に「コードエディター」になり、「ビジュアルエディター」へ変更するメニューも消えてしまった。

前まではこの「プラグイン」メニューの上のところに「エディター」というメニューがあったはずだが・・・？

試したけどダメだったやつ

• ユーザ設定の「ビジュアルリッチエディターを使用しない」にチェックが入っているのではないか？
  • → 確認したけど入っていなかった

判明した原因

1. 本番リリースにあたって CDN (CloudFront) を挟むように変更した
2. CloudFront はデフォルト設定だと User-Agent を「Amazon CloudFront」に書き換えて forward する
3. Gutenberg は User-Agent をみて「ビジュアルエディターが使えるかどうか」を判断しているらしく、「Amazon CloudFront」なる User-Agent は使えないと判断して無効にした

Gutenberg なんだその仕様・・・
せめて warning メッセージか何かを出してほしいな・・・

対応方法

CloudFront の Behavior の設定で User-Agent を forward するように設定した。

↓