【解決!公式対応を追記】WordPress 5.3 にアップデートしたら編集画面がズレたので対策

WordPress 5.3 にアップデートしたら編集画面がズレたので対策制作

WordPress5.3の更新が来てたからアップデートしたら、あれ? 投稿記事の編集画面がなんか左に寄っちゃってズレてない?

画面が左に寄ってる

まあいいか。といつも通り記事を制作していて気付く…

無い! あの矢印が無い!
段落とかパーツごとに動かして並び替えるやつ!

私も思わず悲しみのツイートをしてしまいました。

WordPress 5.3 にアップデートしたら、新エディタがさらに使いにくくなって涙。
ブロックを上下に移動させる矢印が無い?
テーマかプラグインかの相性でしょうか。 要するにわかりません!

ブロックの左側に出てくる(ハズの)上下に移動させて並び順を変更できる矢印。
便利ですよね。
これをまた使えるようにする対応の手順をご紹介します。

ちなみにこの記事も、下記対策をしてブロックの並び替えを使いながら制作しています。


【2019/11/15 追記】
Cocoonフォーラムで公式に、Cocoonを最新版にしたら解決する旨が回答されました。
WordPressを5.3にアップデートしたら、エディター画面が左に寄ってます。 | 不具合報告 | Cocoon フォーラム
詳しい方は手動でアップデートを。
私は自動アプデがくるまで待ちます。それまでは以下の方法でしのぎます。

【2019/11/16 追記】
自動アップデートが配布されて、Cocoon2.0~となりました。
エディターの寄りに関して、解決済みのバージョンです。
困った方は最新版にアプデしましょう。作者様に感謝です。


この記事の内容は、WordPressやCocoonの公式な対応ではありません。
ワードプレス・コクーンユーザーである著者カミヤが応急処置としてとった対策です。
一切の責任を負えませんので、自己責任でお試しください。

WordPress5.3 アップデートで編集画面がズレたので対策【上下する矢印が復活】

WordPress5.3 アップデートで編集画面がズレたので対策【上下する矢印が復活】

ブロックを上下させる矢印を復活させる対策の手順を解説します。
編集画面が左に寄った原因が、WordPress5.3 か Cocoon か他プラグインか、それぞれの相性かはわかっていない中で、いちばん実践しやすい応急処置はこれかなと思います。

本体を編集するのは、他の崩れや不具合を誘発するかもしれないので、ブラウザ上で表示を一時的にずらして対策します。

【環境】
ワードプレス5.3
新エディタ「Gutenberg(グーテンベルグ)」使用
テーマ「Cocoon」バージョン 1.9.9.5.3
ブラウザ「google chrome」
windows10

ブラウザの検証でスタイルを一時的に編集

ワードプレスの投稿編集画面のエディタのどこかで、右クリックして検証。
今回は、記事タイトルの入力欄にカーソル(マウスポインタ)を置いた状態で
右クリック
検証
をしてください。

右クリックで検証

そうすると、右側上段にhtmlソースが表示されます。

右側上段にhtmlソースが表示されます

タイトル入力欄で検証を選んだので、
タイトルのtextareaの記述部分がうすく色付いています。

そこから、ソース表示欄を少し上にスクロールして見てください。

ソース表示欄を少し上にスクロール

13行くらい上の

<div tabindex="-1" class="edit-post-visual-editor editor-styles-wrapper">

と書かれている行を、一回クリックします。

該当箇所をクリック

クリックしたらその箇所が選択されて、下の欄にスタイルの記述が表示されます。

下の欄にスタイルの記述が表示されます
.edit-post-layout__content .edit-post-visual-editor {
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0 10px;
}

の中で

padding: 0 10px;

のピクセル数値(px)をダブルクリックすると変更できるようになりますので

padding: 0 40px;

10pxを、40pxくらいに書き換えてあげます。
ご自身の画面状況に合わせて、数値を大きめにしたりしてください。

10pxを、40pxくらいに書き換えてあげます

これで右側の検証ウインドウを閉じると

検証を閉じる

いかがでしょうか。

入力欄の左右余白を増やしたおかげで、隠れてしまっていた「ブロック単位で上下移動させる矢印」が使えるようになりました。

「ブロック単位で上下移動させる矢印」が使えるようになりました

そしてこの方法は、WordPressやCocoonの元ファイルを編集していません。
ブラウザ上で見た目の変更をシミュレートしているだけなので、安心度が高いと思います。

逆に、元ファイルを編集していないので、投稿一覧に戻ってからまた記事編集を開く等のページ移動でリセットされます。
矢印が使いたいときは、再度この操作が必要になります。
もちろん投稿の編集内容は保存できます。

  • WordPressやCocoonの元ファイルを編集保存していないので安心
  • 投稿一覧に戻ってからまた記事編集を開く等のページ移動でリセットされる
  • 投稿の編集内容はいつも通り保存できる

都度の操作で面倒ですが、すぐに対応修正版がリリースいただけると思いますので一旦の応急処置をご紹介しました。

繰り返しになりますが、編集画面が左に寄った原因が WordPress5.3 か Cocoon か他プラグインか、それぞれの相性かは今私はわかっていません。
公式な対応では無いので、自己責任でお試しください。

ご指摘などありましたら、いただけると幸いです。

コメント

タイトルとURLをコピーしました