Gutenbergが有効にならない問題

技術ネタ

re:Inventのネタが終わってすぐですが、昨日思ったこと

ブログを書くのに時間がかかりすぎる

WordPressを初めたのが最近で、Gutenbergがお試しに入ってスグでした。
不評も多いのですが、Gutenbergって個人的には結構使いやすくて最初からこっちを使い始めると他のビジュアルエディタ使いづらくなっちゃうんですよね💦

ですが、急にGutenbergが使えなくなりました。

このとき、丁度WordpressのマイナーアップデートやCocoonのアップデートがあったので、まぁそのうち直るだろうと勝手に思ってたわけですが一向に治らない

なので、生のHTMLをペタペタ書くような感じになってたんですw
普通にHTMLのページ一枚を文章考えながらちまちま書いてたら、2〜3時間経ってました/(^o^)\

今思えば、静的ジェネレーターとかで書いて吐き出されたHTMLそのまま貼ったほうが早かったです。

というわけで、書くのが遅いのは自負しているが、流石に皆こんな面倒な事してないだろうと思い調べましたw

そもそもビジュアルエディタが使えなくなっていた

そもそもここにたどり着いてなかったです・・・w


あまりにもこのエディタが辛いので、先日Facebookで教えていただいたWYSIWYGというものを探してみることに。
TinyMCE Advancedというエディタにたどり着き適用してみる。

なぜか、エディタの見た目が変わらない

この辺りから、今使っているエディタがタダのテキストエディタということに気づくw
そもそもテーマのCocoonにはWYSIWYGが標準搭載されていて、新しくプラグイン突っ込まなくてもよい・・・

ここからビジュアルエディタのON、OFF設定やプラグインの稼働・停止を繰り返すがうまく行かず・・・
そもそもビジュアルエディタが表示されない原因を調べてみました。

解決方法

というわけで、たどり着いたサイトがこちら。

WordPressはUserAgentによってビジュアルリッチエディターを出力するか判断しています。
自分のブラウザのUserAgentがワードプレスに認識されているか確認しましょう。
CloudFrontなどのCDNを使っている場合、特に怪しいです。


というわけで、このサイトに書いてあるとおりtest.phpを書いて配置してみました。

User-Agent: Amazon CloudFront

こいつか!!!

CloudFrontの設定変更


早速CloudFrontの設定変更。

CloudFrontを導入してもUser-agentの値は書き換えられないようにする方法。 - Qiita
# はじめに CloudFrontの導入の際に、特に何も設定を行わないと、CloudFrontを通過する時点で_User-agent_の値が「Amazon CloudFront」に書き換えられてしまいます。 その場合、今まで_User...

/wp-admin/*を選択して、Editで修正

Cache Based on Selected Request HeadersNoneになっていたので、Whitelistに変更、Whitelist HeadersUser-Agentを追加

同じことを*.phpにも設定して、もう一度test.phpにアクセス

User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36

User-Agentが正常に戻ったので、新規投稿画面を見てみたら直りました!

まとめ

結局はGutenbergの問題でもCocoonの問題でもありませんでした💦
流石にエディタの見た目がUser-Agentで変化するとは思ってなかったです・・・

今回はこの設定で直りましたが、CloudFrontの設定としてはAWSのドキュメントでこのやり方はあまり推奨されないようです。

Date および User-Agent ヘッダーの値に基づいてオブジェクトをキャッシュするように CloudFront を設定できますが、これはお勧めできません。これらのヘッダーには可能な値が多数あり、その値に基づいてキャッシュすると、CloudFront がオリジンに転送するリクエストの数が大幅に増加します。

まぁ・・・wordpressのphpファイルは別にキャッシュしなくていいので問題ないかなと。
調べるのにちょっと時間がかかったけどブログは30分くらいで書けるようになったので、結果オーライでヽ(=´▽`=)ノ

コメント