WordPress 5.3 のクラッシックエディタで文字入力が異常に重い
WordPress を 5.3 にバージョンアップした後に記事を書こうとして遭遇したトラブルについて書きます。
WordPress 5.3 の Classc Editor
タイトルを WordPress 5.3 としていますが、WordPress 5.3 が原因だと決まった訳ではないので注意してください。
具体的には Classic Editor で文字を入力する際、fig. 1 のように文字を入力してもエディタ内に反映されるまで時間がかかって動作が非常に重いと言う問題が発生しました（発生しています）。
fig.1 文字入力がブラウザに反映されない
fig. 1 では少し分かりにくいかもしれませんが、本来は fig. 2 のようにキーボードの入力がエディタに即時反映されるはずが fig. 1 ではキーボードから入力した文字がエディタに表示されていません。
fig.2 正常な場合の入力
fig. 1 と 2 を比べると分かると思いますが、正常な fig. 2 では入力したひらがなが表示されていますが、fig. 1 では 1文字目が表示された後しばらくしてから確定された文字が突然表示されていますし、確定してから実際に文字が表示されるまでしばらく時間がかかっています。
又、入力した文字を Shift + 矢印キーで選択していますが、fig. 1 ではカーソルが飛んでしまうため、再度選択し直しているのが分かると思います。
この状態で記事を書くのは、かなりストレスが溜まるので対応法を探してみました。
ブラウザの開発者モードを確認
『wordpress 5.3 classic editor 文字入力 表示されない』等のキーワードでは該当しそうな情報がヒットしませんでしたが、ブラウザの開発者モードのコンソールにエラーが表示される場合があると言う情報を見つけて早速投稿の編集画面でキーボードの F12 を押して開発者モードを開きました。
※ 管理人が使っているブラウザは Chorome ですが、最近のブラウザであればほとんど搭載されているはずです。
fig.3 Chorome 開発者モード – Console
F12 で開発者モードを開いて【Console】を見ると fig. 3 のようにエラーが表示されています。
fig. 3 のような背景色がピンクの項目が表示されていない場合はここで紹介する原因とは違うと思うので他を当たってください。
管理人の環境では投稿編集ページで 2 つのエラーが発生しているようで、原因を確認するために fig. 3 の赤枠で囲んだ部分をマウスでクリックします。
エラー発生個所の確認
Console からエラーの発生個所をクリックすると fig. 4 のように【Source】へエラー発生個所が表示されます。
fig.4 エラーが発生している個所の確認
エラーの内容を確認すると Console でも表示されているのと同じ『innerHTML なんてプロパティは無いよ！』と言われますが、これだけでは原因は分からないので、エラーが発生しているソースファイルを fig. 5 のように先頭までスクロールします。
fig.5 エラーが発生しているソースファイルの先頭
ファイルの先頭部分に『all-in-one-seo-pack』と言う文字が確認できるので、エラーが発生しているのは WordPress の有名プラグインの 1 つである【All in One SEO Pack】だと予想できます。
ソースコードの先頭はヘッダコメントと呼ばれるプラグイン名等を書くことが多いので、どのプラグインのソースコードかを確認したい場合はファイルの先頭を見ると実際のプラグイン名が分かることが多いと思います。
問題の原因になっていそうなプラグインの目星は付きましたが修正できる訳ではありません。
ただ、All in One SEO Pack はここ 2 ～ 3 日（2019/11/19 現在）の間にバージョンアップしたのでバージョンダウンすれば治るかもしれないと考えました。
WordPress プラグインのダウングレード
WordPress プラグインをダウングレードする方法は WordPressの更新したプラグインをダウングレードして元に戻す方法 等に書かれている通りに行えば簡単にダウングレードできます。
管理人の場合、All in One SEO Pack Ver.3.3.2 から問題が発生したので、1 つ古い Ver.3.3.1.1 に戻すことにしてダウングレードすると fig. 6 のように普通に文字入力ができるようになりました！
fig. 6 通常の文字入力
とりあえず文字入力が重くなる原因は All in One SEO Pack だったようですが、ちょうど All in One SEO Pack Ver.3.3.3 がリリースされたのでインストールしてみました。
ですが、やはり文字入力が重いのは変わらず結局 Ver.3.3.1.1 に再度戻してこの記事を書いています。
All in One SEO Pack の GitHub Issue を検索すると同じエラーが報告されていて Ver.3.3.4 で対応される予定のようです。
但し、GitHub の Issue を翻訳して確認した所、Classic Editor のテキストタブでしか起きませんと書いてあるのが気になります… fig. 1、2 のように管理人の環境ではビジュアルタブで発生しています…
とりあえず、Ver.3.3.4 を待つしかなさそうです。
2020/2/7 にリリースされた Ver.3.3.5 でこの現象は発生しなくなりました！
Ver.3.3.4 ではデベロッパーツールのコンソールにエラーがまだ表示されていましたし、キーボードから文字入力していて少し引っかかるような感覚がありましたが、Ver.3.3.5 ではコンソールにエラーが表示されなくなっていて、入力も前バージョンを使用していた時と変わらない感覚で入力できています。
これはおそらく上で紹介した All in One SEO Pack の GitHub Issue とは別の Issue『Bug – Preview Snippet breaks when browser loads page slower than timeout』での対応の結果ではないかと予想しています。
（2020/2/10 追記）
2019/12/29 に All in One SEO Pack Ver.3.3.4 がリリースされたのでアップグレードしましたが、管理人の環境では以前ほどではありませんが、状況が再現します。
ここで紹介したのと同じ方法で確認した所、同じような箇所でエラーが発生していたので再度 Ver.3.3.1.1 に戻しました。
この記事を書いた時には入力文字の確定がとても通常使用に耐えられないくらい遅延する状態でしたが、Ver.3.3.4 ではかなり解消されたようには感じました。
但し、管理人的には文字入力をすると確定まで少し引っかかるような感じを受けたのでダウングレードしました。
ものの数分で元に戻したので使い続けるとどうなるかは分かりません。
上記で紹介している All in One SEO Pack の GitHub Issue は現時点（2019/12/21 現在）では Close されていますが、TinyMCE エディタが原因で完全に解消できないと書かれているので完全解消は難しいかな… と感じています。
（2019/12/21 追記）
もう 1 つのエラー
fig. 3 でもう 1 つ発生していたエラーは前章と同じ手順で確認すると Pz-LinkCard と言うプラグインで発生しているエラーでした。
All in One SEO Pack と同じようにダウングレードしてみましたが、ブラウザの開発者モード Console に出力されるエラーは変わらず、最新バージョンをインストールしても特に不都合は感じないので無関係なエラーだと思うことにしました。
fig. 7 Pz-LinkCard で発生しているエラー
結論
今回の原因は All in One SEO Pack のバグと言う事で決着が着きそうですが一応、他に困っている人が居るかもしれないので情報として残しておくことにします。
WordPress を使っていて問題が発生した場合、ブラウザの開発者モードでエラーを確認し、エラーが発生しているプラグインがあればダウングレードすればとりあえず回避することができると言う方法を覚えることが出来たと言う事で良しとします。
